Thread: IE Flicker on CSS Background

anyone know a possible fix for css background flicker on links with hover.

HTML

Code:

<a class="package low" alt="Low Package"href="#">Low</a>

CSS

Code:

a.package {text-indent: -9999px; color: #FFF; }
a:hover.package {color: #039;}

a.low {background: url(../images/packages_01.jpg) no-repeat #FFF top; height: 350px; width: 218px; display: block; float: left;}
a:hover.low {background: url(../images/packages_over_01.jpg);}

after some reading it seemed the issue was due to caching..

So after lots of tinkering with supposedly "fixes" using java script, but none worked.

as it was cached, and not loaded on the page until the mouseover effect, I thought the best fix be to include the images and set the visibilty to hidden directly within the html.

Code:

<img src="http://webprocafe.com/images/packages_01.jpg" alt="" width="218" height="350" style="visibility:hidden;" />
<img src="http://webprocafe.com/images/packages_over_01.jpg" alt="" width="218" height="350" style="visibility:hidden;" />

Seems to have done the trick.. but not the best way..

nah, best way is to use css sliding doors technique.

Have both on & off states within the same image and use css to just show the off state, then on the hover psudeo class move it down/across 350px/218px

you can also use the spry method, in which you have all your images in the same super image and just use css to pick up the correct ones.

sorry if that doesn't make sense, knackered from football.

the css sprites method....

I may give it a go, stupid IE.. ruins everything.

Its amazing to think all I wanted was a mouse over effect on an image, and IE cant even make that work correctly.

sorry, i get confused in my old age, but you know what I mean ;o)