CSS Popup Image Viewer

[radiocheck]

I've implemented this script (http://www.dynamicdrive.com/style/csslibrary/item/css-popup-image-viewer/) into my site.

The images at the very top "FAST SHIPPING" and "CREDIT CARDS" appear when the page loads and the pop up works fine in FireFox 5.0.

However, in IE 9, these images disappear for some reason. I would please like help in troubleshooting why these images disappear in IE. Is there something conflicting causing these images to disappear?

Below is my website.
http://www.discountdressshop.com/homecoming-dresses.html


Below is the code I've used for the images and the CSS.

<a class="popupviewer" href="#thumb"><img src="http://site.discountdressshop.com/images/fast-shipping.gif" alt="Fast Shipping Every Tuesday and Friday" width="115" height="55" border="0"><span><img src="http://site.discountdressshop.com/images/we-ship-every-tuesday-friday.jpg" /><br />
</span></a></td>
<td align="right" valign="middle"><a class="nail" href="#thumb"><img src="http://site.discountdressshop.com/images/creditcardsaccepted.gif" alt="Credit Cards Accepted" width="138" height="51" border="0"><span><img src="http://site.discountdressshop.com/images/pop-ccaccept.jpg" /><br />
</span></a>



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

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

.popupviewer span{ /*CSS for enlarged image*/
position: absolute;
background-color: #CCCCCC;
padding: 5px;
left: -1000px;
border: 1px solid #CCCCCC;
visibility: hidden;
color: black;
text-decoration: none;
}

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

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

}


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

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

.nail span{ /*CSS for enlarged image*/
position: absolute;
background-color: #CCCCCC;
padding: 5px;
left: -1000px;
border: 1px solid #CCCCCC;
visibility: hidden;
color: black;
text-decoration: none;
}

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

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

}

[radiocheck]

I am still experiencing the "disappearing" of the images on the top of my website. Is there anyone who can help me figure out why this is occurring?

[isalassiei]

Hello! My first post!

I used this code also...but my images aren't appearing in the correct size. i followed the code exactly... please help! A sample is at http://coyotemktg.com/jeffrey/

Thank you!!