Select Boxes showing through image in IE6

Greetings.

The folowing CSS code behaves well in Firefox, but the Select boxes in the tables adjacent cells show through the image in IE 5 and 6. Funnily enough Check boxes do not show through??

<style type="text/css">

.thumbnail{
position: relative;
z-index: 0;
}

.thumbnail:hover{
background-color: transparent;
z-index: 50;
}

.thumbnail span{ /*CSS for enlarged image*/
position: absolute;
background-color: lightyellow;
padding: 5px;
left: -1000px;
border: 1px dashed gray;
visibility: hidden;
color: black;
text-decoration: none;
}

.thumbnail span img{ /*CSS for enlarged image*/
border-width: 0;
padding: 2px;
}

.thumbnail:hover span{ /*CSS for enlarged image on hover*/
visibility: visible;
top: 5;
left: 0px; /*position where enlarged image should offset horizontally */

}

</style>


Any pointers to correct this behaviour please?

The following code is used to display the thumbnail and enlarged image:

<a class="thumbnail" href="#thumb"><img src="http://www.mysite.com/MedalImages/FS/acsm.jpg" width="40px" height="80px" border="0" /><span><img src="http://www.mysite.com/MedalImages/FS/acsm.jpg" /><br /></span>

I don't see any checkbox or select box. Need to see more code, or a link would be more useful(along with some more details of the problem)

Thanks for the input.

Here is the link to the test page:
http://www.justmedals.com/test-CSS.html

When mouseover the thumbnail images in the left column of the table, the select boxes in the right column of the table show through the enlarged image in IE but not in Firefox. The check-boxes, however, do not show through the enlarged image.

IE 6 known problem. 'Windowed controls' won't follow any z-index. They'll always be - on-top. Oddly, iframes can fit in with them, and with normal positioned object like DIVS. So I think people took to using iframe to conceal. I think even close to 0 opacity iframes might still cover a selectbox underneath.

The alternative - obviously - is to literally 'display:none' when you enlarge the image, and then 'display:inline' (or whatever) when you return. A lot of people used to handle that problem by selectively turning on and off those 'windowed control' displays.

But it's a well-known problem.

BTW, I don't see any hover effects in IE6!

Are you not getting a larger image appearing when the mouse hovers over a thumbnail??

I see it nicely in FF, but not in IE6(checked in IETab of FF also). Not sure the reason.

Very wierd!! Off to do some checking - will revert!!