ie6 hidden div background image not shown until hover

Question

I have a menu which has links with icons. The icons doesn't show up until i hover over it. The icons are set as background images.

When i see in the fiddler the request for the image happens only when i hover over the link

HTML:

<div style="display:none" id="menu"> 
<a href="test.htm"><span class="wicon"/>Test</a> 
</div> 

CSS:

.wicon { 
background:url('icons.png') no-repeat; 
width:17px; 
height:16px; 
display:inline-block; 
vertical-align:text-top; 
}

Answer 1

I'm not sure if that solves the problem, but your span tag is malformed. It's not a self-closing tag, it should be closed like this :

<span class="wicon">Test</span>

Also, do you have a png javascript fix for IE6? (to enable transparency of pngs) It may be the cause of the problem. If you do, try disabling it for this particular icon.

If not, I'm guessing there is some javascript in your code to show the link since it's wrapped in a hidden div. Could you post the code?