JQuery Datepicker ASP.NET IE7 display issue after postback

I have an ASP.Net 4.0 web app which has a couple of JQuery Datepickers on it. The datepicker works fine when the page first loads up and if the textbox associated with it is visible. (See attached screenshot) However the problem comes when the textbox is not visible when the page is first loaded. When a postback occurs and the textbox is visible after the postback, the datepicker shows up as it should. However the CSS is all messed up on it. (see attached screenshot) This is on IE 7 only - IE8 and IE9 work fine.

Here is the code to initialize the datepicker:

function pageLoad() {
            $('#<%= dtPolExpDate.ClientID %>').unbind();
             $('#<%= dtPolExpDate.ClientID %>').datepicker({
               buttonImage: '../.开发者_StackOverflow./Common/images/calendar.gif', 
               buttonImageOnly: true, 
               showOn: 'both', 
               changeMonth: true, 
               changeYear: true, 
               showButtonPanel: true, 
               closeText: 'Close' 
             });

When I looked at the source, the CSS files are properly loaded up and so are the javascript files for JQuery.

I thought it was something with the masterpages, so I created a really simple aspx page - it has the same issue too. Once I click the button to show the panel with datepicker associated textbox, the datepicker is messed up. All the page has is a nested panel with the topmost panel having a simple button which when clicked shows the lower panel with the datepicker. I cant attach that aspx file here, but if needed I can take a screen shot of the code and upload it here.

Edit: Attached are all the related images :

1. The test code
2. The datepicker before postback (which is already visible before button click)

3. The datepicker after postback (different datepicker which became visible after button click)

   Please help!

---

What is pageLoad()?

Anyway, use $(document).ready() e.g.

$(document).ready(function(){
    $('#<%= dtPolExpDate.ClientID %>').unbind();
    $('#<%= dtPolExpDate.ClientID %>').datepicker({
        buttonImage: '../../Common/images/calendar.gif', 
        buttonImageOnly: true, 
        showOn: 'both', 
        changeMonth: true, 
        changeYear: true, 
        showButtonPanel: true, 
        closeText: 'Close' 
    });
});