Image flicker in IE 6

I'd had this problem before and it still seems to come back and bite you. Internet Explorer 6 is still going to be around for a while so you can't just ignore it.

I was at one of my best mates, showing him a personal site I'm working on.
As you can see below the initial state of the menu is all grey. When you move it's supposed to bring the menu to life with colours 😉
However from State 0 (initial state) to State 2 (expected effect) there is an intermediary state in IE 6 State 1, where the little (icon) column preceding the menu elements is not visible, but should be!

Initial state (0):

Mouse over effect (2):

IE6 flicker effect (1):

The flicker effect in IE is consistent. Every time you hover over the image it calls the server to download a the hover state image once again. So if you go up and down a menu with 5 elements twice IE 6 will go and fetch the hover image 20 times !

I initially started with the column, preceding the menu elements, slightly smaller. Then I tried to do a cross type icon for elements with sub menus. The problem was that it looked like a RIP symbol so I moved back to a square type icon. I realised I liked the taller column (without the horizontal line) and kept a smaller (square type) one for the 'active' click by mistake. The active effect, moving from the tall to the square column, looks nice so I kept it like that.

Active, mouse down effect (3)

I remembered having come across a fix for this on a previous site that required a few lines of code in the httpd.conf or .htaccess

This is the code that needs to be added :
BrowserMatch "MSIE" brokenvary=1
BrowserMatch "Mozilla/4.[0-9]{2}" brokenvary=1
BrowserMatch "Opera" !brokenvary
SetEnvIf brokenvary 1 force-no-vary

You can also add this :
ExpiresActive On
ExpiresDefault A18000
ExpiresByType image/gif A2592000
ExpiresByType image/jpeg A2592000
ExpiresByType image/png A2592000

And as a comment on hicksdesign.co.uk explains you can also use this :
ExpiresActive On
ExpiresDefault A18000
ExpiresByType image/gif "access plus 4 hours"
ExpiresByType image/jpeg "access plus 4 hours"
ExpiresByType image/png "access plus 4 hours"

You can also use "access plus 1 month" for example...

If you have access to the httpd.conf (I couldn't get this to work via a vhost file) then you can add :
LoadModule expires_module modules/mod_expires.so

This 'should' stop the constant calls to the server. There may be an initial case of the image missing on the first hover (before it has loaded the image) but then it should no longer call the server for each hover.

Code was found at Dean Edwards, the IE guru and a comment posted on Jon Hicks blog in an article about a menu that wasn't behaving...

A word of advice : if you are developing a site, test this and then comment it out until the site is finished. It's highly likely you will 'have' to refresh the page by using a force refresh page each time you change any images. And sometimes you forget and then discover the changes when you restart the browser. Although that seems to be necessary in Opera 9 all the time anyway ! PS : Opera 9 is still my preferred browser, maybe until FireFox 2 ?

One other thing I noticed with Opera is that the animated gifs that have been defined to cycle though the frames in the animation say seven times like the one above start all over again if you page down and then back to the animation. It's a kind of now you see it, now you don't thing that cleans the slate of the animation. Not really always desirable and I feel it counteracts the whole concept of defining how many times an animated gif should loop !