CSS Table Borders in IE

Have to set them double what they should be

[MatthewHSE]

Hi everyone,

I'm having a problem with borders on some table cells. (I wouldn't use a table at all for this, if I only knew how to avoid it!) Here's my CSS:

table.headnav {
width: 100%;
border-top: 2px solid #cee1f0;
border-right: 0px;
border-left: 2px solid #cee1f0;
}

table.headnav td {
width: 20%;
border-bottom: 2px solid #cee1f0;
border-right: 4px solid #cee1f0;
text-align: center;
font: 6.5pt verdana;
color: #334dac;
background-color: #93bcdd;
white-space: nowrap;
}

(Yes I know this could probably be done better, and I'll be going over it soon, but for now I just need to get pages looking okay! :)

The problem is that IE, in standards mode, won't display the 2px borders on the td's. In order to get the borders to look right, I have to set them to 4px, which then, of course, ruins things for standards-compliant browsers. How can I make IE display the borders as it should, without using IE conditional statements?

Thanks,

Matthew

[Ryan8720]

Post the code for the table too.

[MatthewHSE]

Here it is:

<table class="headnav" cellpadding="0" cellspacing="0">
<tr>
<td><a href="link1.html">Link 1</a></td>
<td><a href="link2.html">Link 2</a></td>
<td><a href="link3.html">Link 3</a></td>
<td><a href="link4.html">Link 4</a></td>
<td><a href="link5.html">Link 5</a></td>
</tr>
<tr>
<td><a href="link6.html">Link 6</a></td>
<td><a href="link7.html">Link 7</a></td>
<td><a href="link8.html">Link 8</a></td>
<td><a href="link9.html">Link 9</a></td>
<td><a href="link10.html">Link 10</a></td>
</tr>
</table>

[Nick_W]

I'm not certain what you mean but I have the feeling that the answer lies with the border-collapse property [w3.org].

Let us know...

Nick

[MatthewHSE]

I added border-collapse:collapse to my CSS and that did the trick--kind of. It took care of the borders on MOST of the table cells, but the ones on the far right still didn't have the right-edge border on them. So, I added the border on the right edge of the table itself, which achieved the same effect.

Another problem is that the link contained in each table cell uses the following CSS: (I left it out of my original example because I didn't think it was relavent, but apparently it is.)

a.headnav:link, a.headnav:visited, a.headnav:active {
display: block;
width: 100%;
border: 1px solid #334DAC;
font-weight: normal;
text-decoration: none;
border-collapse: separate;
}
a.headnav:hover {
background-color: #fde17d;
text-decoration: none;
}

Also left out of my original example was the fact that each link is actually <a class="headnav" href="...">

Ever since I set my table border to collapse, the left border on all of the links doesn't show in IE, except for the links in the far left table cells. Also, in Mozilla, setting the table border to collapse has caused the right edge of the table to project 1px beyond the right edge of the container div it's in. (Seems to be only Mozilla Firebird that does that.)

I'm pretty pleased with the results I have now, but I'd like to know how to overcome some of these other issues too. If anyone has any ideas, I'd appreciate hearing about them! :)

Thanks,

Matthew