Help with tables

[kimmi_baby]

Hi,
I just need some help with tables.

I'm using the tables for a mini menu. My problem is, on rollover, it doesn't actually cover the whole element. Is there a way for it to cover it all? The box is normally grey and on rollover it's red but it still has a grey border. I need it all to be red. Any help would be greatly appreciated.

Here's the code

<table>

<tr class="heading">
<td><font color="#CCCCCC"><b>Commercial Cleaning:</b></font></td>
<td></td>
<td><font color="#CCCCCC"><b>Additional Services:</b></font></td>
</tr>

<tr>
<td><a href="corporate.php" title="corporate/office">Corporate/Office</a></td>
<td><a href="medicaloffices.php" title="Medical Offices">Medical Offices</a></td>
</tr>

<tr>
<td><a href="shoppingcentres.php" title="Shopping Centres">Shopping Centres</a></td>
<td><a href="educationcentres.php" title="Education Centres">Education Centres</a></td>
</tr>

<tr>
<td><a href="industrial.php" title="Industrial/Warehouse">Industrial/Warehouse</a></td>
<td><a href="exit.php" title="Exit/End of Lease">Exit/End of Lease</a></td>
</tr>

<tr>
<td><a href="construction.php" title="Construction/Buildings">Construction/Buildings</a></td>
<td><a href="eventcleaning.php" title="Event Cleaning">Event Cleaning</a></td>
</tr>

</table>
</div>

<div id="services2">

<table>
<tr>
<td><a href="windowcleaning.php" title="Window Cleaning">Window Cleaning</a></td>
<td><a href="blindcleaning.php" title="Blind Cleaning">Blind Cleaning</a></td>
</tr>

<tr>
<td><a href="carpetcleaning.php" title="Carpet Cleaning">Carpet Cleaning</a></td>
<td><a href="teatowelsupply.php" title="Tea-towel Supply Services">Tea-towel Supply Service</a></td>
</tr>

<tr>
<td><a href="pressurecleaning.php" title="Pressure Cleaning">Pressure Cleaning</a></td>
<td><a href="washroomsupplies.php" title="Washroom Supplies Service">Washroom Supplies Service</a></td>
</tr>

<tr>
<td><a href="hardfloorcare.php" title="Hard Floor Care">Hard Floor Care</a></td>
<td><a href="recycling.php" title="Recycling"><i>Recycling - COMING SOON</i></a></td>
</tr>

</table>

CSS

#services {
float:left;
padding-left:20px;
font-size:11pt;
	
	
}

#services2 {
float:right;	
padding-left:20px;
font-size:11pt;
margin-right:340px;
margin-top:-154px;
}


table a {
	display:block;
	
	
}
table a:hover {
color: white; 
background-color: red;
}

td {
background-color:#CCC;
padding:5px;
padding-right:5px;

}


table {
border-spacing:5px;
}

tr.heading td {
background:white;	
	
}

[suresh ma]

hi, i think u are using the Div statment wrongly else
put the table inside the <div >tag then give ur hover control to that div tag

[kimmi_baby]

Thanks for your reply :)

How would I do that?

[simplypixie]

You are not changing the background colour of your td which also has padding. I am not sure why you are applying the a:hover to the whole table rather than the tr or td only but add td a: hover as well and it may help:

table a:hover, td a:hover {
color: white; 
background-color: red;
}