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?

Answer 1

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.