UberPippi - 6:17 am on Oct 15, 2011 (gmt 0)

I'm still learning CSS, so I'm basically learning a lot by trial and error and reading books. I made a site, and it has a nav bar. That nav bar contains a set of 5 images, each one linking to a different area of the site. I formatted them with CSS to display under the area that I wanted them to, and to remove any padding in between. In IE, you can click on them to go to the various links. In Firefox, they don't show up as clickable at all.

This is the relevant CSS
#nav {
position: relative;
z-index: -3;
top: -3px;
margin: 0px auto;
padding: 0px;
width: 570px;
left: 10px;
border: none;
}

#nav img {
padding: 0px;
margin: 0px auto;
float: left;
border: none;
display: block;
}

#nav a {
text-decoration: none;
border: none;
display: block;
}


This is the HTML
<div id="nav">
<a class="story" href="story.html" style="display:block" height="46" width="106"><img src="story.png" /></a>
<a class="gallery" href="gallery.html"><img src="gallery.png" alt="Story" /></a>
<a class="team" href="team.html"><img src="team.png" alt="Team" /></a>
<a class="preview" href="preview.html"><img src="preview.png" alt="Preview" /></a>
<a class="findout" href="findout.html"><img src="findout.png" alt="Find out more" /></a>
</div>


I've tried all sorts of different things to find the problem, so there might be a lot of redundant things in there.

Can anyone help me? I'm sure it's something obvious, but I'm getting so frustrated!