z-index property does not cause overlap in IE8

Question

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

I have specified this style to make an image overlap another image on mouse hover. It works perfectly in all other browsers except in IE8. I tried specifying higher value for z-index but it did not work out!

This is the complete styles associated with the thumbnails

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

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

.thumbnail span {
    position: absolute;
    background-color: lightyellow;
    padding: 5px;
    right: -500px;
    border: 1px dashed gray;
    visibility: hidden;
    color: black;
    text-decoration: none;
}

.thumbnail span img {
    border-width: 0;
    padding: 2px;
    width: 400px;
    height: 300px;
}

.thumbnail:hover span {
    visibility: visible;
    top: 0;
    right: -290px;
    vertical-align: top;}
 The HTML part for the CSS is mentioned below : <a id="aPhotos" href="SubscribersPropertyDetail.aspx" class="thumbnail" runat="server"> <img id="imgPhotos" border="0" height='130' width='150' title='Click to view full details about this property' runat="server" /> <span id="spanZoom" runat="server"> <img id="imgzoomphotos" src='~/images/PropertyImages/NoImage.jpg' runat="server" /></span> </a>                                                                                                                                                                  

Answer 1

Do you have a position property set within another .thumbnail selector?

.thumbnail:hover {
    background-color: transparent;
    position: relative;
    z-index: 2;
}

Answer 2

Without all your code (or at least more code) this is difficult to assess. Generally for IE to work you should set the elements position to relative or absolute. Also the parent element should be set to position:relative;z-index:1. If this doesn't work please post more info. Thanks!

EDIT

Ah, I get it now. You need the span that is the child of .thumbnail to appear on hover. Some browsers will allow this based on the order of the elements. To ensure it works

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

.thumbnail:hover {
    background-color: transparent;
}

.thumbnail span {
    position: absolute;
    background-color: lightyellow;
    padding: 5px;
    right: -500px;
    border: 1px dashed gray;
    visibility: hidden;
    color: black;
    text-decoration: none;
    z-index: 50;
}

Answer 3

I added z-index property to thumbnail: hover span style to a higher value than that of thumbnail style. This worked out!! .thumbnail:hover span{ /CSS for enlarged image on hover/ visibility: visible; top: -140px; /*position where enlarged image should offset horizontally */ left: -500px; z-index: 51; }