Getting rid of flicker on Navigation bar

I am in the middle of making this new site that has a graphical navigation bar that is sliced to allow for a rollover state. The client does not like the flicker you get when the page reloads (when the page changes). Is there a way of minimizing the flicker. The only thing I can think of is to use frames (which I hate and which means starting again) or an image map which means no rollover state (I dont want to swap the whole image on each rollover). Or not having a graphical navigation bar which the client wants. The site is here at the moment (note only have images in recent work):http://www.glanceimage.co.uk/jason-i...work/index.htm Any help, yes please!

One thing to note that is not included in the example that Ryan posted is that you could also pre load the images with css.

In your CSS something like:

#fooPreLoad {
height:0;
overflow:hidden;
background: url("foo.jpg") top left no-repeat;
display:none !important;
}

then the images will be loaded before the page loads fully thus cached thus out of the way.

in your HTML put:

<div id="fooPreLoad">&nbsp;</div>

__________________

I like the 1 image idea better

Pure CSS rollovers without Javascript

The example ryan posted is one image, my comment added pre loading of it. It can be recycled for each nav element.

__________________

I know ... just adding my opinion and my link

Thanks for all the advice. I will try the tutorial later. Is this the best way of making graphical css buttons by using ul? Is there another way of linking a div that does not have any content?

In the mean time I have added a background image of the whole of the nav bar in the nav bar container. This seems to help with the flicker in IE6 and FF but apparently not IE7 which I dont have! Is this the case and does it flicker in safari? The flicker happens when you click on the next image button by view. Ta again for all your thoughts!
http://www.glanceimage.co.uk/jason-i...1/image-01.htm

If the items are a menu than they should be in a list. Then the best way is to put the image as a background to the list and go from there.

Do background images load if they have display: none; set in most browsers? In Safari, if you have display set to none with a background image, it won't load the image until the div is set to block (I've noticed this using JavaScript to change the values).

Nah you make a ID or class just for preloading. It is often not necessary but at tiumes could be useful for any image. Nice thing is it only really kicks in fisrty visit, once the images are pre loaded they are cached from then on. Just kinda ensures that your site looks a bit better at render vs missing elements.

__________________