IE Flicker Bug - The JS fix is not working

[kev971]

Okay before someone posts the JS fix for the image flicker, I've already tried. Can someone take a look at this link in IE6 and let me know why the three middle columns have a flicker when you hover them and how I could possibly fix this? I've tried preloading images using javascript and I've tried the javascript image flicker fix and neither work for me. Any help on this would be greatly appreciated.

<url removed>

[edited by: encyclo at 2:26 am (utc) on Feb. 28, 2007]
[edit reason] no links to personal sites please, see forum charter [/edit]

[SuzyUK]

Hi kev971 and Welcome to the WebmasterWorld Forums!

when you talk about image flicker are you talking about background images which change their position on hover? or are you swapping from one background image to another.

the CSS fix that I know involves putting the default background image on two elements.. if you can just post the HTML and CSS for one of the rollover/hovers we might be able to give more advice

[puddles]

Hi,

I am also encountering the same flicker issue with the following html and css. Please let me know what else I can provide so that you can point me in the right direction to a fix.

Thank you....Jamie

** MENU */

#menu {
width: 628px;
height: 82px;
margin: 0px auto;
background: url(images/bg04.jpg) no-repeat right top;
}

#menu ul {
height: 82px;
margin: 0px;
padding: 0px 0px 0px 76px;
background: url(images/bg03.jpg) no-repeat left top;
list-style: none;
}

#menu li {
display: inline;
}

#menu a {
display: block;
float: left;
width: 119px;
height: 82px;
}

#menu1 { background: url(images/homepage02.jpg) no-repeat left top; }
#menu2 { background: url(images/homepage03.jpg) no-repeat left top; }
#menu3 { background: url(images/homepage04.jpg) no-repeat left top; }
#menu4 { background: url(images/homepage05.jpg) no-repeat left top; }

HTML:

<div id="menu">
<ul>
<li><a href="#" id="menu1" accesskey="1" title="Services"><img src="images/services.png" alt="Services" width="42px" height="11px"/></a></li>
<li><a href="#" id="menu2" accesskey="2" title="Portfolio"><img src="images/portfolio.png" alt="Portfolio" width="46px" height="13px"/></a></li>
<li><a href="#" id="menu3" accesskey="3" title="Clients"><img src="images/clients.png" alt="Clients" width="36px" height="11px"/></a></li>
<li><a href="#" id="menu4" accesskey="4" title="Contact"><img src="images/contact.png" alt="Contact" width="40px" height="10px"/></a></li>
</ul>
</div>