Question

I’m having a weird (and probably obvious) problem with a modal window in IE6, that works with Firefox and Safari etc; The window is set to position: fixed, and is meant to be centered, but it actually showing up at the very bottom of the page, over some stuff, pushed off to the left.

My CSS is here:

#overlay { 
position: fixed; 
z-index: 550; 
top: 50%; 
left: 50%;
height: 474px;
width: 500px;
padding: 20px;
margin: -247px 0 0 -270px;
background: #fff;
border: 1px solid #CCC; }

The jQuery function that adds this div is as follows:

var style = '<div id="overlay"><div id="youtube-player"><a href="#" class="close-overlay">&nbsp;</a><p id="overlay-preload">Loading</p></div></div><div id="modal-background"></div>';

        $('body').append(style);

Any help would be greatly appreciated; I’d love to share the URL but the site is for a client and is password protected.

Cheers!

Answer 1

As far as I know IE6 doesn’t support position: fixed.

Here is an alternative way to get the same effect.