0

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
5
Views
8 Years
Discussion Span
Last Post by RobRob666
0

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: Fixed formatting

0

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!

0

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.

0

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.

This question has already been answered. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.