CSS Rollovers Flicker or Vanish

[jerxs]

I have run into this problem before, but it never presented a major issue, but I am working on a new template that the issue does create a pretty big problem.

Ive read up on it a bit, but have not found any real solution, just allot of people bitching about a bug. The only solution Ive found was to change the internet settings in IE's browser to not look for an updated version of the image on every hover state, which really does me no good.

Does anyone know of a solid fix for this, that will work with the listed nav's I have in place?

If you browse to the bottom of this page using Explorer and roll over a few of the links in the footer you will see what I mean.

WordPress Themes

Thak you Jer

 

[shaggz]

I couldn't replicate the behavior on IE6. On IE6, it just throws a javascript error and the rollovers seem to not even display. On IE, do they try to remotely reload every time you rollover them, or just the 1st time? I noticed firefox will attempt to remotely load them the first time you rollover, but subsequent rollovers don't make the server request.

 

[Stanley]

it flickers in firefox too, if only for a split second
you need to cache the files to avoid having this problem
for instance, load them in an invisible div when the page is loading

 

[jerxs]

I couldn't replicate the behavior on IE6. On IE6, it just throws a javascript error and the rollovers seem to not even display. On IE, do they try to remotely reload every time you rollover them, or just the 1st time? I noticed firefox will attempt to remotely load them the first time you rollover, but subsequent rollovers don't make the server request.

Yes Explorer as well as Firefox both try to remotely reload them on each rollover, but for some reason FireFox is really quick about it, its almost un noticable in FireFox. Explorer lags big...... time......

it flickers in firefox too, if only for a split second
you need to cache the files to avoid having this problem
for instance, load them in an invisible div when the page is loading

Im messing around a bit and set up a div...

<div id="preload-footer">
<img src="wp-content/themes/nofuckingclue/images/home-roll.gif" />
<img src="wp-content/themes/nofuckingclue/images/sitemap-roll.gif" />
<img src="wp-content/themes/nofuckingclue/images/aboutme-roll.gif" />
<img src="wp-content/themes/nofuckingclue/images/mail-roll.gif" />
<img src="wp-content/themes/nofuckingclue/images/rss-roll.gif" />
</div>

#preload-footer {
display:none;
}

and it seems to work great in firefox, but Expolorer now flickers on roll off, ha ha ha....... Im going to have to piss with it later, I think I might try setting the "a" bg image as a bg for <li> then just set the roll image normally and align it so it covers the li BG when rolled....

Ty Jer