hit area on rollover

[Adie]

Can anyone tell me why my rollover menu has two distinct hover "hit
areas" for links.

I have a table, as such:
<table width="75%" border="0" cellpadding="0" cellspacing="0">
<tr bgcolor="#F1D274">
<td width="20%" height="10"><div align="center"><a
href="index.html" class = "bgrollover">Home</a></div></td>
<td width="20%" ><div align="center"><a href="products.html" class
= "bgrollover">Products</a></div></td>
</tr>
</table>

and the first cell is a complete link hit area (where ever i select in
the cell causes :hover" and the second cell only has a hit area over
the text???

The css is thus:
a.bgrollover {
background-color:#F1D274;
color: #000000;
display: block;
font-family:Tahoma;
font-size:10pt;
text-decoration:none;
}

a.bgrollover:hover {
display: block;
background-color: #FF0000;
color: #FEF7DE;
}

Anyone know whats causing this oddity?