From a funny thread over at Michele’s blog about SalesOnline.ie.

If you take a look at the SalesOnline.ie source you will find gems like:

<td width="14%"height="23" style=" background-color:#006699"
onMouseover="this.style.backgroundColor='lightblue';"
onMouseout="this.style.backgroundColor='#006699';"> <div align="center" class="style41"></div>
<div align="center" class="style39"><a href="index.html">Sales Online </a></div></td>

Now this is the most inefficient use of code I have seen in a really long time. Using JavaScript events to trigger the style changes is, well, just plain crazy. Never mind the obvious errors in the mark-up (missing space between width and height attributes). Good God, the more a look at the worse it gets…

Anyhow, the navigation menu could easily have been rendered with plain anchors within the table cells (not the complete code, but you get the idea I hope):

<table cellpadding="0" cellspacing="0" id="nav">
<tr>
<td width="14%" height="23px"><a href="index.html">Sales Online</a></td>
<td width="19%" height="23px"><a href="advertisersagencies.html">Advertisers/Agencies</a></td>
</tr>
</table>

with CSS:

#nav {
background: #069;
border: 2px solid #999;
width: 100%;
}
#nav a {
display: block;
line-height: 23px;
margin: 0;
padding: 0;
text-align: center;
text-decoration: none;
}
#nav a:hover {
background-color: lightblue;
}

The above code could be refined still further (I only spent a couple of minutes looking at it). You could parse the menu as an unordered list within a <DIV> element:

<div id="nav">
  <a href="#">Sales Online</a>
  <a href="#">Advertisers/Agencies</a>
  <a href="#">Media Owners/Publishers</a>
  <a href="#">Websites & Audiences</a>
  <a href="#">Latest News</a>
  <a href="#">Contact Us</a>
</div>

and CSS:

#nav {
  background: #069;
  border: 1px solid #999;
  width: 888px;
}
#nav a {
  background: #069;
  border: 1px solid #999;
  color: #fff;
  display: block;
  float: left;
  font-size: 10px;
  font-family: Verdana, Arial, Helvetica, sans-serif;
  line-height: 23px;
  margin: auto;
  padding: 0;
  text-align: center;
  text-decoration: none;
  width: 146px;
}
#nav a:hover {
  background-color: lightblue;
}


Ok, so you lose the exact widths (easy to re-apply though), but you gain simplicity and good light mark-up.

Just to mention, you will need to make a few changes to get this to render across browsers. The #nav element width needs to be changed to overcome the IE box model. You could use conditional IE comments to include a separate style sheet for IE.