How to use CSS for Flickerless Image Replacement

Introduction

One of the main uses for CSS is the styling of unordered lists used to hold menu links. In this article I explain how to remove the unordered list items and replace them with images and, using two images per link, have a hover state that is flicker free.

What Flicker?

This is a problem that occurs in Internet Explorer when the Temporary Internet Files > Settings > Check for newer versions of stored pages is set as ‘Every visit to page.’

I have been informed that there is a high percentage of people who browse with this option in place.

When this option is chosen, Internet Explorer does not cache background images and has to download them each time they are needed. This creates a short delay in the image display (dependent upon their file size) and accounts for the flicker when you hover over each link.

As I’ve said, this only happens with Internet Explorer, but since this is the most commonly used browser we should attend to this issue and find ways to stop this annoying flicker.

To see an example of the problem, open Internet Explorer and as a temporary measure, select Tools > Internet Options > General > Temporary Internet Files > Settings and click ‘Every visit to the page’ (make a note of your original setting before you make this change). Then click the following link to for a demonstration. Don’t forget to switch back to your original Internet Explorer setting afterwards.

Flickering Example

If you are using any other browser than Internet Explorer then the ‘flicker’ issue doesn’t apply..

Method

The following method not only replaces your standard unordered list with images but also gets rid of the flicker.

The Unordered List

Because I love art and the ‘Old Masters,’ I have chosen five names of painters and have a standard list with the (X)HTML as follows:

<div id=”menu”>

<ul>

<li class=”list1″><a id=”item1″ href=”#” title=”Thomas Gainsborough”>Thomas Gainsborough</a></li>

<li class=”list2″><a id=”item2″ href=”#” title=”Henri Matisse”>Henri Matisse</a></li>

<li class=”list3″><a id=”item3″ href=”#” title=”Claude Monet”>Claude Monet</a></li>

<li class=”list4″><a id=”item4″ href=”#” title=”Auguste Renoir”>Auguste Renoir</a></li>

<li class=”list5″><a id=”item5″ href=”#” title=”Pablo Picasso”>Pablo Picasso</a></li>

</ul>

</div>

I have enclosed the list in a div tag with an id. This gives you control over the position of the menu by giving it a position style. i.e. position:absolute or float:left;

Each list tag <li> is given a class name as a unique identifier, which could also have been an id. Each link tag <a> is given a unique id and title. The title is used to give a popup description of the link when hovered over. I have not given a link address as this is only a demonstration but you can replace the # with your link pages as required.

That completes the (X)HTML for the menu. THIS WILL NOT CHANGE ON ANY OF THE FOLLOWING EXAMPLES. The only changes will be to the styling of this unordered list and will accomplished using CSS.

The basic list looks like this:

Basic List

Step 1

Make sure that you have the correct (X)HTML !DOCTYPE. Without this most browsers will be thrown into ‘quirks’ mode which will lead to all sorts of incompatibility problems. W3C QA – List of valid DTDs has a list of valid DOCTYPES that can be used. Select from XHTML1.0 or XHTML1.1 as these are more suitable for this styling (I use XHTML1.1 for all my current web pages).

Step 2

Using your favourite paint package create your images. You will need one image for the normal link (unhovered) and another image for the hovered link.

I need 10 images for my menu and have chosen a painting by each artist. The unhovered images have been converted to a sepia tone whilst the hovered images are full color. I have also added the painter’s name at the bottom of each image. It is possible to use different size images for each link but to keep things simple for this demonstration I have used images of the same size.

The ten images

Step 3

Removing the bullets and margin

We will start by removing the bullets and moving the unordered list to the left of our containing div.

Browsers have different ways of doing this; Internet Explorer and Opera use margin values whereas Mozilla/Netscape/Firefox all use padding values, so to cater to Internet Explorer we need to style the list as follows.

/* Step 3 – get rid of the bullets and margin */

#menu ul {margin:0; padding:0; list-style-type:none;}

The list will now look like this:

‡ Example one

Step 4

Making the list horizontal

Because I want a horizontal menu I need to style the list that places all the links on the same line.

Some people use display:inline; but on some browsers this puts a gap between each list item. I prefer float:left; as this removes the gap.

Add the following to your CSS:

/* Step 4 – make the list horizontal */

#menu li {float:left;}

This changes the list as:

‡ Example two