Fix: IE Flicker Issue / Error with CSS Background Rollover Menus

This is the final fix for a IE flicker issue with CSS rollover background graphics. Sure with regular graphics, you can use a javascript preloader. However, with IE there is still a flicker when hovering.

1. Javascript to the Rescue
Add this to the header in a javascript area (or use an attached javascript file)

//fixIE6flicker
try {
document.execCommand(‘BackgroundImageCache’, false, true);
} catch(e) {}

* NOTE that you must wrap this above in a standard javascript “script” tag or link it to an external javascript file.
Thanks to Dana Popa for the code fix.

2. A single Background Graphic
In the graphics for the rollovers, only make one single file for the background graphic for the button. The graphic would have both the up state and hover state.
Background Menu

3. CSS Changes
Simply change the CSS code to put in a different position value when you need to call them. For instance:

#menu ul li {
background:url(images/bg_menu.gif) no-repeat top left;

#menu ul li:hover {
background:url(images/bg_menu.gif) no-repeat left -36px;

As you can see, the background position was moved to a negative value of 36 pixels, which shifts the image to the hover state.