1) Script Title: CSS image Popup Viewer

2) Script URL (on DD): http://www.dynamicdrive.com/style/cs...-image-viewer/

3) Describe problem: Chrome, Safari, Firefox, and IE8 all interpret the popup images correctly. However, IE7 does not seem to recognize the top value I have set for the visibility of them in my stylesheet. I'm new to coding so please help!

Here is the page: http://pennington-design.com/pages/logo_designs.html

Here is the CSS. As you can see, I made duplicates of the tutorial code with adjustments to only the names and the top and left positions of .thumbnail:hover span so that they correspond to their respective thumbnail's unique location (the rest of the CSS that isn't shown are more duplicates following the same treatment):
Code:
/*Page*/
 
 
a {
	margin: 0;
	padding: 0;
	border-style: none;
	text-decoration: none;
}
 
img {
 
border-style: none;
margin: 0;
 
}
 
div  {
	text-align: left;
}
 
h3 {
 
	font-size: 13pt;
}
 
h4 {
	font-size: 11pt;
	color: #FFCFA0;
	margin-top: 4px;
	margin-bottom: 1px;
}
 
body {
	margin:  0;
	padding: 0;
	font-family: "Helvetica", sans-serif;
	font-size: 11pt;
	letter-spacing: 0.1px;
	color: #a9c1d4;
	background-color: #232323;
}
 
ul {
		margin: 0;
		padding: 0;
		list-style-type:none;
		
}
 
#page-header {
	background-color: #232323;
	width: 1004px;
	height: 184px;
	margin: auto;
	background-image: url(../images/header.png);
 
}
 
#nav-bar {
	background-color: #232323;
	width: 1004px;
	height: 45px;
	margin: auto;
	background-image: url(../images/nav-bg.png);
}
 
#nav-buttons {
	padding-left: 140px;
	height: 45px;
	width: 1004px;
	clear: both;
}
 
#footer {
		width: 1004px;
		height: 127px;
		background-image: url(../images/footer.png);
		margin: auto;
}
 
 
/*Table Functions*/
 
table.center {
		margin-top: 22px;		
		margin-left: auto;
		margin-right: auto;
		cellpadding: 1px;
		cellspacing: 0px;
		padding: 0px;
 
	}
 
 
/*Ad-Design Image Map*/
 
 
 
 
/*Thumb1*/
 
 
 
	.thumbnail{
	position: relative;
	z-index: 0;
	text-decoration: none;
	}
 
	.thumbnail:hover{
	background-color: transparent;
	text-decoration: none;
	z-index: 50;
 
	}
 
	.thumbnail span{ /*CSS for enlarged image*/
	position: absolute;
	padding: 0px;
	left: -1000px;
	visibility: hidden;
	color: #FFCFA0;
	text-decoration: none;
	}
 
	.thumbnail span img{ /*CSS for enlarged image*/
	border-width: 0;
	padding: 0px;
	}
 
	.thumbnail:hover span{ /*CSS for enlarged image on hover*/
	visibility: visible;
	top: -346px;
	left: -526px; 
 
	 /*position where enlarged image should offset horizontally */
 
	}
 
 
/*Thumb2*/
 
 
 
	.thumbnail2{
	position: relative;
	text-decoration: none;
	z-index: 0;
	}
 
	.thumbnail2:hover{
	background-color: transparent;
	text-decoration: none;
	z-index: 50;
	}
 
	.thumbnail2 span{ /*CSS for enlarged image*/
	position: absolute;
	padding: 0px;
	left: -1000px;
	visibility: hidden;
	color: #FFCFA0;
	text-decoration: none;
	}
 
	.thumbnail2 span img{ /*CSS for enlarged image*/
	border-width: 0;
	padding: 0px;
	}
 
	.thumbnail2:hover span{ /*CSS for enlarged image on hover*/
	visibility: visible;
	top: -346px;
	left: -618px;
 
	 /*position where enlarged image should offset horizontally */
 
	}
To my misfortune, I had no luck getting responses from my previous threads. Being so close to finishing this portfolio and needing to use it as soon as possible, I'm desperately asking to get help on this...=(