Modal centering problem in IE6

Question

Hi, I'm using a popup modal on my site but have an issue with the dreaded IE6.
The modal pops up smack bang in the middle of the page until the page is a long scroll, then IE6 opens the modal but you need to scroll up to find it.

The code I'm using is as follows.

$(id).css('top',  winH/2-$(id).height()/2);  
$(id).css('left', winW/2-$(id).width()/2);  

Can anyone suggest a hack for IE6.
Thanks.

Answer 1

This shouldn't work on other browsers either, as you didn't supply the page scroll offset. You should also save the element to a variable to save jQuery from traversing the DOM four times and you can also combine the css declarations into one. Try this:

var el = $(id);
el.css({
    top:  $(window).scrollTop() + winH / 2 - el.height() / 2,
    left: winW / 2 - el.width() / 2
});  

Other method is to use the document height instead of window height. Window height is the height of the page currently visible on the screen, and document height is the height of the whole page. Using document height:

var el = $(id);
el.css({
    top:  $(document).height() / 2 - el.height() / 2,
    left: winW / 2 - el.width() / 2
});