background hover doesn't work well in IE

padding, background-color, hover, css

[Kostranostra]

Hi all,

I'm having some padding problems with a vertical menu. The items in it have rollovers (background-color hovers). Unfortunately IE doesn't show the rollovers as I want them to be... the padding-spaces (set 3px) at the top and bottom of the menu-items keep their initial bg-color when hovered. In FF it wordks fine though.

I've used the following CSS:

ul#mainlevel {
margin: 0;
padding: 0;
white-space: nowrap;
}

#mainlevel li {
display: inline;
list-style-type: none;
}

#mainlevel a:link, #mainlevel a:visited {
padding: 3px 5px;
font: bold 9px verdana;
text-transform: uppercase;
color: #fff;
background-color: #4d3100;
text-decoration: none;
}

#mainlevel a:hover {
color: #fff;
background-color: #2c2c2c;
text-decoration: none;
}

Anyone got a clue about how to fix this?

[dillonstars]

I just tried to replicate your problem, but I have upgraded to IE7 and it works fine in that. ... doh!

[Kostranostra]

That's good news!

But actually i think it could take a while before every IE user has upgraded to 7. I myself f.i. can't install because I don't have a legal version of Windows XP on my comp (naughty, I know). So it'd be great if I could get a CSS workaround so that it works for IE 6 for the time being...