CSS double rollover fx - problem with IE6 - CSS forum at WebmasterWorld

Dear friends,
I'm developing a website that requires an image bar along with a series of text labels below each image of the bar. The images are either jpeg or gifs, while the labels are simple CSS text. The main task is that every image+relative label couple should activate at the cursor's passage with a classic rollover effect. I don't like the widespread javascript rollover effect, and I opted for a CSS-only control of the double rollover fx.

To make things more complicated, each image does have a curved border, so the whole series of images do overlap a bit over each other.

I have succeeded in making the whole thing work, but for some obscure reason, IE6 does have rendering problems. Namely, with IE6 some of the "activated" images are shown behind the main ones, and some of the main images of the bar are partly missing. And the CSS text labels below does not change color when hovered.

I have tried to change the z-index for each <li> element of the bar, but it doesn't work. I have also tried to change the width and left margin of the activated images, with zero success.

As this problem does not show in IE 7, IE8, Firefox 3 and Safari, it looks it is something related with the IE6 weird rendering.

Does anybody knows how can I solve this rendering problem under IE6?

Any help would be greatly appreciated!

Bryn

Below is the code of the bar:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<style type="text/css">
<!--
body {
background-color:#70a8d3;
}
#barra {
position:relative;
top: 50px;
width:772px;
margin:0;
}
#barra ul {
position:relative;
margin:0;
padding:0;
height:45px;
}
#barra li {
float:left;
display:block;
height:45px;
margin:0;
padding:0;
list-style-type:none;
background-repeat:no-repeat;
}
#barra li a {
display:block;
 height:45px;
 border-width:0;
 text-decoration:none;
background-repeat:no-repeat;
}
#barra li#disaster a {
 width: 110px;
background-image:url("imgs/disaster_off.jpg"); 
}
#barra li#oil a {
 width: 126px;
 margin-left:-18px;
background-image:url("imgs/oil_off.gif"); 
}
#barra li#amr a {
 width: 121px;
 margin-left:-9px;
background-image:url("imgs/amr_off.gif");
}
#barra li#energy a {
width: 120px;
margin-left: -4px; 
background-image:url("imgs/energy_off.jpg");
}
#barra li#condition a {
background-image:url("imgs/condition_off.jpg");
width: 122px;
margin-left: -4px; 
}
#barra li#mining a {
background-image:url("imgs/mining_off.gif");
width: 128px;
margin-left: -11px; 
}
#barra li#engineering a {
background-image:url("imgs/engineering_off.gif");
width: 110px;
margin-left: -19px; 
}
#barra li#disaster a:hover, #barra li#disaster {
 background-image:url("imgs/disaster_on.jpg"); 
 }
#barra li#oil a:hover, #barra li#oil {
background-image:url("imgs/oil_on.gif");
}
#barra li#amr a:hover, #barra li#amr {
 background-image:url("imgs/amr_on.gif");
 }
#barra li#energy a:hover, #barra li#energy {
background-image:url("imgs/energy_on.jpg");
}
#barra li#condition a:hover, #barra li#condition {
background-image:url("imgs/condition_on.jpg");
}
#barra li#mining a:hover, #barra li#mining {
background-image:url("imgs/mining_on.gif");
}
#barra li#engineering a:hover, #barra li#engineering {
background-image:url("imgs/engineering_on.gif");
}
#barra li a em {
 position:absolute;
 top:48px;
 left:0;
 display:block;
 line-height:1em;
 font-style:normal;
 color: #000000;
 font-family: Arial, Helvetica;
font-size: 12px;
font-weight: bold;
text-decoration: none;
text-align: center;
 }
#barra li a:hover em {
 color: #FFFFFF;
 cursor:pointer;
 }
#barra li#disaster a em {
margin-top:26px; 
margin-left:44px;
}
#barra li#oil a em {
margin-top:47px; 
margin-left:165px;
}
#barra li#amr a em {
margin-top:14px; 
margin-left:248px;
}
#barra li#energy a em {
margin-top:47px; 
margin-left:327px;
}
#barra li#condition a em {
margin-top:26px; 
margin-left:422px;
}
#barra li#mining a em {
margin-top:47px; 
margin-left:519px;
}
#barra li#engineering a em {
margin-top:14px; 
margin-left:638px;
}
-->
</style>
</head><body>
 <div id="barra">
 <ul>
 <li id="disaster"><a href="#"><em>Disaster Recovery</em></a></li>
 <li id="oil"><a href="#"><em>Oil &amp; Gas</em></a></li>
 <li id="amr"><a href="#"><em>Automatic<br />Meter Reading</em></a></li>
 <li id="energy"><a href="#"><em>Energy Management</em></a></li>
 <li id="condition"><a href="#"><em>Condition Monitoring</em></a></li>
 <li id="mining"><a href="#"><em>Mining &amp; Exploration</em></a></li>
 <li id="engineering"><a href="#"><em>Engineering<br />Construction</em></a></li>
 </ul>
 </div>
</body>
</html>

CSS double rollover fx - problem with IE6

Stenness

phillw

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week