IE6 not showing background image on hover

[basslion]

Ok here is my code example


<ul id="slide">
<li class="top"><a class="outer" href="http://www.smggsm.com">Aiptek<!--[if gte IE 7]><!--></a><!--<![endif]-->

<!--[if lte IE 6]><table><tr><td><![endif]-->
<div>
<dl>
<dt>Aiptek</dt>
<dd>Aiptek Pocket Projectors and Accessories</dd>
<dd>» <a href="http://www.smggsm.com/aiptek-accessories/">Accessories</a></dd>
<dd>» <a href="http://www.smggsm.com/aiptek-portable-pocket-projectors/">GSM Mobile Devices</a></dd>
</dl>
</div>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
</ul>

and here is my css:


ul#slide {padding-left:6px; margin:0; list-style:none; width:170px; position:relative; overflow:hidden;}

ul li div {position:absolute; left:-9999px; background-color: #999999;}

ul table {border-collapse:collapse; width:0; height:0; margin:-1px; padding:0;}

#slide li.top {height:25px; width:170px; float:left;}
#slide li.top a.outer {display:block; float:left; height:24px; line-height:24px; width:170px; text-indent:10px; color:#000; background:#FFFFFF; text-decoration:none; font-family: verdana, sans-serif; font-size:12px; border-bottom:1px solid #eee;}

#slide li.top:hover > a {color:#FFFFFF; background:url(slideheadbg.jpg);}

#slide li:hover {height:130px;}
#slide a:hover div, #slide li.current div {position:static; width:150px; padding:15px; line-height:1.2em; font-family: verdana, sans-serif;}
#slide li:hover div {position:static; width:150px; padding:15px; line-height:1.2em; font-family: verdana, sans-serif;}
#slide div img {display:block; margin:15px 0 8px 0;}
#slide div img.fLeft {clear:left; float:left; display:block; margin:8px; margin-right:8px;}

#slide div h3 {font-size:13px; color:#000; padding:0; margin:0;}
#slide div p {font-size:12px; color:#888; line-height:1.4em; padding:10px 0; margin:0;}

#slide :hover div a {color:#00c; text-decoration:none; font-size:11px;}
#slide :hover div a:hover {text-decoration:underline; color:#00c;}

#slide div a.big, #slide :hover div a.big {display:block; height:30px; line-height:30px; border-top:1px solid #ddd; font-size:14px; color:#44a; text-decoration:none; text-indent:5px;}
#slide :hover div a.big:hover { color:#000; font-size:14px; text-decoration:none;}

#slide div dl {border-bottom:1px solid #ddd; margin:20px 0 0 0; padding-bottom:10px;}
#slide div dt {font-size:11px; font-weight:bold; color:#FFFFFF;}
#slide div dd {padding:0; margin:0; line-height:1.5em; font-size:11px; color:#FFFFFF; background:#999999;}
#slide :hover div dd a {color:#FFFFFF; font-weight:bold; text-decoration:none; background:#999999;}
#slide :hover div dd a:hover { color:#FFFFFF; font-weight:bold; text-decoration:underline; background:#999999;}

pretty confusing i know, but if you look at the following part of the above css


#slide li.top:hover > a {color:#FFFFFF; background:url(slideheadbg.jpg);}

this is what makes a background image appear in the header portion of the menu option on hover.

it works in all browsers except IE6 and earlier. Basically in IE6 is wont display the background image on rollover. Can anyone point me in the right direction on this?

[3v1l5w1n]

Hi, IE6 recognizes :hover class ONLY on "a" elements, i.e. only the a:hover directive works in IE6, div:hover, li:hover, span:hover will not work in IE6. You will either have to reorgazine your html/css or achieve the effect through javascript.