Member Avatar for 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;	
	
}
  • 3 Contributors
  • 3 Replies
  • 115 Views
  • 14 Hours Discussion Span
  • Latest Post Latest Post by simplypixie

Dani AI

Generated

The grey “border” you see on hover is the TD itself: the cell has a background and padding, and your link only fills the cell’s content box. As pointed out, changing the link hover alone won’t cover the TD padding. Two practical fixes work reliably.

First (preferred): move the padding and the background from the TD onto the A. Make the TD transparent and give the anchor the padding and background so the link’s hover fills the whole visible area. This also makes the entire cell clickable and keeps layout stable. Wrapping each link in a div (as suggested) is effectively the same idea but not necessary when the anchor can be styled instead.

Second (simpler): keep your TD padding but apply the hover to the TD itself so the whole cell changes color on hover. This is the least invasive change and fixes the visible grey edge immediately:

/* highlight the entire table cell on hover */
#services td:hover, #services2 td:hover {
  background: #c00;
  color: #fff;
}
#services td:hover a, #services2 td:hover a {
  color: inherit; /* keep link text white on hover */
  text-decoration: none;
}

Extra tips: border-spacing creates gaps between cells (you currently use 5px); if you want flush cells use zero spacing or use border-collapse depending on the visual you want. Replace deprecated <font> tags with CSS, and consider using a semantic <ul>/<li> for menus instead of a table for better accessibility and responsiveness.

Recommended Answers

All 3 Replies

Member Avatar for 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

Member Avatar for kimmi_baby

Thanks for your reply :)

How would I do that?

Member Avatar for 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;
}
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.