IE7 CSS z-index issue not apparent on any other browser

Question

I have an issue with CSS z-index on IE7 that I cannot seem to get to the bottom of.

#screen {
    display: none;
    background-image: url('/images/bg.png');
    background-repeat: repeat;
    position: fixed;
    top: 0px;
    left: 0px;
    min-width: 100%;
    min-height: 100%;
    z-index: 10000;
}

<div id="screen"></div>

I have an overlay that appears on page load called r_box

<div id="r_box">
    <div id="message_panel">
        ...Content in here...
    </div>
</div>

#r_box
{
    width: 335px;
    height: 337px;
    background: url("/images/panel.png") no-repeat scroll 0 0 transparent;
    position: fixed;
    margin-left: -150px;
    margin-top: -130px;
    left: 50%;
    top: 50%;
    z-index: 10001;
    display: none;
}

#r_box #message_panel {     
    color: #fff;
    z-index: 10001;
    bottom: 95px;
}

However, the problem I am having on IE7 only is that on page load the screen div is always on top of r_box. I have tested this on IE8, IE9, FF, Safari and Chrome and it works on all these browsers. The only one where it is an issue is Internet Explorer 7.

Is this likely to be an issue with the screen or r_box DIVs or could this be something else?

Same issue was posted here with answer. [IE7 Z-Index Layering Issues][1] [1]: http://stackoverflow.com/questions/1287439/ie7-z-index-layering-issues — CrazyVipa, Jul 13 '12 at 16:32
@CrazyVipa Well, the post that you have provided there suggests that the issue is relating to relative positioning. I can't see where this relates to my problem. — crmpicco, Jul 23 '12 at 08:12
@LuisSánchez The CSS is part of a large stylesheet. It's difficult to drop into jsFiddle. — crmpicco, Jul 23 '12 at 12:04

score 0 · Accepted Answer · answered Aug 29 '12 at 10:19

This boiled down to a stacking context issue that was only apparent, as many have found, with Internet Explorer 7.

I decided to remove the problematic behaviour for IE7 only, as i'm a believer that an application does not need to look the same in every browser.

IE7 CSS z-index issue not apparent on any other browser

1 Answers1