Please Help with Rollover

[liunx]

I use a rollover effect to have the entire cell/text in my navigation table change when you mouse over it on my website

<!-- m --><a class="postlink" href="http://www.yourwebdesignservice.com/">http://www.yourwebdesignservice.com/</a><!-- m -->

However, for whatever reason, in IE the only cell that gets the desired effect is the top cell containg a link back to the homepage. On the rest of the cells, you have to scroll over the actual anchor text in order to achieve the rollover. I want the effect to occur if any part of the cell is mouse-overed, which is the case in the top cell.

This occurs in IE, however in Netscape the effect works fine.

Here is the code for the table:

<tr>
<td align="left" width="160" valign="top">
<table class="nav-table" cellspacing="2">
<tr>
<td><a href=http://www.webdeveloper.com/forum/archive/index.php/"index.html" class="nav-cells">Home</a></td>
</tr>
<tr>
<td><a href=http://www.webdeveloper.com/forum/archive/index.php/"pages/web-design-services.html" class="nav-cells">Web Services</a></td>
</tr>
<tr>
<td><a href=http://www.webdeveloper.com/forum/archive/index.php/"pages/contact.html" class="nav-cells">Contact</a></td>
</tr>
<tr>
<td><a href=http://www.webdeveloper.com/forum/archive/index.php/"pages/testimonials.html" class="nav-cells">Testimonials</a></td>
</tr>
<tr>
<td><a href=http://www.webdeveloper.com/forum/archive/index.php/"pages/portfolio.html" class="nav-cells">Portfolio</a></td>
</tr>
<tr>
<td><a href=http://www.webdeveloper.com/forum/archive/index.php/"pages/graphics.html" class="nav-cells">Graphics</a></td>
</tr>
<tr>
<td><a href=http://www.webdeveloper.com/forum/archive/index.php/"pages/bio.html" class="nav-cells">Bio</a></td>
</tr>
</table>
</td>

Here is the code in my stylesheet:

.nav-table {
background-color: #FFFFFF;
width: 100%;
}
a.nav-cells:link, a.nav-cells:visited, a.nav-cells:active {
display: block;
border: 1px solid #000000;
padding: 5px;
font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
font-weight: bolder;
text-transform: capitalize;
background-color: #FF8C00;
color: #FFFFFF;
}
a.nav-cells:hover {
background-color: #F4C587;
color: #000000;
}

Can anyone tell me why this is happening in IE, and how I can fix it to achieve the desired effect?

Thanks!Try this: * html a.nav-cells {
height:1px;
}thanks. That worked for IE, I will have to check the other browsers.

Just out of curiousity, why do you need to set the height to 1px in order to get that effect with IE?

Thanks!It's because IE's crap (<!-- m --><a class="postlink" href="http://bonrouge.com/br.php?page=faq#haslayout">http://bonrouge.com/br.php?page=faq#haslayout</a><!-- m -->).Haha.

One more thing, why does the navigation table look completely screwed up in Firefox? Any ideas how to fix that?

Thanks!Actually, now it looks like crap in Firefox and Netscape, from the 1px height attribute. Is there any other way around this that anybody knows about?I just set the width attribute for the 'nav-cells' class. That seemed to do the trick in all the browsers. If anyone knows of a better way, I am all ears (or eyes in this case).

Thanks.If you used the code that I posted above, there would be no effect on Firefox or Netscape. They ignore that code - it's for IE only.