Possible IE z-index issue

Looking to fix this or other solution

[madk]

Hello all,

I'm having an issue with creating some tool tips using javascript to display a div. I want the div to appear when mouse is over an image. Problem is that in IE the div pops up under the image itself. Here is my code, please suggest some fixes. Thanks!

HTML

<span style = "position: relative;" onmouseover = "javascript:showHide('1')" onmouseout = "javascript:showHide('1')">
<img src = "http://www.example.com/img/badges/1.png">
<span class = "badge_info" id = "1" style="display: none">
Some Info
</span>
</span>

CSS

.badge_info {
position:absolute;
top: 5px;
left: 15px;
z-index: 2;
background-color: #FFFBF0;
border: 1px solid #A0A0A4;
padding: 3px;
}

[Xapti]

Have you tried assigning the containing span a z-index of 1?
IE doesn't render z-indexes properly in multiple ways, so don't get too suprized at this.

[ratman7]

Which versions of IE?

[madk]

I tried setting the z-index of the containing span to 1 and now it doesn't even render correctly in FF.

I am testing with IE7 and FF. Without the z-index on the container it works fine in FF.

[Xapti]

I don't know about IE7's rendering of z-index too well, but I know IE6's is pretty bad. I'm also quite sure that Firefox follows the W3C recommendation quite tight and compliantly. Because of that, I assume there's some rendering bug, and I don't know what the solution would be, you could try searching.