JQuery date picker: trying to show the pop up on top of my input boxes always

Hi

I am trying to get the calender to pop up above my input boxes. I tried some of the suggestion from this forum but its not working. can some one help

here is my code

$(function() {
    var dates = $( "#frmdate, #todate" ).datepicker({
        dateFormat: "mm-dd-yy",
        maxDate: 0,
        showOn: "button",
        buttonImage: "<%=request.getContextPath()%>/img/calendar.gif",
        buttonImageOnly: true,
        changeMonth: true,
        changeYear: true,
        onSelect: function( selectedDate ) {
            var option = this.id == "frmdate" ? "minDate" : "maxDate",
                instance = $( this ).data( "datepicker" );
                date = $.datepicker.parseDate(
                    instance.settings.dateFormat ||
                    $.datepicker._defaults.dateFormat,
                    selectedDate, instance.settings );
            dates.not( this ).datepicker( "option", option, date );
        },
        beforeShow: function(input,inst){
            inst.dpDiv.css(
                { 
                    'top': input.offsetHeight+ 'px', 
                    'left': (input.offsetWidth - input.width)+ 'px'
                }
            );
        }
    });
    $.extend($.datepicker,{_checkOffset:function(inst,offset,isFixed){return offset}});
});

... ...

<td width="200" align="right" class="label">
<label for="c7">
From: <form:input id="frmdate" path="searchVO.fromDate" size="10" maxlength="10" readonly="true"/>
</label>
</td>
<td width="300" align="left">
To: <form:input id="todate" path="searchVO.toDate" size="10" maxlength="10" readonly="true"/>&nbsp;&nbsp;[MM-dd-yyyy]                               
</td>

When I was debugging I noticed that the pop up will showup in a certain location but as soon as i run the code it moves back to its original location. which tell me that the dynamic location thing is not disabled properly.

please help