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: