IE thumbnail hover problems

**blueooze** · 08-29-2008, 08:05 PM

Always something wrong with IE... pos... I'm trying to make a thumbnail gallery. Works perfect in FF but for some reason there are these tiny little black lines appearing next to the thumbnails in IE. Not sure where they are coming from.

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
		<title>Untitled Document</title>
		
	<style type="text/css">

.thumbnail{
position: relative;
z-index: 0;
}

.thumbnail:hover{
background-color: transparent;
z-index: 50;
}

.thumbnail span{ /*CSS for enlarged image*/
position: absolute;
background-color: #e8f8ff;
padding: 1px;
left: -1000px;
border: 1px solid #000;
visibility: hidden;
color: black;
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: 0;
left: 60px; /*position where enlarged image should offset horizontally */

}
li {
	margin: 15px;
	display: inline;
	list-style: none;
	list-style-position: outside;
}

	</style>
	</head>
	<body>
		<li>
		<a class="thumbnail" href="#thumb">
			<img src="http://www.usaauctiondrop.com/photo/tn_217-292-075.JPG" border="0" />
			<span><img src="http://www.usaauctiondrop.com/photo/217-292-075.JPG" /><br />woo</span>
		</a>
		</li>
		
		<li>
		<a class="thumbnail" href="#thumb">
			<img src="http://www.usaauctiondrop.com/photo/tn_217-292-077.JPG" border="0" />
			<span><img src="http://www.usaauctiondrop.com/photo/217-292-077.JPG" /><br />woo</span>
		</a>
		</li>
	</body>
</html>

**rangana** · 08-30-2008, 02:48 AM

It's a whitespace interpreted by IE as if you're giving nbsp;.

The fix is by changing these (different) lines:

Code:

		<a class="thumbnail" href="#thumb">
			<img src="http://www.usaauctiondrop.com/photo/tn_217-292-075.JPG" border="0" /><span><img src="http://www.usaauctiondrop.com/photo/217-292-075.JPG" /><br />woo</span>
		</a>
		</li>
		
		<li>
		<a class="thumbnail" href="#thumb">
			<img src="http://www.usaauctiondrop.com/photo/tn_217-292-077.JPG" border="0" />
			<span><img src="http://www.usaauctiondrop.com/photo/217-292-077.JPG" /><br />woo</span>
		</a>

to:

Code:

		<li>
		<a class="thumbnail" href="#thumb">
			<img src="http://www.usaauctiondrop.com/photo/tn_217-292-075.JPG" border="0" /><span><img src="http://www.usaauctiondrop.com/photo/217-292-075.JPG" /><br />woo</span>
		</a>
		</li>
		
		<li>
		<a class="thumbnail" href="#thumb">
			<img src="http://www.usaauctiondrop.com/photo/tn_217-292-077.JPG" border="0" /><span><img src="http://www.usaauctiondrop.com/photo/217-292-077.JPG" /><br />woo</span>
		</a>
		</li>

Hope that helps.

Thread: IE thumbnail hover problems

Thread Tools

Search Thread

IE thumbnail hover problems

Bookmarks

Bookmarks

Posting Permissions