Why is box sizing set to border-box for tables in Firefox?

Question

I found that making a table with

<table style="padding-left: 100px; width: 200px">

makes the content only 100px wide. Further investigation revealed that Firefox has

table { -moz-box-sizing: border-box };

rule in its default stylesheet. Is there a reason for that? Are tables supposed to be sized this way according to the CSS standard?

Sheepshearing

Answer 1

that's strange, i see that you are right, even though mozilla itself says the default value should be content-box. Bug? Seems your only choice have to reset this in your css.

Tamis

and here is the W3C candidate recommendation, also saying the default should be content-box: w3.org/TR/css3-ui/#box-sizing – Tamis

That's why Firefox's default stylesheet contains table { -moz-box-sizing: border-box } - to override the CSS default. – Misspell

@Alohci, my question is why. I don't think it's unintentional -- you don't accidentally drop a line like that into a stylesheet. With Firefox striving to be compliant with the standard, I'm curious as to why they chose to defy it in this instance. – Sheepshearing

"This is the box model used by Internet Explorer when the document is not in standards-compliant mode." from developer.mozilla.org/En/CSS/Box-sizing : that might be a clue. – Tamis

@Sebastian Patane Masuelli, though that behavior is not constrained to tables. – Sheepshearing

right, it applies to all elements that accept width and height. I am as confused as you are. table is also set to box-sizing: border-box; in IE8 (but not 7). iecss.com/ie-8.css. – Tamis

"Form elements have traditionally had a width/height that includes their padding/border, because they were originally implemented by browsers as OS-native UI widgets, where CSS had no influence over the decorations. To reproduce this behaviour, Firefox and others render some form fields (select, button/input-type-button) with the CSS3 box-sizing style set to border-box, so that the width property reflects the entire rendered area width including the border and padding." #2261344 – Tamis

still doesn't explain why they are applying it to tables... i hate being stumped – Tamis

@Sebastian, nice reference question! I would +10 you for that and another +10 for noticing IE8 behaves the same on purpose. I am at least going to green-check you :) Thanks! – Sheepshearing

@avakar, @Sebastian - The reason why, is what I said in my answer - that's what browsers have always done, so if they stopped doing it now, many, many web pages would break in their browsers. It only with CSS3 or the vendor specific equivalent that it's been possible to explicitly say it. It's not in the CSS2.1 Appendix D because there was no way to describe the behaviour in CSS2.1. – Misspell

@Alohci, I don't understand what you're saying. CSS2 says that width specifies content width (i.e. without borders and paddings). In other words, CSS2 basically guarantees the behavior of box-sizing: content-box. Firefox's stylesheet breaks that guarantee. – Sheepshearing

CSS2.1 says that the default for margin-top and margin-bottom is 0, but you don't expect that of a <p> element, do you? The Firefox default stylesheet is there specifically to override those CSS defaults with layout that conforms to the expectations of users, based on the layouts that have gone before. Remember that the layout of the <table> element predates CSS. – Misspell

@Sheepshearing - Ah, maybe I've misunderstood what you're saying. I think this is a situation where CSS3 is superseding CSS2.1. CSS2.1 was flawed - that's probably why it's still a Candidate Recommendation - because it couldn't describe some of the layout, like for tables, without breaking lots of web pages. While you may be right that CSS2.1 did imply that guarantee, CSS3 removes it. – Misspell

@Alohci, no actually, it's me who failed to understand you from the beginning. I do understand now, though, and it kind of makes sense. The CSS specification does say, that UA should apply its own stylesheet. In that case, though, what are the initial values in the standard for? – Sheepshearing

@avakar. The initial values are just that, the values to be applied if no stylesheet - browser built-in, author or user - overrides them. – Misspell

@Alohci, well, yeah, but if the browser is allowed to override them (with its stylesheet), then it seems useless to define their values. You could simply say "initial values are defined by the UA" and be done with it. – Sheepshearing

@Alohci, @avakar: thanks for the enlightment! i've learnt more about default UA stylesheets and their Bizantine reasoning. but hey, that's why we get the big bucks, no? imagine a world where CSS was intuitive, followed a single standard, and was reliable cross-platform; who would need css ninjas? Thank you, Browser vendors, for making my field an obscure, arcane and profitable one. – Tamis

Answer 2

There really isn't any HTML or CSS standard that says how HTML should be styled by default. That's why reset stylesheets are so popular. Largely, each browser just goes with the prevailing behaviour of the other browsers. This would go back to the early Netscape and IE behaviour when tables were first introduced.

Misspell

There is a de-facto standard in the form of the W3C recommendation: w3.org/TR/CSS2. I was referring to that document. – Sheepshearing

I know the section you mean. That's not a requirement - it's an approximated description of what browsers do (or did). It's well known for not being terribly accurate. – Misspell