Borders not shown in Firefox with border-collapse on table, position: relative on tbody, or background-color on cell

css firefox border
Peter picture Peter · Sep 22, 2011 · Viewed 44.3k times · Source

Consider the following HTML:

Notice that the last cell has a left and a right border in its inline style. You (or at least I) would expect this to be visible. In IE, this is the case. But in Firefox (6), this is not. You can solve this by:

  • Removing position relative on div.datagrid table tbody in the CSS
  • Changing div.datagrid table tbody to div.datagrid table in the CSS
  • Removing the background-color on table.data td.priceCell in the CSS
  • Removing the border-collapse on div.datagrid table in the CSS

This is a simplified version of our code; we also solved it (by choosing option 2). But what I'm wondering about is:

  • Is this a bug in Firefox?
  • Is this a bug in IE?

And especially: what is the reason Firefox wouldn't show the borders when the CSS is as it is?

Answer

medoingthings picture medoingthings · May 2, 2013

Just ran into this issue and came to a css only solution: just add background-clip: padding-box to your td element.

See this article for more information: https://developer.mozilla.org/en-US/docs/CSS/background-clip

Related questions

Firefox 1 pixel bug with border-collapse, workaround?

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.…

Read More
Hide scroll bar, but while still being able to scroll

I want to be able to scroll through the whole page, but without the scrollbar being shown. In Google Chrome it's: ::-webkit-scrollbar { display: none; } But Mozilla Firefox and Internet Explorer don't seem to work like that. I also tried this …

Read More
Targeting only Firefox with CSS

Using conditional comments it is easy to target Internet Explorer with browser-specific CSS rules: <!--[if IE 6]> ...include IE6-specific stylesheet here... <![endif]--> Sometimes it is the Gecko engine (Firefox) that misbehaves. What would be …

Read More