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.