I need help my final is due tonight and I cant get my image gallery to work in fire fox please help here is the code… It works fine in IE… the problem is the photos enlarge when I hover over them in IE but not Firefox I wont get a passing grade if it don’t work in all browsers… Thanks in advance
CSS
p{
font-size:1.5em;
}
.thumbnail{
position: relative;
display:inline;
margin:30px;
z-index: -10;
}
.thumbnail:hover{
background-color: transparent;
z-index: 1;
}
.thumbnail span{ /CSS for enlarged image/
position: absolute;
background-color: lightyellow;
padding: 5px;
left: -1000px;
border: 1px dashed gray;
visibility: hidden;
color: black;
text-decoration: none;
z-index:50;
}
.thumbnail span img{ /CSS for enlarged image/
border-width: 0;
padding: 2px;
}
.thumbnail:hover span{ /CSS for enlarged image on hover/
visibility: visible;
top: -200px;
left: 60px; /*position where enlarged image should offset horizontally
*/
}
the html
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=“http://www.w3.org/1999/xhtml”>
<head>
<meta http-equiv=“Content-Type” content=“text/html; charset=UTF-8” />
<title>Tables</title>
<link rel=“stylesheet” type=“text/css” href=“style.css” />
</head>
<body style="background-image: url(Snowboard.jpg); background-size:
100%; background-repeat: no-repeat;">
<div style=“width:600px; float: left; margin: 150px 50px 50px 15px;”>
<a class=“thumbnail” href=“#thumb”><img src=“best.jpg” width=“200px”
height=“132px” border=“0” /><span><img src=“best.jpg” /><br />Simply
beautiful.</span></a>
<a class=“thumbnail” href=“#thumb”><img src=“best.jpg” width=“200px”
height=“132px” border=“0” /><span><img src=“best.jpg” /><br />Simply
beautiful.</span></a>
<a class=“thumbnail” href=“#thumb”><img src=“snowboard2.jpg”
width=“200px” height=“132px” border=“0” /><span><img
src=“snowboard2.jpg” /><br />So real, it’s unreal. Or is it?</span></a>
<a class=“thumbnail” href=“#thumb”><img src=“jeep.jpg”
width="200px"height=“132px” border=“0” /><span><img src=“jeep.jpg”
/><br />Simply beautiful.</span></a>
<a class=“thumbnail” href=“#thumb”><img src=“jeep.jpg” width=“200px”
height=“132px” border=“0” /><span><img src=“jeep.jpg” /><br />So real,
it’s unreal. Or is it?</span></a>
<a class=“thumbnail” href=“#thumb”><img src=“jeep.jpg”
width="200px"height=“132px” border=“0” /><span><img src=“jeep.jpg”
/><br />Simply beautiful.</span></a>
<a class=“thumbnail” href=“#thumb”><img src=“jeep.jpg” width=“200px”
height=“132px” border=“0” /><span><img src=“jeep.jpg” /><br />So real,
it’s unreal. Or is it?</span></a>
</div>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam
nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat
volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation
ullamcorper suscipit lobortisnisl ut aliquip ex ea commodo consequat.
Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse
molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero
eros et accumsan et iusto odio dignissim qui blandit praesent luptatum
zzril delenit augue duis dolore te feugait nulla facilisi.</p>
<div id=“links”><a href=“http://power.arc.losrios.edu”>Power
Server</a> <a href=“index.html”>Home</a></div>
</body>
</html>