CSS Rollovers

[Kitty]

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="#">» Link goes here</a>
<a href="#">» Link goes here</a>
<a href="#">» Link goes here</a>
<a href="#">» 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!

[bobleny]

The background will disappear in any browser. If you use javascript to preload the image, you shouldn't have this problem... If done right, even if the javascript isn't supported, the worst that will happen is the background will disappear for a second.

 

You may want to take a look at this:

http://www.firemelt.net/scripts/css_rollover/

The CSS is inline so you can see it when you view the html. This works in IE.

 

You may be able to use the CSS above as a base to build yours.

 

I hope this helps, if not please ask.

 

I don't like javascript rollovers either...

[ToonMariner]

Have a look at using the background position property. You will have ONE image which as the image AND the 'roll-over' in one (so twice the height and one image above the other) that way teh image is already loaded and you simply set the heigh of the container element to half the total image height. on hover shift the image up....

[mainewoods]

I read in the past that ie will not cache graphics with relative urls.  I did a bunch of tests and it seems to be true.  It shows up more noticably on css graphics mouseovers.

 

background-image: url(images/hover.jpg);