There were a couple of missing semicolons in the first code sample. The demo is fixed and I'll add the correct code to the end of this file.
On another note, Mozilla ignores the width: 100%; It seems to do this because it applies only to the link, so the only background color change is over the text. IE on the other hand handles it the way I want it to by changing the whole td background color.
I've found a few hacks to handle the problem with div width in IE and Mozilla. A browser is supposed to add padding and margin amounts to the width of a div. Example: div {width: 100px; margin: 10px; padding: 10px;) ends up being 140px wide in Mozilla and stays 100 in IE. That means the content area ends up being only 60px in IE.
This is a different problem. Even though the style is applied to the td tag and not to the text Mozilla insists on applying the hover to the text instead of the td.
Oh well, it never ends.
John
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE>CSS Example</TITLE>
<style type="text/css">
<!--
.td-mainmenu-link { /* this is the table cell style everything should be fairly obvious */
background-color: #5394ac;
width: 100%;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-weight: bold;
color: #211f21;
font-size: 13px;
text-decoration: none;
}
.td-mainmenu-link a { /* this sets the values for the links */
/* even though the color and text decoration are set for fonts in the main style we need to set them for links here */
color: #211f21; /* this is the font color of the link */
text-decoration: none; /* this says no underline */
width: 100%; /* this makes sure it fills the whole td otherwise it would just be over the text */ /* this does not work in Mozilla or firefox */
}
.td-mainmenu-link a:hover { /* this is where you set the values for mouseover on the links */
background-color: #ffffff; /* this changes the td background to white */
color: #5394ac; /* this changes the font color to the color that was the td background */
text-decoration: underline; /* this underlines the link on mouseover */
width: 100%; /* this makes sure it fills the whole td otherwise it would just be over the text */ /* this does not work in Mozilla or firefox */
}
-->
</style>
</HEAD>
<BODY bgColor="#5394ac">
<table borderColor="#f4f4f4" cellSpacing="0" borderColorDark="#f4f4f4" cellPadding="0" width="250" border="1">
<tbody>
<tr>
<td class="td-mainmenu-link">Home (index.htm)</td>
</tr>
<tr>
<td class="td-mainmenu-link">&</td>
</tr>
<tr>
<td class="td-mainmenu-link">
<p align="left">Other Products</p>
</td>
</tr>
<tr>
<td class="td-mainmenu-link">Other Gambling Guides (gamblinguide.htm)</td>
</tr>
<tr>
<td class="td-mainmenu-link">Fantasy Sports (fantasy.htm)</td>
</tr>
<tr>
<td class="td-mainmenu-link">The UpperDeck Store (http://clickserve.cc-dt.com/link/click?lid=41000000007129990)</td>
</tr>
</tbody>
</table>
</BODY>
</HTML>