CSS rollover delay

IE delays the rollover effect

[BlobFisk]

Hi All,

I've encountered a strange problem. I am using a CSS rollover technique whereby I use one background image which is both the default and hover image. I then use CSS to move the background postion from the top to the bottom to achieve the rollover effect:

#home a {
background: url(images/level1nav/home_both.gif) no-repeat top left;
width: 60px;
height:55px;
float: left;
clear: none;
margin: 0 5px;
}

#home a:hover {
background: url(images/level1nav/home_both.gif) no-repeat bottom left;
}

The HTML is:

<!-- HOME --><span id="home"><a href="home.html"></a></span>

However, on IE there is always a delay where the link state disappears and the hover state kicks in (it flashes between link and hover state). It seems like IE is going to the server for the (same!) image on hover. I say this because running from my local machine this does not happen.

Anyone know if there is a way around this?

[SuzyUK]

Hi Blobfisk.. you seeing this in XP by chance?

[webmasterworld.com...] - dicusses the problem

[webmasterworld.com...] - goes into more about the default setting bit!

Suzy

[BlobFisk]

Yes I am Suzy and I should have done more homework first.... shame on me!

Thanks a million for the links!

I found a solution posted here:

[pixy.cz...]

[BlobFisk]

For those interested in the solution I used (which required no change to the HTML) was:

#home {
background: url(images/level1nav/home_both.gif) no-repeat bottom left;
width: 120px;
height:55px;
float: left;
clear: none;
margin: 0 5px;
}

#home a {
background: url(images/level1nav/home_both.gif) no-repeat top left;
display: block;
margin: 0;
padding:0;
width:100%;
height:100%;
}

#home a:hover {
background-image: none;
}

This puts the hover image as the background of the containing block, the <a> then has a background image (the mouseout state) which sits on top of this. The hover effect just turns off the background image on the anchor. You still get a slight delay, but this time it is on the mouseout event which is more palatable than on the mouseover event.

[isitreal]

check this on a slower older pc running IE, the results may not be pleasant.

[BlobFisk]

Hey isitreal,

No access to one of those at the moment! Would you be able to explain what sort of effect you are seeing?

[isitreal]

I wasnt' sure if this has the same problems as the background position changing technique, I just checked, the lag is pretty noticeable on a slower pc but doesn't seem to cause the extreme display failures that the position changing technique suffers from, which makes it absolutely unuseable commercially.

To properly test this version, I used a 200 mghz machine, with dialup connection, the change time seems to be a little over 1 second, if you run the mouse over the sample nav bar on the site you mention it looks weird, since the background images take so long to change, all of them stay on then slowly switch off, at 1 second per image.

I'd never use something like this commercially, but it does work. I haven't had much luck with background image swapping like this, why not have a fixed background image that contains the colors/shapes/curves around the background color field, with a transparent space where the background color is, then use background color change on hover to get the same result with no lag. I haven't tested that, but it seems like it should work.