Image flicker in IE 6

By    John Garner on  Tuesday, July 25, 2006
Summary: 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 […]

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):
Initial State before mouse hover

Mouse over effect (2):
Mouseover effect

IE6 flicker effect (1):
IE6 flicker Effect

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)
active mouseover

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 !

Article written by  John Garner

Leave a Reply

Your email address will not be published. Required fields are marked *

Recent Posts

Check out the most recent posts from the blog: 
Wednesday, June 18, 2025
The ONHT Framework for Intermediate users

This Intermediate Guide for the ONHT (Objective, Needs, How, Trajectory) Framework transforms you from someone who uses GenAI into someone who thinks with GenAI by adding the missing cognitive functions that current GenAI lacks. The framework works through three critical pillars – Empathy (understanding all stakeholders), Critical Thinking (challenging assumptions), and Human in the Loop (active partnership). Master these patterns and you'll be solving complex problems others can't even approach, becoming indispensable by designing interactions that produce exceptional results rather than just functional outputs.

Read More
Monday, June 16, 2025
The ONHT Framework: Beginners Guide

Stop getting generic AI responses. Learn the four-letter framework that transforms vague requests into precise results. The ONHT framework: Objective (what problem you're solving), Needs (key information that matters), How (the thinking approach), and Trajectory (clear steps to the answer), teaches you to think WITH AI, not through it, turning "analyse customer feedback" into board-ready insights. Real examples show how adding context and structure gets you from Level 1 basics to Level 3 mastery, where AI delivers exactly what you need.
The difference? Knowing how to ask.

Read More
Sunday, June 15, 2025
The ONHT Framework: GenAI Prompting Solutions That Actually Work for People

GenAI tools are transforming work, but most people get poor results because they don't understand how to communicate with AI built on structured data. This guide is a series of articles that teaches the ONHT framework—a systematic approach to prompting that transforms vague requests into exceptional outputs by focusing on Objectives (what problem), Needs (what information), How (thinking approach), and Trajectory (path to solution). Master this framework and develop an expert mindset grounded in human-in-the-loop thinking, critical analysis, and empathy, and you'll excel with any AI tool, at any company, in any role.

Read More
Sunday, September 24, 2023
The reliability & accuracy of GenAI

I question the reliability and accuracy of Generative AI (GenAI) in enterprise scenarios, particularly when faced with adversarial questions, highlighting that current Large Language Models (LLMs) may be data-rich but lack in reasoning and causality. I would call for a more balanced approach to AI adoption in cases of assisting users, requiring supervision, and the need for better LLM models that can be trusted, learn, and reason.

Read More
crossmenuarrow-down