Innnards: Why are my navigation links broken?

As the author of the WWW FAQ, I regularly answer questions about the workings of the Web. If a question is frequently asked, I simply add an article to the FAQ. But sometimes a question is more detailed, more in-depth— not really a FAQ, but still of interest to others. You'll find those questions, with my answers, here in Innards along with commentary on other web-technology-related topics.

2007-11-17

Q. Why are the navigation links on my band's web page broken in Firefox?

A. The short answer: you're wrapping <a> elements around <td> elements. You can't do that. Some browsers might tolerate it, but it's clearly bad HTML, and you can never be sure it will work in the next version of any browser.

<a> is part of the normal flow of a page and should never appear in the never-never land between <td> elements. Tuck the <a> inside each <td>.

Instead of this: <table> <tr> <a href="otherpage.html"> <td>... An image button goes here...</td> </a> </tr> </table> You must write this:

... An image button goes here..

The long answer, with advice on some additional issues with your HTML and CSS code:

You have a never-closed <right> element which does not exist in HTML at all, and you have a <bodygt; element starting part way down the page which is never closed. If you're going to have a <body> (and you should) it should wrap everything else except for the elements that belong in <head> (you ought to have one of those too).

Also, you are using frames, which prevents users from bookmarking your pages properly and might also prevent Google, etc. from indexing your site properly so your fans can find you. Also, they simply look bad and irritate the user. So don't do that. Instead, put your navigation elements on each page. Don't retype them over and over, just pull them into each page with server side includes, like this: <html> <head> <link href="/main.css" rel="stylesheet" type="text/css"> <title>Page Title Here</title> </head> <body> ... Page heading here ...   ... Page content here ... </body> </html> What should be in navigation.html? A simple and effective version might look like this: <div class="navcontainer"> <div class="navitem"> <a href="/index.html">Home</a> </div> <div class="navitem"> <a href="/nextshows.html">Next Shows</a> </div> <div class="navitem"> <a href="/songlist.html">Songlist</a> </div> ... Etc ... </div> But, you ask, what the heck does all that navcontainer and navitem stuff do? And where did the table element go?

I've junked the table element in favor of CSS (Cascading Style Sheets). Sure, back in 1995 it was okay to use tables to lay out your page— heck, there was no other effective way to do it! But in 2007 there's a much-improved alternative. Style sheets allow us to specify how things should look... leaving only the actual content in the HTML. It's much cleaner, and it's easy to reuse the same style sheet in many pages. What's' more, changing the style sheet instantly benefits all of the pages that refer to it.

Bringing in the style sheet is what that link element up there is all about: <link href="/main.css" rel="stylesheet" type="text/css"> So far, so good. But what do we put in main.css to finish the job?

The div elements in our navigation.html file have class attributes. These specify which CSS "classes" should be applied to them. And in the main.css file, we provide the style information for those classes, like this: .navcontainer { float: left; } .navitem { width: 120px; height: 50px; background-image: url(marble.gif); background-color: black; } a .navitem { color: white; } a:link .navitem { text-decoration: none; } a:hover .navitem { text-decoration: underline; } a:visited .navitem { text-decoration: none; } Notice that we also specify styles for a elements when they appear within a div of the navitem class. Here we're taking advantage of CSS "selectors," a powerful ability to precisely alter the appearance of specific elements at specific times. For instance, we specifically address the appearance of the link when it is inside a navitem and the mouse is hovering over it.

text-decoration: none removes the underline from the links, and color: white changes the usual "link blue" to white. As an added touch to help the user understand what is happening, we restore the underline when the mouse is hovering. In most cases these changes are a bad idea because they can confuse users, but the clear button-like appearance of the navigation links makes it a more reasonable thing to do.

I recommend making all of these changes. However, your most immediate problem is the broken link issue. And if you don't want to address the structural issues with your HTML right now, you can fix that now by moving each inside its respective .

Hope this is helpful!