Flicker issue in IE6

[justinae]

I had this working in IE6 and must have lost some work because now I have the flicker issue again.

I'm confident that I'm just missing a needle in a haystack so I'm asking for an extra set of eyes. I'm pullin my hair out staring at this thing!

Here is my test site:
http://www.thepangaeaproject.org/test.shtml

Here is the relevant HTML:

<div id="menu">
        
<ul class="menu">
    <li class="top"><a href="#" class="top_link"><span>Home</span></a></li>
    <li class="top"><a href="#" class="top_link"><span class="down">Program</span><!--[if gte IE 7]><!--></a><!--<![endif]-->
        <!--[if lte IE 6]><table><tr><td><![endif]-->
        <ul class="sub">
            <li><a href="#">Overview</a></li>
            <li><a href="#">Program Components</a></li>
        </ul>
        <!--[if lte IE 6]></td></tr></table></a><![endif]-->
    </li>
    <li class="top"><a href="#" class="top_link"><span class="down">Destinations</span><!--[if gte IE 7]><!--></a><!--<![endif]-->
        <!--[if lte IE 6]><table><tr><td><![endif]-->
        <ul class="sub">
            <li><a href="#">Ecuador</a></li>
            <li><a href="#">Thailand</a></li>
        </ul>
        <!--[if lte IE 6]></td></tr></table></a><![endif]-->
    </li>
    <li class="top"><a href="#" class="top_link"><span class="down">Participants</span><!--[if gte IE 7]><!--></a><!--<![endif]-->
        <!--[if lte IE 6]><table><tr><td><![endif]-->
        <ul class="sub">
            <li><a href="#">Participants</a></li>
            <li><a href="#">Current Participants</a></li>
            <li><a href="#">Graduates</a></li>
            <li><a href="#">Becoming a Participant</a></li>
            <li><a href="#">Student Pages</a></li>
            <li><a href="#">Family Pages</a></li>
        </ul>
        <!--[if lte IE 6]></td></tr></table></a><![endif]-->
    </li>
    <li class="top"><a href="#" class="top_link"><span class="down">About Us</span><!--[if gte IE 7]><!--></a><!--<![endif]-->
        <!--[if lte IE 6]><table><tr><td><![endif]-->
        <ul class="sub">
            <li><a href="#">History</a></li>
            <li><a href="#">Staff</a></li>
            <li><a href="#">Board of Directors</a></li>
            <li><a href="#">Advisory Council</a></li>
            <li><a href="#">Events &amp; Press</a></li>
            <li><a href="#">Newsletters</a></li>
        </ul>
        <!--[if lte IE 6]></td></tr></table></a><![endif]-->
    </li>
    
    <li class="top"><a href="#" class="top_link"><span class="down">Supporters</span><!--[if gte IE 7]><!--></a><!--<![endif]-->
        <!--[if lte IE 6]><table><tr><td><![endif]-->
        <ul class="sub">
            <li><a href="#">Foundations</a></li>
            <li><a href="#">Individual Donors</a></li>
            <li><a href="#">Organization Partners</a></li>
        </ul>
        <!--[if lte IE 6]></td></tr></table></a><![endif]-->
    </li>
    
    <li class="top"><a href="#" class="top_link"><span>Gallery</span></a></li>
    <li class="top"><a href="#" class="top_link"><span>Blog</span></a></li>
    <li class="top"><a href="#" class="top_link"><span class="down">Contact Us</span><!--[if gte IE 7]><!--></a><!--<![endif]-->
        <!--[if lte IE 6]><table><tr><td><![endif]-->
        <ul class="sub">
            <li><a href="#">Volunteer</a></li>
            <li><a href="#">Spread the Word</a></li>
            <li><a href="#">Employment</a></li>
        </ul>
        <!--[if lte IE 6]></td></tr></table></a><![endif]-->
    </li>
    
</ul>
  </div>

Here is the CSS:

.preload1 {
    background-image: url(/images/menu/blank_over.gif);
}
.preload2 {
    background-image: url(/images/menu/link_bg.gif);
}


