Log in

View Full Version : 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.


<!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:


<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:


<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.