Jquery problem datepicker

Jquery problem datepicker

Hello,

I created a 'datepicker jquery' that I customized a bit of with differents colors in many 'day cells'.

I added a length for the array, for the lines and the columns. Every cells(<td>) contain two <div>(one for the above part and one for the low part). The problem is visual. Actually, I notice that my cells(<td>) colorize itself at the inside but not on the borders of the cells. Moreover, the last edge, border of the array is not linear. I don't know why

Do you have a solution ?

Thank you

This is my code :

  1. var height = 2.2;
    var width = 2.2;
    var unit = "em";

    //rearrangement de la table
    $("table").css("width", "" + (width*7) + unit);
    $("table").css("height", "" + (height*5) + unit);
    $("table").css("margin-left","0.8"+unit);

    $("#date table tbody td a[class*=\"ui-state-active\"]").each(function(){
     $(this).removeClass('ui-state-active');
     $(this).removeClass('ui-state-highlight');
     $(this).removeClass('ui-state-hover');
    });

    $("table thead tr th").each(function() {
     $(this).css("width", "" + width + unit);
    });

    $("table td").each(function () {
     $(this).parent().css("width","" + (7*width) + unit);
     $(this).parent().css("height","" + height + unit);
     
     $(this).attr("onclick","");
     $(this).css("width", "" + width + unit);
     $(this).css("height", "" + height + unit);
     $(this).css("border", "0.1" + unit+" solid black");
     $(this).append("<div style=\"background-color:white;vertical-align:bottom;height:"+(height/2)+unit+";width:+"+width+unit+";padding:0em 0em 0em 0em;\"></div>");
     
    });

    $("table td a").each(function () {
     $(this).css("font-size", "1.3"+unit);
     $(this).css("color", "black");
     $(this).css("text-align","center");

     $(this).removeClass("ui-state-default");
     $(this).removeClass("ui-state-hover");
     $(this).wrap("<div style=\"background-color:white;height:"+(height/2)+unit+";width:"+width+"em;vertical-align:top;padding:0em 0em 0em 0em;\"></div>");
    });

    var selector = 'button, .ui-datepicker-prev, .ui-datepicker-next, .ui-datepicker-calendar td a';










































  2. $(selector).live('mouseover', function(){
     $(this).removeClass('ui-state-hover');


  3.  if (this.className.indexOf('ui-datepicker-prev') != -1){
     $(this).removeClass('ui-datepicker-prev-hover');
     }
     if (this.className.indexOf('ui-datepicker-next') != -1){
     $(this).removeClass('ui-datepicker-next-hover');
     }
    });