homepage Welcome to WebmasterWorld Guest from
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member

Home / Forums Index / Code, Content, and Presentation / HTML
Forum Library, Charter, Moderators: incrediBILL

HTML Forum

images that are links don't work in Firefox

Msg#: 4374789 posted 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>

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!



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

Msg#: 4374789 posted 7:26 am on Oct 15, 2011 (gmt 0)

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;}

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

Msg#: 4374789 posted 9:39 am on Oct 15, 2011 (gmt 0)

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.

Global Options:
 top home search open messages active posts  

Home / Forums Index / Code, Content, and Presentation / HTML
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved