Zindex in IE7 Bug
Posted on April 1, 2008
Filed Under Design |
Now I know I promised to do some more design tutorials but, I have been coding my current clients’ website.
During that time, I ran into a problem. It’s not a big problem, well at least it doesn’t seem like it now. I thought I would share. The problem was having two divs, one coming after the other in the code and needing one to overlay the other. Basically like being on two different layers. Now here is example page.
http://www.beseenwebdesign.com/clients/music_festival/test.html
Example HTML code is:
<body>
<div id=”outer”>
<div id=”logo”>
<a href=”http://www.rmfs.org”><img src=”../images/RMFS_logo.png” alt=”Richmond Music Festival Society” width=”166″ height=”166″ border=”0″ longdesc=”http://www.rmfs.org” /></a>
</div></div><div id=”main_table”>
Example compliant CSS code:
#main_table{
width:858px;
position:relative;
height:100%;
margin-left:auto;
margin-right:auto;
left:0px;
top:-150px;
padding-bottom:0px;
}
#logo{
float:left;
position:relative;
top:0px;
left:0px;
z-index:500;
}
#outer{
width:858px;
position:relative;
height:100%;
margin-left:auto;
margin-right:auto;
left:-20px;
top:0px;
padding-top:10px;
padding-bottom:0px;
}
IE specific CSS
#logo{
float:left;
position:relative;
top:0px;
left:0px;
z-index:500;
}
#outer{
width:858px;
position:relative;
height:100%;
margin-left:auto;
margin-right:auto;
left:-20px;
top:0px;
padding-top:10px;
padding-bottom:0px;
}
#main_table{
width:858px;
position:relative;
height:100%;
margin-left:auto;
margin-right:auto;
left:0px;
top:-150px;
padding-bottom:0px;
z-index:-1;
}
Now on the test page of course before I fixed it, the logo was displaying under the main_table.
You can see the difference between the two style sheets is the negative z-index value in the IE specific style sheet. What do you need to know to fix this little problem. The lower layer on your page in IE needs a negative value.
For example if logo is valued at z-index:500 and main_table is valued at z-index:10o, in IE it will show which ever object comes later in the DOM structure. Now in Firefox the higher value is shown above no matter what comes first. To make the fix in IE you must give main_table a negative value like z-index:-500.
Comments
Leave a Reply