CSS Image Gallery - Positioning Larger image

[frankie]

I'm using this method to achieve a rollover pop up gallery :
http://www.dynamicdrive.com/style/cs...image-gallery/

I am having a bit trouble with my 'pop up' image not positioning consistently between IE & FF. I'm sure the answer is staring me dead in the face, but I'm running off of very little sleep from weeks of trying to tame my code. Basically what I'm trying to get is the larger image to come up at the same position in all browsers so that I may put a background image behind the pop up. If it means to make a separate div container for it, so be it. But I would see that as a bigger challenge with layout positioning and such.

http://triphonic.net/test/gallery

  #mainBlock {
	height: 380px;
	width: 800px;
	color: #CCCCCC;
	background-repeat: repeat;
	background-image: url(images/bgPatterm.gif);
	float: left;
}
.gallerycontainer{
	position: relative;
/*Add a height attribute and set to largest image's height to prevent overlaying*/
}

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

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

.thumbnail:hover img{
border: 1px solid blue;
}

.thumbnail span{
	position: absolute;
	background-color: #FFFFFF;
	padding: 5px;
	left: -2000px;
	border: 1px dashed gray;
	visibility: hidden;
	color: black;
	text-decoration: none;
	float: left;
}

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

.thumbnail:hover span{ /*CSS for enlarged image*/
visibility: visible;
top: 10;
left: 270px; /*position where enlarged image should offset horizontally */
z-index: 50;
}

and thanks in advance.

[frankie]

link corrected!