View Full Version : a hover weirdness at IE

10-06-2004, 07:17 AM
I have this list menu, made with the help of this tutorial at "listamatic (http://css.maxdesign.com.au/listamatic/vertical14.htm), the thing is that when you hover over the links at IE there is a delay in which the image in this case in grey turns blank (it doesn't actually appears) for like 1 second and then it's "visible" again, like it's supposed to be.

Any one has an idea on how to avoid this? 'cause it looks really "unprofessional" like that. :confused:

10-06-2004, 09:05 AM
If people can't see how you implemented it or experience the effect on your exact page in their browser, it remains a wild guess what the cause is.

So, please show us the code (both CSS and HTML), but preferably, put it online somewhere and post a link.

10-06-2004, 09:36 AM
I did posted a link, the tutorial site has the exact same problem, but anyway, here's the code:

<div id="navcontainer">
<ul id="navlist">
<li id="active"><a href="#" id="current">Item one</a></li>
<li><a href="#">Item two</a></li>
<li><a href="#">Item three</a></li>
<li><a href="#">Item four</a></li>
<li><a href="#">Item five</a></li>

(on the css file)
#navcontainer ul
list-style-type: none;
text-align: left;

#navcontainer ul li a
background: transparent url(images/list-off.gif) left center no-repeat;
padding-left: 15px;
text-align: left;
font: normal 11px "Lucida Grande", "Lucida Sans Unicode", verdana, lucida, sans-serif;
text-decoration: none;
color: #999;

#navcontainer ul li a:hover
background: transparent url(images/list-on.gif) left center no-repeat;
color: black;

#navcontainer ul li a#current
background: transparent url(images/list-active.gif) left center no-repeat;
color: #666;

and the example its right here (http://css.maxdesign.com.au/listamatic/vertical14.htm), no matter if that's the only thing on the page (with the doctype and the basic html layout of course), it always has the same error on IE

10-06-2004, 02:22 PM
... or so it seems; I've done some Googling on "hover delay" and this resulted among others in a link to a thread discussing the problem: the lagging seems specific to IE that doesn't load the hover state image until the link in question is actually hovered over.
It should only occur really on the first hover; after the image is loaded in cache, the lag should be gone, or noticably less.

A workaround would be to load the hover state image as background underneath the link (in case of a list: as background image to list item), load the normal state background on the link - hiding the hover state background, and remove it on hover, revealing the hover state image on the list item again.
In this way, both images are loaded in cache straight away and even in case of lag occuring, there's always an image to look at.

10-07-2004, 04:42 AM
ok, thanks I'll work on that, or I could also use a script to load certain images when the page opens, but your solutions seems easier and faster :D