Design broken in IE7

[Sillysoft]

Have an issue where the header image looks correct in all other browsers in testing except when I go into compatibility mode in IE8, which I believe in that mode its showing in IE7? Well when I do that the header layout breaks. I think its a z-index issue but cant figure it out:

Here is the html code:

<div id="content">
  <div id="content_header"></div>
  <div id="main_header" style="background:url('images/mainheader.jpg') no-repeat top center;">
    <div class="header_fade"></div>
  </div>
</div>

Here is the CSS:

body {
text-align:center;
background:#1d3f57 url('../images/site_bg.png') repeat-x top left;
}

#content {
margin:0px auto;
padding:0px 0px 0px 0px;
position:relative;
width:960px;
min-height:600px;
overflow:hidden;
text-align:left;
background:url('../images/site_header.png') no-repeat top left;
}

#content_header {
text-align:left;
margin:0px 25px 0px 25px;
height:83px;
overflow:hidden;
}

* html #content_header {
height:83px;
overflow:visible;
}

#main_header {
border-left:2px #fff solid;
border-right:2px #fff solid;
height:342px;
width:956px;
position:relative;
z-index:-1;
}

#main_header .header_fade {
position:absolute;
left:0px;
bottom:0px;
background:url('../images/header_fade.png') no-repeat bottom left;
width:960px;
height:49px;
}

Here are 2 screen shots, the first one shows it broken in compatibility mode, the second one shows it correctly:




How it should look:

[Sillysoft]

Update: I took position:relative out of the #content css property and now it seems to work in compatibility mode. But I want to make sure this is the correct way of doing this. Please let me know if this is a proper way of doing this or if there is a better way of doing this. Thanks!

[Paul O'B]

Hi,

Without seeing the real page and images it's hard to say what's the best approach.

By removing the position:relative from #content you will allow the negative z-index on #main_header to go behind #content instead of in front. If that's the effect that you wanted then yes that is one way to do it

In IE6 and 7 an element with position:relative added automatically gets a z-index of zero and becomes atomic. No children can go under the background of a positioned parent unless that positioned parent is z-index:auto (the default for positioned elements). Unfortunately IE6 and 7 don't understand auto and instead apply a z-index of zero thus forever trapping their children inside that container.

Hope that explains it and is relevant to your question