CSS Image Gallery IE7

**jsnow** · 03-08-2009, 04:20 PM

1) Script Title: CSS Image Gallery

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

3) Describe problem: I'm using a slightly modified version of this script and it works in FF and IE6 but not in IE7. In IE7 when I hover over the text no image appears. Here's a link to my page: http://www.snowposts.com/1990/

CSS

Code:

body { font-size: 1em; font-family: Calibri, Arial, Helvetica, Geneva, SunSans-Regular, sans-serif; margin: 2em 0em 2em 5em; }

h1 { color: #f00; font-size: 2.25em; font-weight: bold; margin: 0.67em 0; }
.gallerycontainer {
	position: relative;
	/*Add a height attribute and set to largest image's height to prevent overlaying*/
}
table { text-align: left; }

td { padding: 0.3em 1em; }

.cat { font-weight: bold; }
.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 { /*CSS for enlarged image*/
	position: absolute;
	background-color: silver;
	padding: 5px;
	left: -1000px;
	visibility: hidden;
	color: black;
	text-decoration: none;
	}

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

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

.thumbnail:hover span.right { /*CSS for enlarged image*/
	visibility: visible;
	left: 500px; /*  position where enlarged image should offset horizontally */
	z-index: 50;
}
.note { font-size: 0.75em; }

Note: the only reason I made .thumbnail span background-color: silver was to see if anything at all would show up in IE7.

HTML

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">

		<head>
				<meta name="generator" content="Adobe GoLive" />
				<title>TAHS Class of 1990 MOCK ELECTION RESULTS</title>
				<link href="../css/tahs.css" rel="stylesheet" type="text/css" media="all" />
		</head>

		<body>
		
			<h1>TAHS Class of 1990<br />MOCK ELECTION RESULTS</h1>
			<div class="gallerycontainer">
						<span class="note">Hover over name to reveal yearbook picture.  (Working on fix for IE7)</span>
						<table border="1" cellspacing="0" cellpadding="0">
						<tr>
								<td>
										<span class="cat">Most Popular</span>
								</td>
								<td>
										<a class="thumbnail" href="#thumb">Dave Rieth<span class="left"><img src="media/rieth-dave.jpg" /></span></a>
								</td>
								<td>
										<a class="thumbnail" href="#thumb">Jan Fairless<span class="right"><img src="media/fairless-jan.jpg" /></span></a>
								</td>
						</tr>
						<tr>
								<td>
										<span class="cat">Class Genius</span>
								</td>
								<td>
										<a class="thumbnail" href="#thumb">Alan Cryblskey<span class="left"><img src="media/cryblskey-alan.jpg" /></span></a>
								</td>
								<td>
										<a class="thumbnail" href="#thumb">Dori Seymour<span class="right"><img src="media/seymour-dori.jpg" /></span></a>
								</td>
						</tr>
				</table>
						<span class="note">Note: there was no senior picture for D'Forrest "Woody" Keisler, so I made a creepy<br /> amalgamation of other seniors.</span>
		</div>		
		</body>

</html>

Note: I removed most of the repetitive rows for space purposes.

This is my first post here, I look forward to any advice on this problem. Thanks in advance.

**jsnow** · 03-08-2009, 11:14 PM

It was the table. For some reason the table negated the image from showing upon hover. I removed the table - works like a charm now.

Thread: CSS Image Gallery IE7

Thread Tools

Search Thread

CSS Image Gallery IE7

Bookmarks

Bookmarks

Posting Permissions