jQueryUI dialog opens off screen in IE8

Whenever I open a dialog box in IE8 and the current page has vertical scrolls, the dialog box is opened off screen. For example:

<body>
<!-- This will be our button -->
<div id="btntest" style="border:solid 1px; cursor:pointer;">Test button</div>
<?php
# 200 lines of blank spaces to show vertical scroll bars
for($i = 0; $i < 200; $i++){
    echo "&nbsp;<br>";
}
?>
<div id="txtso" title="Stack Overflow">
Test Dialog Box
</div>
</body>

Page jQuery:

$(function(){
    // get the page width and height. Reduce that to 75% to determine the dialog box's dimensions
    var pw = parseInt(($(window).width())*0.75);
    var ph = parseInt(($(window).height())*0.75);
    // initially hide the dialog boxes
    $('#txtso').hide();
    // function to create a dialog box
    var fxnDlg = function(dlgid){
        $('#'+dlgid).dialog({
            bgiframe: true,
            width: pw,
            height: ph,
            modal: true,
            buttons: {
                Ok: function(){
                    $(this).dialog('close');
                }
            }
        });
        $('#'+dlgid).dialog("open");
    }

    // clicking the button
    $('#btntest').click(function(){
        fxnDlg("txtso");
    });
});

Using the following:

jquery-ui-1.7.2.custom.css
jquery-1.4.2.min.js
jquery-ui-1.8.2.custom.min.js

As mentioned, this works in other browsers except... wait for it... IE!! Any solution or workaround will be appreciated. Thank you

ansaurus

tags:

views:

answers:

jQueryUI dialog opens off screen in IE8

related questions