Help My Final Project is due tonight

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>

Hi thezuk. Welcome to SitePoint. :slight_smile:

Do you have an online version of this? That would be easier to debug. Without the images, it’s hard to see what’s going on here.

What time zone are you in and what time tonight is it due?

tick tock tick tock tick tock…

It’s stranger still.
I copied your code and stuck in a few random images, then noticed something else.
Your images are all links to nowhere. but in firefox (and chrome, it doesn’t work there either) the mouse stays as a pointer when moved over the image. Then I made one of the links point to a web site, and removed your span, so it should be just an image that is a link, and still the cursor still stayed as a pointer, not a hand, on hover, AND the link to the web site didn’t work, apart from in IE.
Then I removed the thumbnail class from the first image, and the cursor became a hand on hover, and the link did work.

So I played with the css for .thumbnail to detect whatever error you have there.
Solution: Remove the z-index line for the .thumbnail class and it works.

PS I think it’s important that you learn how to find things out, so I described some of what I did and the clues I spotted to detect the source of the problem.