images that are links don't work in Firefox

[UberPippi]

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!

[penders]

In principle, I think what you have should work, however, with setting

z-index:-3

on the container you are sending this behind the level of the page (and other elements) - so I would guess that there are now other elements that are overlapping your links and making them unclickable. Cross-browser differences may allow IE to still 'work' in this respect.

Try setting a temporary border on other elements to check for any overlap...

* {border:1px solid #f00;}

[tangor]

Not going to deal with image (word) navigation. Merely asking why image instead of the word... which is better for both user (accessibility) and search engines. Might want to do a rethink in that regard (and solve a LOT of problems all at once).

Note: this is not a solution, it is an observation regarding general use and works cross-browser (all of them).

And, before I forget! Welcome to Webmasterworld! Remember me as the crotchety old curmudgeon.