Please Help with Rollover

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

[url]http://www.yourwebdesignservice.com/[/url]

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:

[CODE]<tr>
<td align=”left” width=”160″ valign=”top”>
<table class=”nav-table” cellspacing=”2″>
<tr>
<td><a href=”index.html” class=”nav-cells”>Home</a></td>
</tr>
<tr>
<td><a href=”pages/web-design-services.html” class=”nav-cells”>Web Services</a></td>
</tr>
<tr>
<td><a href=”pages/contact.html” class=”nav-cells”>Contact</a></td>
</tr>
<tr>
<td><a href=”pages/testimonials.html” class=”nav-cells”>Testimonials</a></td>
</tr>
<tr>
<td><a href=”pages/portfolio.html” class=”nav-cells”>Portfolio</a></td>
</tr>
<tr>
<td><a href=”pages/graphics.html” class=”nav-cells”>Graphics</a></td>
</tr>
<tr>
<td><a href=”pages/bio.html” class=”nav-cells”>Bio</a></td>
</tr>
</table>
</td>[/CODE]

Here is the code in my stylesheet:

[CODE].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;
}[/CODE]

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

Thanks!

Also in #CSS _↴