CSS Image Popup Viewer - IE7 Enlarged Image Issue

[pbyrne]

Hi.. I am having trouble with the CSS Image Popup Viewer (http://www.dynamicdrive.com/style/csslibrary/item/css-popup-image-viewer/). Any assistance would be appreciated.

In IE7 enlarged images are affected by background images showing through or hidden behind other parts of the HTML page. Positioning of these enlarged images is also off. Firefox is rendering fine.

Please see test page at:

http://www.bonesinger.com/quintessence_test.html

CSS code is as follows:

/*thumbnail popup view on gallery pages*/
.thumbnail{
position: relative;
z-index: 0;
}

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

.thumbnail span{ /*CSS for enlarged image*/
position: absolute;
background-color: #000000;
padding: 5px;
right: -100px;
border: 1px dashed gray;
visibility: hidden;
color: #ffffff;
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: 0;
right: 60px; /*position where enlarged image should offset horizontally */
}