I’ve encountered a perplexing problem with CSS z-index in IE7 that I just can’t seem to solve.
#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>
Upon loading the page, there is an overlay referred to as r_box.
<div id="r_box">
<div id="message_panel">
...Content inside...
</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;
}
The issue arises exclusively in IE7 where, upon page load, the screen div consistently stays on top of r_box. Other browsers like IE8, IE9, Firefox, Safari and Chrome do not exhibit this behavior.
Could this discrepancy be attributed to the structure of the screen or r_box DIVs, or might it be due to something else entirely?