Hi There
I've built a photo gallery based on this gallery here http://www.dynamicdrive.com/style/cs...image-gallery/
but have altered more to how I need it to display, with the large image displayed above the group of thumbnails when the mouse moves over the thumbnail image. The only problem is it works fine in IE and Opera but not in Firefox or Safari.

HTML:
Code:
<div class="gallerycontainer">
<a class="thumbnail" href="#thumb"><img src="images/DSC_9664.JPG" width="130px" height="86px" border="0" /><span><img src="images/DSC_9664.JPG" /></span></a>
<a class="thumbnail" href="#thumb"><img src="images/DSC_9672.JPG" width="130px" height="86px" border="0" /><span><img src="images/DSC_9672.jpg" /></span></a>
<a class="thumbnail" href="#thumb"><img src="images/DSC_9696.JPG" width="130px" height="86px" border="0" /><span><img src="images/DSC_9696.jpg" /></span></a>
<a class="thumbnail" href="#thumb"><img src="images/DSC_9703.JPG" width="130px" height="86px" border="0" /><span><img src="images/DSC_9703.jpg" /></span></a>
<a class="thumbnail" href="#thumb"><img src="images/DSC_9709.JPG" width="130px" height="86px" border="0" /><span><img src="images/DSC_9709.jpg" /></span></a>
<a class="thumbnail" href="#thumb"><img src="images/DSC_9730.JPG" width="130px" height="86px" border="0" /><span><img src="images/DSC_9730.jpg" /></span></a>		
<a class="thumbnail" href="#thumb"><img src="images/DSC_9734.JPG" width="130px" height="86px" border="0" /><span><img src="images/DSC_9734.jpg" /></span></a>
<a class="thumbnail" href="#thumb"><img src="images/DSC_9805.JPG" width="130px" height="86px" border="0" /><span><img src="images/DSC_9805.jpg" /></span></a>
<a class="thumbnail" href="#thumb"><img src="images/DSC_9714.JPG" width="130px" height="86px" border="0" /><span><img src="images/DSC_9714.jpg" /></span></a>
<a class="thumbnail" href="#thumb"><img src="images/DSC_9717.JPG" width="130px" height="86px" border="0" /><span><img src="images/DSC_9717.jpg" /></span></a>
</div>
CSS:
Code:
.gallerycontainer {
position: relative;
	width: 720px;
	height: 1000px;
	margin: auto;
	margin-top: 425px;
	padding-top: 10px;
}
.thumbnail img{
border: 1px solid white;
margin: 0 5px 5px 0;
}

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

.thumbnail:hover img{
border: 1px solid white;
margin: 0 5px 5px 0;
}

.thumbnail span /*CSS for enlarged image*/
position: absolute;
padding: 0px;
visibility: hidden;
color: black;
text-decoration: none;
}

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

.thumbnail:hover span{ /*CSS for enlarged image*/
visibility: visible;
top: -360px; /*position where enlarged image should sit vertically*/
left: 100px; /*position where enlarged image should offset horizontally */
z-index: 50;
Can anyone point to where I going wrong?