Rollover image problems in IE

[internetheaven]

I am using:

a.rollover{ display:block;width:150px;height:30px;background-image:url('/images/lightbluebutton.gif'); background-repeat:no-repeat; line-height: 25px; text-decoration:none; }
a.rollover:hover { display:block;width:150px;height:30px;background-image:url('/images/whitebutton.gif'); background-repeat:no-repeat; line-height: 25px; text-decoration:underline; }

which works fine, but every time you rollover the image in IE the mouse pointer changes from the hand to the "loading" image. Why is that? Why does it have to re-download the image at every pass over?

Thanks
Mike

[SuzyUK]

It's an IE fault, do search for [IE image flicker hover], there are numerous suggested fixes to make it less noticeable because some of the causes are USER preferences, which you can't control via CSS!

there are javascript commands, and you can apply some via CSS e.g.:

html {
 filter: expression(document.execCommand("BackgroundImageCache", false, true));
}

also another method is to use one background image - join your two images together and only change the background position on hover, that way technically there is no "reload" this is not a magic fix but if you place the default state as background to containing element say the <li> then any flicker is imperceptible

many other ways are suggested but you have to remember that even if you fix it on your system using preferences then others may still see it so I would suggest a fix that degrades the nicest, my preference being the 'one image' method as it doesn't rely on javascript..

There's also a lot of technical discussions out there on this, but it's Saturday ;) maybe someone else can fill in the blanks..

Suzy