Results 1 to 2 of 2

Thread: CSS Image Gallery IE7

  1. #1
    Join Date
    Mar 2009
    Location
    Ann Arbor MI
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default CSS Image Gallery IE7

    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.

  2. #2
    Join Date
    Mar 2009
    Location
    Ann Arbor MI
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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.

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •