Firefox 1 pixel bug with border-collapse, workaround?

Answer 1

I don't think I've ever heard of a "1px to the left bug," you should upload your code someplace so we can check it and make sure it's not an "I missed something somewhere" bug :) I would also suggest running through your markup with Firebug to determine if there is anything else going awry.

Answer 2

Remove the border-collapse and use cellspacing=0 instead.

<table style="border: 15px solid green; width: 100%"  cellspacing="0">

It happens because when you set border-collapse:collapse, Firefox 2.0 puts the border to the outside of the tr. The other browsers put it on the inside.

Set your border widths to 10px in your code to see what is really happening.

---

edit after OP edit

You can use the old table "border" trick. Set the background color on the table. Set the td and th color to white. User cellspacing = 1;

table {background-color: green;width:100%;}
td, th{background-color:white;}

<div style="padding: 50px">
<div style="border: 1px solid red">Table header info</div>
<table cellspacing="1" >
        <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>

Answer 3

I alos suggest to remove border-collapse: collapse, always use border="0" cellspacing="0" cellpadding="0" when you are using table.

webdevelopertut

Answer 4

Thank God I found this discussion. This stupid "bug" is so annoying!!! Removing 'border-collapse: collapse' and use the old border="0" cellspacing="0" cellpadding="0" did the trick!

Thanks!

Answer 5

yea I just ran into this problem and it was driving me INSANE. i hate this stupid switching to css for everything crap. i dont' mind fixes or good changes but the old cellpadding and cellspacing worked just fine. i'm going to use it until i have no other choice

Answer 6

Thanks for the trick, you save me !

Answer 7

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.

Answer 8

table { border-spacing: 0; border-collapse: collapse; } /* works in FF 3.5 */

Answer 9

I ran into this problem - but in my case it had to do with the table being nested within a div set to overflow:hidden. I removed this and it worked.

Answer 10

Ran into this issue and as a work around. I used

table{border-collapse:separate;border-spacing:1px;border:none;background-color:#ccc;} table td{border:none;}

basically cheated the border by using a background color. Which thus prevented double inside borders.