Border-Collapse Problem on Multiple Browsers

Hi everyone,

I’m seeing a problem with borders in a table when using the border-collapse:collapse rule and I’m not sure if it’s my CSS or the browsers that are causing the problem.

Since there is a wide variation of rendering across browsers I am guessing it’s a wide-spread browser problem (but that seems unlikely).

The only browser that seems to render it correctly is Firefox. I don’t know if Firefox is actually rendering it correctly but its rendering is what I was hoping to see in all browsers.

As an aside, IE 8 will render the same as Firefox but only if I put IE 8 in “compatibility mode”. The screenshot for IE 8 is not in compatibility mode.

The link below is to an HTML5 page containing a live version of the table along with screenshots from all the browsers I tested with. of course, if you want to see the HTML and CSS just do a “View Source” on the page.

If anyone can explain what the expected CSS behavior is and why, and which browser renders correctly, if any, I would appreciate it.

Thank you very, very much.

http://www.csharpies.net/qr309/bingo.html

Hi,

I think this is a case where the specs are not defined precisely. The background of a table is not defined:

CSS 2.1 does not define where the edge of a background on a table element lies.

Therefore I guess some UAs may take it from inside the borders edge while some obviously think it is under the borders edge and hence the overlap.

The non-semantic solution to your problem would be to remove the border from the table and apply it to a floated parent div instead.

I often see these types of discrepancies in tables and alignment of borders always seems to be out. If you want to work out who is right then read this but I gave up half way through the border conflict resolution section:)

The font family and size is different. Set these values and see if the browsers render the same.
Have you done any css resetting?
Also have you used a valid DTD?