Firefox 1 pixel bug with border-collapse, workaround?

user_127909 0
Viewed 46752

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?

rendering firefox border css
12 Answers

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>
user_1102020

I was bitten by this today. The offered work-arounds didn't work for me, so I found my own:

table { border: 1px solid transparent; border-collapse: collapse; }

This way, you get collapsed borders, no double borders, and everything within the boundaries you desire, without browser-specific rules. No drawbacks.

user_48073280

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.

user_546800

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.

Admin1
Related