Css – Firefox 1 pixel bug with border-collapse, workaround

bordercssfirefoxrendering

Is there any workaround for the following "1 pixel to the left" bug?

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">                                   
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">   
<body>
<div style="padding: 50px">
<div style="border: 1px solid red">Table header info</div>
<table style="border: 1px solid green; border-collapse: collapse; width: 100%">
    <tbody>
        <tr>
            <th>Col1</th>
            <th>Col2</th>
        </tr>
        <tr>
            <td>Hello</td>
            <td>World</td>
        </tr>
    </tbody>
</table>
<div style="border: 1px solid red">Table footer info</div>
</div>
</body>
</html>

It looks like this:

Firefox CSS bug

Is there any pure CSS solution to this?

Edit

I was bit unclear about my table so here it is again:

With border-collapse:

Firefox CSS bug

With cellspacing="0" and without border-collapse as suggested:

Firefox CSS bug

So now the borders inside my table are doubled, but I want 1px border across my table.

When I remove 1px border from table I end with:

Firefox CSS bug

Borders are still doubled inside my table.

I could set only right and bottom border for every TD, TH and left border for every first-child in TR to achieve what I want, but I think there's a simpler way?

Best Answer

For those who prefer to keep presentation out of the markup, or who don't have access to the markup, here is a purely CSS solution. Just ran into this problem myself, and tested this solution in FF3.5, IE6, IE7, IE8, Safari 4, Opera 10, and Google Chrome. 

table { border-spacing: 0; *border-collapse: collapse; }

This sets the table to use border-spacing in all browsers (including the culprit, Firefox). Then it uses the CSS star hack to present the border-collapse rule only to IE, which doesn't properly apply border-spacing (you could also include a separate stylesheet for IE with conditional comments if you don't like hacks).

If you prefer using cell-spacing, by all means use it. This is simply offered as an alternative method using CSS.

Related Topic