Zindex in IE7 Bug

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&#8221; /></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.

Advertisements
This entry was posted in Uncategorized. Bookmark the permalink.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s