PDA

View Full Version : 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/csslibrary/item/css-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
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
<!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.