12

Ever since I updated FF to 3.6.12 (or at least that's when I noticed the issue), I am dealing with an unusual situation. While Chrome and Opera use the content-box box model, Firefox seems to have started using border-box. Right now I'm styling some table headers with a height of 39px and a 1px border on the bottom (total height: 40px).

It displays OK everywhere, save for FF, where the content box is 38px high.

If it's of any use, I'm on Windows 7 Professional 32 bit, but also noticed this on my colleague's computer (Windows XP Professional).

My CSS (simplified for readability) is only this, nothing fancy:

table { border-spacing: 3px; }
table tr th { height: 39px; border-bottom: 1px solid red; }

Setting the box-model explicitly to content-box has no effect, as if border-box was set internally with !important... (sort of like what Chrome does with autofill form field background)

This 1 pixel difference is not something that will take my styling apart (I'm not making it pixel-perfect), but I'm still really upset about my FF changing its behaviour. So, my questions are:

  1. Does it happen in your case as well? (if not, it's probably some bug in my CSS)
  2. If so, has the FF team decided to go against the W3C and change the default box-model?
  3. If so, do you happen to know why and where I can find some info about it (Google refused to help)?
Kyle
  • 65,599
  • 28
  • 144
  • 152
mingos
  • 23,778
  • 12
  • 70
  • 107
  • Where are you getting the height of 38px from? – roryf Nov 18 '10 at 13:46
  • Can you provide a link? I'm using the same OS as you. I'd like to see this. – Kyle Nov 18 '10 at 13:47
  • Also, how are you measuring the px height? – Kyle Nov 18 '10 at 14:06
  • I just tested this using Chrome, FF and Pixelruler. I detect a 1px difference between the two browsers. Chrome: 40px, Ff; 39px. – Kyle Nov 18 '10 at 14:14
  • @Kyle: I use Firebug. It shows the measurements as well. My coleague used Pixelruler. The link is not available, since it's on the internal server of the company I work at. @roryf: in the CSS I specify the height of 39px. It's the layout I received from the design guys, so I'm just doing the CSS the way they designed it. 39px content box and 1px border. I have no idea why Firefox cuts the content box height by one pixel, giving me 38px. That's what I'm trying to find out by posting this question ;) – mingos Nov 18 '10 at 21:55
  • How are you setting this to "content box" and "border box"? I've never heard of people doing such a thing. Does this mean you are playing with the doctype? I'm confused. In any case, I don't see any differences. – Rob Nov 20 '10 at 19:20
  • @Rob: http://www.quirksmode.org/css/box.html – Domenic Nov 20 '10 at 19:29
  • there's a SO discussion on FFs use of the box-sizing:border-box issue here, if anyone's curious: http://stackoverflow.com/questions/4209601/why-is-box-sizing-set-to-border-box-for-tables-in-firefox – Sebastian Patane Masuelli Nov 20 '10 at 20:00
  • New pages should never use quirks and I forgot to also question whether he was talking about using CSS3. There is no CSS3 in his example so I assumed not. – Rob Nov 20 '10 at 20:50
  • @Rob: I try not to use CSS3 at all, save for `border-radius`, which doesn't work in IE, but looks acceptable nonetheless. Although I am tempted to use CSS3, since in my country IE is used by merely around 25% od internet users ;). – mingos Nov 21 '10 at 03:52

3 Answers3

9

OK, User Agent Style sheet arcana coming your way:

for some reason, FF sets table { -moz-box-sizing: border-box } in its default stylesheet. As does IE8 (but not 7). Other browsers use the default box-sizing: box-content. I have no idea why FF has done this, against the W3C defaul value. there's a long discussion about this here: Why is box sizing set to border-box for tables in Firefox?.

to override it, use the -moz prefix: i.e. table { -moz-box-sizing: content-box }

Community
  • 1
  • 1
Sebastian Patane Masuelli
  • 4,217
  • 1
  • 18
  • 23
  • Then I'm still confused. In the comments, I asked if he used CSS3 and he says no, yet this is selected as the best answer by using CSS3. – Rob Nov 21 '10 at 11:02
  • @Rob: Oh, it's CSS3? Sorry, then, my bad. -ms-box-sizing is recognised by IE, so I assumed it was CSS2.1 ;). – mingos Nov 21 '10 at 20:12
  • @Rob, @mingos technically, mingos did not set out to use CSS3, but the default style sheet that firefox uses does, forcing us to have to use it in this case. props to avakar for bringing up the issue in SO in the first place. – Sebastian Patane Masuelli Nov 21 '10 at 20:33
2

Maybe inverting the problem would be a good solution: just try for border-box in all cases!

table tr th
{
    height: 40px;
    border-bottom: 1px solid red;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}
Domenic
  • 110,262
  • 41
  • 219
  • 271
  • It definitely might work, but solving the issue is not something too important for me right now, I just seek knowledge :). – mingos Nov 21 '10 at 03:33
2

OK so I did some tests on this, the TR's all have the same height in Chrome 8, Opera 11 and Firefox 4.

Firefox 4pre8

alt text

Chrome 8

alt text

Opera 11

alt text

In Opera and Firefox the TH has a height of 38px instead of 39px, it seems that WebKit has a bug here which reports the incorrect height on the TH while still applying the same rules as the other two Browsers.

And a quick overlay of the 3 different renderings proved that there's no difference besides the text rendering and the width:
alt text

Have you actually done a graphical test? Just blindly trusting the tools can be misleading.

Ivo Wetzel
  • 46,459
  • 16
  • 98
  • 112
  • Tested the OP's scenario graphically (measured the height in screenshots with Fireworks) and can confirm that in FF3.6 the height is 39px total (38px content + 1px border). – Tom Nov 20 '10 at 21:03
  • yes, I checked Firebug's indications only after I noticed a visual difference (there was a background image in my case). – mingos Nov 21 '10 at 03:31