I have a CSS rollover menu and it works great in Firefox, but not in IE. When I hover over the buttons they look ugly and the background disappers for a few seconds. I tried fixing it by adding

* html .nav a:hover {
visibility: visible;}

but that only fixed the font.

Here's my CSS:

.nav a {
display: block;
width: 188px;
background: inherit;
background-image: url(images/link.jpg);
padding: 11px 0px 11px 0px;
text-indent: 17px;
text-decoration: none;
text-transform: capitalize;
font: bold 9pt Verdana, arial;
color: #CCCCCC;}

.nav a:hover {
background: inherit;
background-image: url(images/hover.jpg);
color: #FFFFFF;}

* html .nav a:hover {
visibility: visible;}

And HTML:

<div class="nav">

<a href="#">&raquo; Link goes here</a>
<a href="#">&raquo; Link goes here</a>
<a href="#">&raquo; Link goes here</a>
<a href="#">&raquo; Link goes here</a>

</div>

I can't use javascript, cos it requires to put my buttons directly on the page, but I have them all as backgrounds...

So, is there anything I can do to fix this, or is IE hopeless?

Hope someone can help!

I've often come across similar problems when working with these two browsers, and occasionally the only thing left to do is slightly change it for one of the browsers.

Your post didn't say whether you use seperate stylesheets for each browser? If not then it is a must. It is a small piece of JavaScript that anyone will be able to tell you.

However if you do already use seperate stylesheets, then I can only suggest slightly changing the IE stylesheet. The two browsers simply don't display everything the same.

Hope tht helped

PS - If you need that JavaScript then just ask

I viewed this in both Firefox and IE (7), and it works and looks the same in both..

Maybe you have some other styles that messes it up or something like that..?

No, IE is not hopeless, and it does do background rollover buttons quite nicely, w/o a ton of hassle either.

The *html is not necessary at all, and clearly doesn't work.
You should put your menu items in as an unordered list.
If you're going to use pseudo classes, then they MUST be put in in a specific order:
a:link
a:hover
a:visited
a:active

think LoVeHAte

The background: inherit isn't necessary.

It would also be easier to see ALL of your CSS and HTML to determine what else may be interfering, if anything.

Maybe that will be helpful: http://wellstyled.com/css-nopreload-rollovers.html