homepage Welcome to WebmasterWorld Guest from 23.22.128.96
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member

Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderator: open

CSS Forum

    
image flicker with css background rollovers
cuce




msg:1178054
 6:19 pm on Apr 21, 2006 (gmt 0)

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




msg:1178055
 6:26 pm on Apr 21, 2006 (gmt 0)

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




msg:1178056
 6:41 pm on Apr 21, 2006 (gmt 0)

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




msg:1178057
 7:49 pm on Apr 23, 2006 (gmt 0)

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




msg:1178058
 4:08 am on Apr 24, 2006 (gmt 0)

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




msg:1178059
 2:58 pm on Apr 24, 2006 (gmt 0)

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


this seemed to fix it...

cuce




msg:1178060
 8:26 pm on Apr 24, 2006 (gmt 0)

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




msg:1178061
 9:34 pm on Apr 24, 2006 (gmt 0)

Hi there cuce,

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


single image rollover

...might prove illuminating. ;)

birdrain

doodlebee




msg:1178062
 3:21 pm on Apr 25, 2006 (gmt 0)

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




msg:1178063
 3:42 pm on Apr 25, 2006 (gmt 0)

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




msg:1178064
 4:03 pm on Apr 25, 2006 (gmt 0)

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




msg:1178065
 4:21 pm on Apr 25, 2006 (gmt 0)

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




msg:1178066
 5:08 pm on Apr 25, 2006 (gmt 0)

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.

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved