• Skip To Content
• News
• Site Map

CSS Rollover Flicker In Internet Explorer

Tuesday, February 21, 2006 by Nicholas Gagne

The image rollover in the examples below will work fine in most circumstances. However, in Internet Explorer with the option "Check for newer versions of stored pages" set to "Every visit to the page" there will be a brief flicker as the image reloads. This option is typically only set by developers to avoid viewing a cached version of the page.

This option can be set by going into Internet Options, click on "Settings" under Temporary Internet Files and select the "Every visit to the page" radio button. This setting basically tells Internet Explorer not to cache anything. Which, in turn, causes the rollover images to be reloaded every time you hover over and out. Even when using A List Apart's "CSS Sprites" technique, it will still reload the image causing a flicker.

Now, we could easily fix this problem using javascript and preloading images, but let's use CSS and achieve the same result with less code, and retain a clear conscience.

Here is a sample CSS rollover layout. You can see the flicker if using Internet Explorer for Windows. We are using an anchor tag inside an li element (id="rollover") for the rollover method.

<ul>
    <li id="rollover">
        <a href="#"></a>
    </li>
</ul>

We will use CSS to shift the background image when hovering over the anchor tag. I will also add a bright green background to the parent element just to make the flicker even more obvious.

#rollover a{
	height:158px;
	width:258px;
	display:block;
	background:url(/images/folio1.jpg) no-repeat
}
#rollover a:hover{
	background-position:bottom
}
#rollover{
	height:258px;
	width:258px;
	margin:0 40px 20px;
	background:#0f0
}

This flicker is caused by the delay when the primary image is removed and the rollover image is loaded (even though they are technically the same image, Internet Explorer prefers to treat them separately). To prevent this flicker, you should set the primary image as the background of the element containing the anchor tag, such as an li element. This will give the rollover images something to fall back on. During the rollover reloading phase, the background image of the parent element will be shown creating a seamless transition. Remember to set the background-position on the hover state and not just background. Using the shorthand will cause the image to be reloaded, bringing us back to square-one.

#rollover{
	height:158px;
	width:258px;
	margin:0 40px 20px;
	background:#0f0 url(/images/folio1.jpg) no-repeat
}

That is all there is to it! You can now view the fixed CSS rollover layout example to see the final result. Now those pesky Microsoft-centric developers have nothing to say about CSS rollovers.

• Digg this article
• Add to Del.icio.us
• Read more articles
• Subscribe to RSS Articles Feed