image flicker with css background rollovers

[cuce]

how do I fix this problem? Sometimes when I use css to change the bg of an element on hover such as a list item or wahtever, it flickers and acts funny in IE. No problem in FF though.

Any suggestions?

code example:
#secondary li a{background:url(../images/navbullet.gif) right no-repeat;padding-right:25px;color:#ccc;}
#secondary li a:hover{background:url(../images/navbullet-over.gif) right no-repeat;border:none;color:#fff;}

[4hero]

Hello,

The hover image has not been preloaded, so will flicker on hover.

The good way around this is to make your navbullet and navbullet-over one image then apply the following css:

#secondary li a{background:url(../images/navbullet.gif) top right no-repeat; padding-right:25px; color:#ccc;}
#secondary li a:hover{background:url(../images/navbullet-over.gif) bottom right no-repeat; border:none; color:#fff;}

Your normal list item will position the image at the top right, with the hover being at the bottom right. It can be a wee bit tricky to get the original and hover images positioned perfectly, but moving the hover image above/below 1px at a time in your graphics package should sort it out :)

[cuce]

well that might seem to be the issue, but aparently there is more. Once the image is loaded it still does this everytime. I tried preloading the image. Still flickers.

[jetboy]

If you have graphical backgrounds on links, you're going to get this problem to *some* degree, even if you're not doing rollovers.

At best, you'll see the mouse pointer briefly turn into an hourglass when you mouse over the link. At worst the background will momentarily disappear.

It's made worse by changing the 'check for new versions of stored pages' setting in IE to 'Every visit to the page' ... just the sort of thing a web developer does.

The only complete fix is to play with the server's cache control headers for your images. If you Google for 'Dean Edwards IE flicker' you can see an Apache fix, and there's a link on the article to a fix for IIS.

I daresay that you could put something together using PHP or similar to deliver the appropriate cache control headers if you didn't have access to your server config.

[Krapulator]

You need to preload the image and also configure the server to send an expires header that sets the expiry to some point in the future (I use 7 days myself).

This way, when the preload script loads the image, the http headers that are sent with the image will tell the browser to use the cached version for whatever expiry time you have specified.

[cuce]

<meta http-equiv="Page-Enter" content="blendTrans(Duration=0.1)">

this seemed to fix it...

[cuce]

another note...

When I change my options in ie off of check for new stored page every time(only developers use this setting usually) that also fixes it, but for my purposes it cant flicker for anyone.

thanks!

[birdbrain]

Hi there cuce,

if you want flicker free rollover, I suggest that a google search for...

single image rollover

...might prove illuminating. ;)

birdrain

[doodlebee]

The reason IE does this is because IE will load a background up every time it's viewed. I don't know why it does this - but a lot of times you'll see websites in IE where, as you surf through the site, the entire background will flicker. That's because IE doesn't cache backgrounds, and loads them up immediately as they're called. So for small things, like CSS rollovers, you'll *really* nitce the flickering background.

There *is* a CSS-based - javascript preloader free - way around this.

I have a tutorial on my website on how to do CSS image swaps with no flicker in IE. But I can't post the link, so I'll just copy it here :)

HTML

<div class="nav">
<a href="#"><img src="image.gif" width="150" height="100" alt="" /></a>
</div>

CSS

div.nav {
height: 187px;
width: 136px;
margin:0;
padding:0;
background-image:url("logo-red.gif");
}

div.nav a, div.nav a:link, div.nav a:visited {
display:block;
}

div.nav img {
width:100%;
height100%;
border:0;
}

div.nav a:hover img {
visibility:hidden;
}

conditional comment for IE to fix flicker

<!--[if lte IE 6]>
<style type=text/css">
div.nav {background-repeat:no-repeat;}
div.nav a:hover {visibility:visible;}
</style>
<![endif]-->

You also MUST be sure the "background-position" for IE is NOT set, otherwise, you'll get the flicker again.

Hope you can play with that and get yourself fixed :)

[birdbrain]

Hi there doodlebee,

quote:-

The reason IE does this is because IE will load a background up every time it's viewed.

That is why the single image rollover provides the perfect solution to this problem. ;)

birdbrain

[jetboy]

birdbrain,

In my experience, using a single image for rollovers makes things a lot better, but it doesn't get rid of the problem completely.

I haven't seen anything like doodlebee's fix before, but the fact it's so obscure makes me think it'll probably work perfectly. IE seems to work like that.

[birdbrain]

Hi there jetboy,

the OP wrote

quote:-

...it flickers and acts funny...

I have never seen either of those effects in IE, using the single image rollover.

So what are these other problems, to which you refer?

birdbrain

[jetboy]

At best, you'll see the mouse pointer briefly turn into an hourglass when you mouse over the link. At worst the background will momentarily disappear.

It's made worse by changing the 'check for new versions of stored pages' setting in IE to 'Every visit to the page' ... just the sort of thing a web developer does.

An hourglass when 'Every visit to the page' is checked.