Cell Dividers Showing in Table Border

[ginger23]

Hi,

In IE only, I'm having trouble with cell dividers showing in the top border of a table. It looks fine in Chrome and Firefox. Does anyone have an idea how I can correct it? Here's the page:

http://bridgecorp.net/stlcd/stlcd-capabilities.html

Here's the css for that table:

#capabilities {width: 920px; border: 1px solid #D5D5D5; border-collapse: collapse; margin:25px 0; border-top: 10px solid #C00000; }
#capabilities td {border: 1px solid #D5D5D5; padding: 5px;}
#capabilities th {padding:15px 5px; background: #E0E0E0; border: 1px solid #D5D5D5}

Thanks for any suggestions.

ginger

[Kor]

The problem might be related with the fact that border is rendered otherwise in IE in case of some elements, TABLE included. I would not use the border to have that red top line. Try to give a red top border to the first row. Or to the tbody (even I doubt it will work). Or add an empty top row and give it a certain height and red background...

[ginger23]

Hi Kor,

Tried applying the border to tbody as well as td and tr, but always had the same result with the cell dividers showing.

Finally went ahead and just added an empty row like you suggested, and set the height and background color, and it works pretty well; side borders seem a little off (because the 1px table border is applied to the red section since it's a row), but it's much better than having those dividers show.

Still don't understand why those dividers were showing. I've used a border-top on tables many times and have never seen that happen before. Wonder if it's an IE9 issue.

Anyway, thanks a bunch!

ginger