left edge of table border is cut off in firefox, but not in IE 6/7, and Safari

Question

This looks fine in safari, but not in firefox 3.0.11

Firefox: http://i31.tinypic.com/11s1d00.png

Safari: http://i30.tinypic.com/fnxu2v.png

HTML for the table:

<table class="placement-testing-schedule">
  <tr>
  <th>Day</th>
  <th>Date</th>
  <th>Check-in Begins (Entrance of College Center)</th>
  <th>Test Begins</th>
  <th>Registration Begins</th>
  <th>Seating Availability</th>
 </tr>
 <tr>
   <td>Tue</td>
   <td>8/18/09</td>
   <td>10:45 AM</td>
   <td>10:00 AM</td>
   <td>12:30 PM</td>
   <td><span class="open">Open</span></td>
 </tr>
 <tr>
   <td>Wed</td>
   <td>8/26/09</td>
   <td>10:45 AM</td>
   <td>10:00 AM</td>
   <td>12:30 PM</td>
   <td><span class="open">Open</span></td>
 </tr>
</table>

The css for the table:

/* ---------- Placement Testing ----------- */

.content-body .col-middle table.placement-testing-schedule {
  margin-bottom:10px;
  border-spacing:10px;
}

table { border-collapse: collapse; }

.content-body .col-middle table.placement-testing-schedule td, th {
  border:1px solid #055830;
  background-color:#ffc;
  padding:7px;
}

.content-body .col-middle table.placement-testing-schedule th {
  background-color:#fdbe2f;
}

Anyone know why it is being cut off in firefox? Heck, it even looks correct in IE6 & IE7.

Answer 1

Try adding the border (same one that's on the td,th elements) to the table itself.

Is it just a standard table? Might help to post the HTML as well, so we know exactly what you're working with.

Answer 2

Are you using CSS border-collapse on the table element? Firefox renders that property differently than the other browsers.

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

<table style="border: 1px solid #000;"  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.

Answer 3

This is a bug in Firefox. box-sizing: content-box is not applied to table cells, it currently only applies border-box which includes the border in the height/width, it is non-standard and needs to be fixed.

As it is now, it ignores the border and kind of adds it as a purely visual and not "physical" border. If you want, add a div above the table with a fixed height/width/border and see as firefox renders that div's border above the table border, overlapping it as if it wasn't even there. Now float the div to the left, now the left table border is overlapped by the div's border.

Unfortunately, the only way I have found to reliably make sure the border is visible is to add a margin: 0 1px 1em; to the table.

See Firefox's box-sizing spec and the bug that is causing this: bug 243412.

Answer 4

I had a similar problem (FF 3.6). But the solution in my case was just to add borders to the th elements in the header row (or remove that row entirely), which didn't have the border set. I see that in your case you already have those header row borders though.