CSS Background Color in IE6 Windows

Problems with changing background color on the a:hover action in IE6

[jrthib]

My problem is on this page for instance. [homepage.mac.com...]

The style sheet i'm using if you would like to view the source is: [homepage.mac.com...]

the classes being used are:

.newscolumns ul { margin: 0; padding: 0; border-top: 1px solid #cdcdcd; }
.newscolumns ul li { text-align:center; list-style:none; line-height: 16px; padding:6px; background-color:#ffffff ; border-bottom: 1px solid #cdcdcd; border-top-color: black; border-left-color: black; border-right-color: black; }
.newscolumns ul li:hover { text-align:center; list-style:none; padding:6px; background-color:#d6d6d6 ; }

when your mouse hovers over any box in the "news sections" box the background color of that box is supposed to turn gray. In safari, firefox for mac, and firefox for windows, this works perfectly but in internet explorer 6 on windows the background color does not change. I need help with fixing this problem because I've seen other websites do this action and it works fine in IE6.

Any ideas?

[penders]

I don't think IE6 supports the :hover pseudo-class on elements other than links. (*I think* IE7 may support this, but only in strict mode - you need a DOCTYPE).

Alternatively you can use the elements onmouseover event to change the background-color using JavaScript. This would work in Firefox and IE etc. But yeah, more hassle!

[jrthib]

Could you give me a link or some sample code for this type of thing? I'm using a bulleted list that is modified by a style sheet to form buttons. I'm not that great with javascript as I am with CSS so anything would help.

[penders]

Hi jrthib,

Yeah, javascript may be a solution, but in thinking about what you are trying to achieve (and since we are in the CSS forum) a better solution may be to style your anchor tags as blocks, make them the same size as your list-items and then use the :hover on your links instead (which will work on IE, Firefox and pretty much everything), such as:

ul#hoverlist li a {
display:block;
width:100%;
height:100%;
}
ul#hoverlist li a:hover {
background-color:lime;
}

This may be more meaningful for your users, since when the background-color changes the user could reasonably assume this is part of the link. With this method it is, but with your current method it is not.

You will then need to style your 2nd line "Updated..." much as you have done, but now it is part of the link, not just the list-item.

Hope that is what you are after.

... and welcome to WebmasterWorld btw!