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

A white, rounded square logo with an abstract S-shaped design on a gradient blue and purple background.

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)

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

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.

Share This

Join the Sales and Marketing News, receive our last insights, tips and best practices.

Our 7 Guarantees

Keeping 2,000+ Clients Happy Since 2001.

You Will Love Your Design We design to please you and your clients
Same-Day Support 24-hour turnaround edits during business hours
Free Education We provide knowledge to help you expand
No Hidden Charges We quote flat-rate projects
Own Your Site No strings attached
We Create Results SEO, PPC, content + design = clients
We Make Life Easier One agency for web, branding and marketing