Member Avatar for RobRob666

In preparation for asking this question, I reduced my actual code to mostly only its essentials as related to the phenomenon. I also changed colors, etc., so that it could hopefully be easily observed. Next are my test CSS and HTML code.

.test-outer { border: 3px solid white; width: 111px; }
.test { border-spacing: 0; width: 100%; border-collapse: collapse; }
.test td { background-color: blue; border-bottom: 3px solid pink; }
.test td a { display: block; height: 100%; padding: 3px; text-decoration: none; }
.test td a:link, visited { color: yellow; }
.test td a:hover { background-color: silver; }
<div class="test-outer">
   <table class="test">
      <tr><td><a href="test.html">data 1</a></td></tr>
      <tr><td><a href="test.html">data 2</a></td></tr>
      <tr><td><a href="test.html">data 3</a></td></tr>
   </table>
</div>

If you hover over a cell, you will notice the anchor block displaying silver. Fine. But notice that during a hover, there is still a blue outer border (1 pixel wide). This blue outer border I would like to eliminate, but do not know how.

I have tried “border-collapse: collapse”s and “border: 0”s all over the place, plus messed with margins, paddings, and everything else I could think of. I’d like the anchor block to be the same as the hover block without messing up anything else. I’m also trying to have code that works in both the modern Firefoxes of the world plus the older IE’s, and that's how I discovered this method of hovering the anchor block.

  • 2 Contributors
  • 4 Replies
  • 132 Views
  • 2 Days Discussion Span
  • Latest Post Latest Post by RobRob666

Dani AI

Generated

Short summary and root cause: the thin blue strip you see while hovering is the table cell itself showing through. reduced the case nicely, and ’s observation that removing the cell’s interior spacing fixed it is exactly right. The anchor’s hover background only paints its own box; any cell padding or table spacing around that box remains the cell’s background color and will show as a narrow band.

What’s happening in plain terms: tables and cells have their own box and spacing rules from the browser’s stylesheet. If the TD keeps a background and some interior space, an inner block-level link won’t automatically cover that padding area. The visual result is the hover color stopping short of the cell edge and the cell background peeking out.

Practical options and best practice: the cleanest approach is to eliminate the cell’s internal gap and let the anchor fully cover the visual area, or move the normal (non-hover) background onto the anchor so hover toggles the same element that supplies the color. Use CSS (preferred) rather than presentational table attributes for maintainability. If supporting very old IE, be aware that percentage heights or block sizing can behave differently there and you may need an IE-specific fix to make the link fill the cell.

Quick debug checklist: open devtools and inspect the computed padding/background on the TD; temporarily make the TD background transparent to confirm the anchor covers the entire cell; if that proves it, move spacing into the anchor or zero the cell padding. For reference on how browsers handle these properties, see MDN’s pages on padding and table border handling: padding and border-collapse.

Recommended Answers

All 4 Replies

Member Avatar for dipak_passion

Hello!

Just add cellpadding to the table tag like :

      <table class="test" cellpadding="0">

OR

add padding:0; .test td { background-color: blue; border-bottom: 3px solid pink; padding:0; }

it will solved the issue.

regards

Edited by Reverend Jim because: Fixed formatting
Member Avatar for RobRob666

Beautiful, dipak_passion! I'm using your 3rd padding. I can't imagine why I couldn't make that work before, because I thought I'd tried it. Now it's working. Thank you much!

Member Avatar for dipak_passion

Beautiful, dipak_passion! I'm using your 3rd padding. I can't imagine why I couldn't make that work before, because I thought I'd tried it. Now it's working. Thank you much!

Welcome! I will be thankfull if you add a reputation to me.

Thanks again.

Member Avatar for RobRob666

I will be thankfull if you add a reputation to me.

I don't yet know what that means, but I will look into it, and then likely do it.

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.