Jquery UI datepicker

Question

Hi all. I am trying to display a basic Jqeury datepicker in my application. When a user clicks the input field, a calendar will show up. My input field is on the bottom of the window, when the calendar pops up. It shows fine in Firefox and Chrome (above the input field) but not in IE (pops up below the input field and the calender is cut off by the bottom of IE). I was wondering if someone here can help me with it. Thanks a lot!

Sample

My Jquery

$("#addMatch").live('click', function(){

 $(this).closest('tr').before("<//input field #datepicker
"<tr><td>Date: <input type='text' id='datepicker' size='6' name='date'></td>"+ 
"<td colspan='3'>Time: <select><option>13:00</option>"+
          "<option>18:00</option>"+
          "<option>19:00</option>"+
          "<option>20:00</option>"+
          "</select></td>"+
          "</tr>");

 $("#datepicker").datepicker({ changeMonth: true, changeYear: true, yearRange: '2010:2020'});

 return false;
});