datepick() not getting properly styled

datepick() not getting properly styled

in my page i load both a themeroller's css and the datepick css:

  1. <link rel="stylesheet" type="text/css" href="css/smoothness/jquery-ui-1.8.11.custom.css">
  2. <link rel="stylesheet" type="text/css" href="css/ui-smoothness.datepick.css">

An of course the datepick library:


  1. <script type="text/javascript" src="js/jquery.datepick.min.js"></script>
  2. <script type="text/javascript" src="js/jquery.datepick.ext.min.js"></script>

Then from a method of mine I run the following code:

  1. div1.append('<div class="smallerpanel">');
  2. div1.append('<input id="date1" type="text"/>\n');
  3. div1.append('</div>');
  4. var date1=$("#date1");
  5. date1.keypress(function(event) {
  6.         event.preventDefault();
  7.     });
  8.     date1.keydown(function(event) {
  9.         event.preventDefault();
  10.     });
  11.  date1.datepick({
  12.         dateFormat: 'dd-mm-yyyy',
  13.         minDate:mindate
  14.     });
The problem is, the datepicker appears but won't get styled correctly. It appears on the opposite side of the page, half hidden under my openlayers map, it has no background and the dates aren't buttons but text. The browser seems to be loading all the css files correctly. What's the error then?