CODEWITHSUNDEEP
jquerycssinternet-explorer-6positionmodal-dialog
Alex
Alex

Reputation: 8663

IE6 Modal Window Issue

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!

Upvotes: 0

Views: 1396

Answers (2)

Ruslan
Ruslan

Reputation: 10147

According to this:

The problem is that the most popular browser - Internet Explorer for Windows - does not understand it, and instead of reverting to position: absolute; which would be better than nothing, it reverts to position: static; as specified by the CSS standard.

Can you use absolute positioning instead?

Upvotes: 1

Nalum
Nalum

Reputation: 4213

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

Here is an alternative way to get the same effect.

Upvotes: 2

Related Questions