6

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?

ThinkingStiff
  • 64,767
  • 30
  • 146
  • 239
avakar
  • 32,009
  • 9
  • 68
  • 103

2 Answers2

8

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.

Sebastian Patane Masuelli
  • 4,217
  • 1
  • 18
  • 23
  • and here is the W3C candidate recommendation, also saying the default should be content-box: http://www.w3.org/TR/css3-ui/#box-sizing – Sebastian Patane Masuelli Nov 17 '10 at 22:28
  • That's why Firefox's default stylesheet contains `table { -moz-box-sizing: border-box }` - to override the CSS default. – Alohci Nov 17 '10 at 22:29
  • @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. – avakar Nov 17 '10 at 22:41
  • "This is the box model used by Internet Explorer when the document is not in standards-compliant mode." from https://developer.mozilla.org/En/CSS/Box-sizing : that might be a clue. – Sebastian Patane Masuelli Nov 17 '10 at 23:00
  • @Sebastian Patane Masuelli, though that behavior is not constrained to tables. – avakar Nov 17 '10 at 23:17
  • 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). http://www.iecss.com/ie-8.css. – Sebastian Patane Masuelli Nov 17 '10 at 23:28
  • "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." http://stackoverflow.com/questions/2260844/firefox-safari-setting-height-as-specified-height-padding-border-for-input – Sebastian Patane Masuelli Nov 17 '10 at 23:30
  • still doesn't explain why they are applying it to tables... i hate being stumped – Sebastian Patane Masuelli Nov 17 '10 at 23:34
  • @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! – avakar Nov 17 '10 at 23:59
  • @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. – Alohci Nov 18 '10 at 00:12
  • @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. – avakar Nov 18 '10 at 00:22
  • CSS2.1 says that the default for margin-top and margin-bottom is 0, but you don't expect that of a `

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

    ` element predates CSS.
     – Alohci Nov 18 '10 at 00:43
  • @avakar - 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. – Alohci Nov 18 '10 at 00:56
  • @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? – avakar Nov 18 '10 at 01:07
  • @avakar. The initial values are just that, the values to be applied if no stylesheet - browser built-in, author or user - overrides them. – Alohci Nov 18 '10 at 01:11
  • @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. – avakar Nov 18 '10 at 01:14
  • 2
    @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. – Sebastian Patane Masuelli Nov 18 '10 at 01:22
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.

Alohci
  • 78,296
  • 16
  • 112
  • 156
  • 1
    There is a de-facto standard in the form of the W3C recommendation: http://www.w3.org/TR/CSS2. I was referring to that document. – avakar Nov 17 '10 at 22:24
  • 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. – Alohci Nov 17 '10 at 22:31