Forum Moderators: not2easy

Message Too Old, No Replies

IE doesn't change text color on hover

         

cstricklen

4:30 pm on Oct 2, 2006 (gmt 0)

10+ Year Member



I have a ul consisting of just two links inside a floated and relatively-positioned div. I have a little background-image in both li items.

In IE, hover changes the background-image as it should. It also changed the background color right on cue when I tested that, but it won't change the text color. Works fine in FireFox, etc.

Thanks for any help. I appreciate it.

#subnav {
float: right;
position: relative;
top: 55px;
left: -80px;
}

#subnav ul {
list-style-type: none;
margin: 0;
padding: 0;
position: relative; /*For some reason, this prevents the disappearing background images in IE*/
}

#subnav li {
margin: 0;
padding: 0;
font-size: .9em;
font-weight: bold;
line-height: 140%;
text-transform: uppercase;
}

#subnav a {
background: #fff url(images/arrow_right.gif) 0 3px no-repeat;
padding-left: 8px;
color: #779e83;
}

#subnav a:hover {
background: #fff url(images/arrow_right_70.gif) 0 3px no-repeat;
padding-left: 8px;
color: #53745c;
}

#subnav a:visited {
color: #779e83;
}

===================================

<div id="subnav">
<ul>
<li><a href="about.htm">About us</a></li>
<li><a href="contact.htm">Contact us</a></li>
</ul>
</div>

DrDoc

4:39 pm on Oct 2, 2006 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Anchor styles should be in the following order:

:link, :visited, :hover, :active

Change the order in your stylesheet, and you'll see it'll start working.

cstricklen

1:31 pm on Oct 3, 2006 (gmt 0)

10+ Year Member



Thanks Doc. Page is fine now. I knew that order, but the volume of stuff I have digested in less than a month of CSS is impossible to recall at will. :-)