Box models

Who's do you like?

[TGecho]

I've been wondering, is there anyone else out there who likes the MS version of the box model more than the "standard" one?

Obviously it would be better that they had implimented the "correct" one in the first place, but I can't help but think they had a good idea.

Also, I think I heard that there is an option in the next version of CSS (3?) for which version you want to use. What do you think of this?

(Note: if you would like to bash MS for "inovation", please go somewhere else)

[drbrain]

The original IE box model is evil and wrong, and its not inovative to purposefully (or negligently) implement something incorrectly. CSS1 has a description of what ended up being CSS2's box model, so MS is only standing in the way of progress, but that's no surprise.

[TGecho]

I'm not saying they were right. In fact, I wish they hadn't "inovated". But on a purely hypothetical level, I think their box model is much more practical and usable (except for the fact that it's different than the standard/other browsers).

[drbrain]

Ah, here's the section of CSS3 Box Model you were talking about:

The property 'box-sizing' was first proposed to provide an upgrade path for certain browsers that interpreted 'width' the wrong way. 'Box-width' and 'box-height' are proposed as improved versions of 'box-sizing'. However, newer versions of those browsers have already fixed the bug and it is not clear that these properties are really needed anymore. In cases where they could be useful on their own, it might be both more powerful and easier to use if there were a more generic solution, based on the idea of an extra box around the element, that can have not just its own width, but also other properties, such as borders, position, etc. Such an extra box can result from a transformation (XSLT, behaviors or otherwise, even something expressed in CSS itself), or from an extension of the box model, where every element has an (or as many as needed) implicit parents, addressed by a pseudo-element ':container' or similar.

That paragraph (and what follows) are all in red, so it looks like no consensus has yet been reached. From reading just the section I've clipped, there is no consesus, and the spec writers are just as much looking to a powerful and efficient solution as maintaining backwards compatibility for browsers that are no longer in widespread use.

Note the first line of this paragraph, the IE box model would only be supported to be backwards-compatible, and would default to being off.

Now I should dig through [e-mail] to see further discussion of it...

[drbrain]

Hrm...

Looking through www-style, there seems to be a few pushes towards being able to set the width of an element *including* the margins, which is very cool. Liquid layouts would be much easier to write, because you can easily mix units, and changes to borders, etc. won't force you to recalculate everything.

The proposal I like adds an 'outside' modifier to the width and height properties:

width: 10% outside;

So legacy UAs will ignore that rule when they come across it, so you could have:

width: 12%;
width: 16% outside;

and not have to worry (as much) about how it looks in IE6 or lower.

[grahamstewart]

There was absolutely no innovation from Microsoft here - they just got it wrong, pure and simple.

Their version of the box model doesn't add anything to the standard but it create a difference between IE and other browsers that means some webpages that were developed for IE would look bad in other browsers.

The more cynically minded might think that Microsoft was did this on purpose - especially when you read the CSS boards for a while and hear everyone complaining about how their website is broken in Mozilla/Opera/Netscape but looks fine in IE!

[frank_stahl]

Well, as far as I am concerned, I certainly prefer the way IE handles the box model. (And, by the way, Opery 7 too.)

It seems (from what I conclude from earlier articles on this forum) that IE 5 got the box model "wrong" (though I think they did it on purpose), IE 6 beta had it fixed but the final release version of IE 6 has it "wrong" again.

Also, older versions of Opera had it "right", but Opera 7 then followed the IE box model.

In short: Why I like the IE box model better is simply because it is more intuitive in my eyes -- if I tell a layer to be 200 pixels wide, I usually mean of course that what I can *see* (including border and padding) should be 200 pixels, and not 200 pixels + something.

[TGecho]

Hmm... I never noticed Opera follwing the wrong box model. If you use a strict doctype, IE6 uses the correct box model.

>> In short: Why I like the IE box model better is simply because it is more intuitive in my eyes -- if I tell a layer to be 200 pixels wide, I usually mean of course that what I can *see* (including border and padding) should be 200 pixels, and not 200 pixels + something. <<

Exactly. It may be wrong, but I think it's a much better way of doing it. I hope we are given a choice in the future.

[4serendipity]

if I tell a layer to be 200 pixels wide, I usually mean of course that what I can *see* (including border and padding) should be 200 pixels, and not 200 pixels + something.

I, too, when I first began using CSS thought that this was a bit more intuitive box model. However, I hope that MS continues to support the W3C model, since it is the standard. I've spent far too much time implememnting various hacks to make IE (especially versions 4 and 5) get things right.

I hope we are given a choice in the future.

We are given a choice right now. You can use a Doctype that will put IE 6 into "quirks" mode, which uses that old box model.

A search on "Doctype switch" will retrieve a vast amount of information on this topic.

[TGecho]

I know about the doctype switch. I meant I hope all of the browsers let you choose (in a much better way I might add). I also hope MS stays with the "standard" box model. Even if I don't like it as much, it's still better to have them all doing the same thing.

[grahamstewart]

if I tell a layer to be 200 pixels wide, I usually mean of course that what I can *see* (including border and padding) should be 200 pixels, and not 200 pixels + something

But then you would have the same problem in reverse... if you set a div to be 200px wide then it wouldn't be wide enough to hold a 200px image.

I don't think thats "more intuitive" at all.

[TGecho]

>> But then you would have the same problem in reverse... if you set a div to be 200px wide then it wouldn't be wide enough to hold a 200px image <<
Point taken. I guess that proves there's no one size fits all solution. In other words, we need a choice on an element by element basis!

[frank_stahl]

Hi, grahamstewart,

that's right, but personally I find the IE box model more intuitive. Maybe this varies from person to person.

Anyway, there certainly is a situation where the W3C model definitely is more convenient:

Suppose you have one layer (position: absolute) with a width of 15em. This layer has a black right border of 1px, no margin, no padding.

Now, suppose you want to place another similar layer to the right of it with the same specifications, only the black border is 1px to the left this time, and you want the right border of the left layer and the left border of the right layer to overlap exactly. (Sounds completely wacko, I know, but I actually tried this once. It's seems more reasonable when you take into account that the height of the two layers was not the same. :-)

You can't do this in the "faulty" IE box model, because you would have to place the right layer at something like "left: 15em - 1px;", which is not possible.

(Hm, now that I come to think of it, I didn't try to place the layers with "position: relative". Maybe this helps?)

[moonbiter]

that's right, but personally I find the IE box model more intuitive

Do you come from a desktop publishing/QuarkXpress background, by any chance? I've noticed that most people with that background find the original MSIE version more intuitive.

That asked, I just wanted to point out a couple of really [xs4all.nl] excellent articles [webfx.eae.net] on box-sizing including some possible workarounds.

[frank_stahl]

Hi, moonbiter,

thanks a lot for the excellent links.

To answer your question: No, I'm a web designer by trade, though I used to work with XPress quit a bit in my former life. I think maybe sometimes I just come up with some awkward ideas instead of finding the optimal solution. :-)

It's interesting that the author of the first article you mention also finds the IE box model more intuitive.

However, apart from this I agree with those of you who think we should (be able to) choose which box model we want to use because they both have their specific advantages and disadvantages.