Topic: IE6 hover & background image problem
I have a menu that uses a background image. IE6 does not display the link with the correct image. It only displays it with the visited image. Also, in IE6, it doesn't change the background image when hovered. What am I doing wrong?
I've been working on this all day and still can't make sense of it.
Thank you for taking the time to look into this for me!
<div id="column-left">
<div><?php include('incl/top-left-nav-menu.php'); ?></div>
<div>
<ul id="nav">
<li><a href="#">wvgs home</a></li>
<li><a href="#">wvgs staff</a></li>
<li><a href="#">wvgs office</a></li>
<li><a href="#">about wvgs</a></li>
<li><a href="#">contact home</a></li>
</ul>
</div>
<div style="text-align: center; padding-top: 10px;">
<img src="images/community_connections.gif" alt="Community Connections" width="149" height="147" />
</div>
</div>#column-left {
float:left;
display: inline;
width:229px;
margin-right: -3px;
}
#nav, #nav ul {
font: 14px "Lucida Grande", Tahoma, sans-serif;
margin: 0px 0px 10px 0px;
padding: 0px;
width: 229px;
list-style: none;
}
/*\*/ * html #nav ul {
position: relative;
}/**/
#nav li {
position: relative;
display: block;
margin: 0px;
padding: 10px 0px;
background:url(../images/buttons/liborder.gif) center left no-repeat;
}
#nav li a {
color: #548AA7;
text-transform: uppercase;
text-decoration: none;
letter-spacing: 2px;
padding: 3px 0px 5px 54px;
}
#nav li a:hover {
background: url(../images/buttons/liborder2.gif) center left no-repeat;
color: #548AA7;
}
#nav li a:visited {
background:url(../images/buttons/liborder3.gif) center left no-repeat;
}
body.home #nav #nav_home, body.home #nav #nav_home a, body.staff #nav #nav_staff, body.staff #nav #nav_staff a, body.office #nav #nav_office, body.office #nav #nav_office a, body.about #nav #nav_about, body.about #nav #nav_about a, body.contact #nav #nav_contact, body.contact #nav #nav_contact a {
background: #e3e3e3;
color: #000;
}Last edited by toad78 (January 7, 2009 6:48 pm)
