Double Border Issue with Border-Collapse

[mamamia]

Hi All,
I'm hoping someone can help me out with this...

I'm trying to build a horizontal menu system. I have tried this with both a complete CSS solution (i.e. using ul, li, and a tags) and table solution (still utilizing CSS classes for the table entities) and am having the same problem with both methods. The issue is that I get the double border effect on the last cell of my table.

The problem stems from the fact that my main wrapper class has a border, the navigation menu extends the full length of the wrapper and when it reaches the last cell it places a border for the table cell and then there is the border of the wrapper.

The problem is fixed if I put "display: table; border-collapse: collapse". However, since I want the full area of my table cells to be linkable (not just the text within the table), I need to put in "display: block". Now this is what breaks everything and causes the double border issue. Apparently border-collapse has no effect if "display: block" is set.

Any ideas how to alleviate this?

Thanks in advance.

mamamia

[abduraooft]

mamamia, all your typed text is worthless unless you give a sample code or a link to your page. Sorry!

[mamamia]

Ok sorry. Here is basically what I have....

<style type="text/css">
.wrapper {width: 955px; border: 1px Solid Black;}

table.topMenu {width: 955px; height: 102px; border-collapse: collapse; }
table.topMenu tr{}
table.topMenu td {width: 120px; border-right: 1px Solid Black; border-collapse: collapse;}
table.topMenu td a, table.topMenu td a:visited {display: block; padding-top: 42px; height: 60px; }
</style>

<div class="wrapper">
<table class="topMenu" cellpadding="0" cellspacing="0">
<tr>
<td><a href="/">Home</a></td>
<!-- total of 6 td entries -->
</tr>
</table>

<!-- Rest of code -->

</div>


The basic problem is that "border-collapse: collapse" has no effect when I have "display:block" (even though it is on the anchor tag); I get the double border effect on the very last table cell. However, I need the "display: block" because I want the full area of the table cell to be linkable--not just the link text.

I have tried building this whole thing with no tables, and just using ul/li/a tags and css. But I run into the exact same issue.

[abduraooft]

Your intention is still not clear to me. Why do you need to apply border-collapse for tds? I don't see any considerable difference in border by adding/removing display:block; Or td's border-collpse Could you upload a sample picture of the effect in your mind?

[mamamia]

The border-collapse is simply my attempt at eliminating the double border effect at the very end where the td right border touches the wrapper border and shows as two lines instead of one. With the current design it has absolutely no effect. So imagine as if I hadn't even put it in.

The purpose of the "display: block" is so that my td is linkable as a whole--not just the href text within it. Notice that the td is about 120px (width) X 102px (height). My goal is to get that whole td square linkable, not just the text within it. The only way I know how to do this is assigning "display: block" to the a tag.

If I get rid of "display: block" then the double border effect goes away since I have border-collapse. However, I then lose the ability to have the td as a link and only the text within the td is a link.

Hope this helps.

[abduraooft]

my attempt at eliminating the double border effect at the very end where the td right border touches the wrapper border and shows as two lines instead of one.If we apply border-collapse: collapse; to a table (only to this required) the above mentioned effect would be achieved!

[mamamia]

If we apply border-collapse: collapse; to a table (only to this required) the above mentioned effect would be achieved!

border-collapse: collapse is already applied to the table.topMenu and it has no effect (I don't think an additional declaration of it on the td should cause a problem.)

The reason that it has no effect is that my table is not really setup to behave like a table, but rather a block. But I need the block effect as well. So I am in a catch-22.