Datepicker UI Opening at Random / Unexpected Locations

I have a Datepicker UI linked to a textbox using the following code:

$(document).ready(function(){

txtDOB = $("input[name=txtDOB]");

txtDOB.datepicker();

});

Screenshot of the Textbox: http://arch.kimag.es/share/85588260.jpg

When I click on the textbox, the calendar opens at an unexpected location as seen in this picture

Firefox: http://arch.kimag.es/share/34288230.jpg

I really can't figure out why this is happening. It works perfectly if the textbox is placed in the top regions of the page.

The Actual Problem in a practical situation is here: http://arch.kimag.es/share/66324568.jpg

To avoid the chances of this being a CSS error, I made an absolute vanilla page with no css files. No divs/floats/positioning or any styling.

Just imported jquery.js and ui core.js and it still happens.

I'm attaching along the html file which I created to test if this bug is real. Turns out to be true & cross-browser as well.

Here is a screenshot:

http://img132.imageshack.us/img132/1628/48364612zr7.jpg

Please verify by checking test.html in the attached zip file after extracting:

http://www.quickfilepost.com/download.do?get=f54ecac485c6cb3ab23d0d8e82bd6699

Let me know what your experience is because with this happening, I can never use this component which is critical.