Welcome to WebmasterWorld Guest from

Forum Moderators: incrediBILL

Message Too Old, No Replies

images that are links don't work in Firefox

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

New User

5+ Year Member

joined:Oct 15, 2011
votes: 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>

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!
7:26 am on Oct 15, 2011 (gmt 0)

Senior Member

WebmasterWorld Senior Member penders is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:July 3, 2006
posts: 3123
votes: 0

In principle, I think what you have should work, however, with setting
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;}
9:39 am on Oct 15, 2011 (gmt 0)

Senior Member from US 

WebmasterWorld Senior Member tangor is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:Nov 29, 2005
votes: 538

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.

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

Featured Threads

Free SEO Tools

Hire Expert Members