#menu {
    margin-left: 2px;
    padding: 0px;
    margin-top: 1px;
    margin-right: 0px;
    margin-bottom: 0px;
}

.menu {
    margin:0px;
    list-style:none;
    height:25px;
    background:#FFFFFF;
    position:relative;
    z-index:500;
    font-family:arial, verdana, sans-serif;
    padding-top: 0;
    padding-right: 0;
    padding-bottom: 0;
    padding-left: 0;
}
.menu li.top {
    display:block;
    float:left;
    margin: 0px;
    padding: 0px;
}
.menu li a.top_link {
    display:block;
    float:left;
    height:25px;
    width:100px;
    line-height:24px;
    color:#000000;
    text-decoration:none;
    font-size:9pt;
    font-weight:bold;
    cursor:pointer;
    background: url(/images/menu/blank.gif);
    text-align: center;
}

/*The width in this class takes out the drop down in IE6*/
.menu li a.top_link span {
    float:left;
    display:block;
    height:25px;
    width:100px;
    background:url(/images/menu/blank.gif) right top;
    text-align: center;
}

.menu li a.top_link:hover {color:#fff; background: url(/images/menu/blank_over.gif) no-repeat;}
.menu li a.top_link:hover span {background:url(/images/menu/blank_over.gif) no-repeat right top;}

.menu li:hover > a.top_link {color:#fff; background: url(/images/menu/blank_over.gif) no-repeat;}
.menu li:hover > a.top_link span {background:url(/images/menu/blank_over.gif) no-repeat right top;}


.menu table {border-collapse:collapse; width:0; height:0; position:absolute; top:0; left:0;}

/* Default link styling */

/* Style the list OR link hover. Depends on which browser is used */

.menu a:hover {visibility:visible; position:relative; z-index:200;}
.menu li:hover {position:relative; z-index:200;}

/* keep the 'next' level invisible by placing it off screen. */
.menu ul, 
.menu :hover ul ul, 
.menu :hover ul :hover ul ul,
.menu :hover ul :hover ul :hover ul ul,
.menu :hover ul :hover ul :hover ul :hover ul ul {
    position:absolute;
    left:-9999px;
    top:-9999px;
    width:0;
    height:0;
    margin:0;
    padding:0;
    list-style:none;
}

.menu :hover ul.sub {
    left:0px;
    top:25px;
    border:1px solid #000000;
    white-space:nowrap;
    width:auto;
    height:auto;
    z-index:300;
    background-color: #9E3D0D;
    padding: 5px;
}
.menu :hover ul.sub li {
    display:block;
    height:17px;
    position:relative;
    float:left;
    width:100%;
    font-weight:normal;
}
.menu :hover ul.sub li a {
    display:block;
    font-size:9pt;
    height:17px;
    width:100%;
    line-height:17px;
    text-indent:20px;
    color:#000000;
    text-decoration:none;
}
.menu :hover ul.sub li a:hover {
    color:#FFFFFF;
    background-image: url(/images/menu/link_bg.gif);
    background-repeat: no-repeat;
    background-position: left top;
}

[justinae]

Perhaps it's cheating, but with over 95% of users with Javascript turned on, and only 15% of users with IE6 I used this technique which worked:

<!--[if lt IE 7]>
<script type="text/javascript">
try { document.execCommand('BackgroundImageCache', false, true); } catch(e) {}
</script>
<![endif]-->

so sue me. :)

[SineQuaNon]

So...problem solved? Cause your example link is now a 404 :)

[Harry]

Presuming you don't have a different image on hover just change the background position. If it's the same image on hover and normal you can have a{background:…top left;} a{background:…top right;}

If it is a different image, use a sprite.

Oh and that dropdown hack is vile, there are loads of IE6 compatible ones such as this: http://www.xs4all.nl/~peterned/csshover.html

Harry

[graphicsAZ]

the link is broken....but what your saying is the hover state image jumps a pixel in IE6 only? Can you post a new url?