Box Sizing

I just discovered that CSS3 has a box-sizing directive that determines the way the browser handles the padding attribute. This directive appears to be supported by most major browsers.

Adding the following code at the top of a CSS sheet will cause the padding attribute to behave intuitively:

* {
  box-sizing: border-box;
}

I spent hundreds of compensated hours dealing with problems created by the box-sizing model used in Firefox, Opera and Chrome; So, I am really excited to start using this new feature of CSS.

But, I also admit, this new directive makes me angry. There should never have been a market with two different box-sizing models. The reason for the confusing box-models is political.

What happened is: Thugs at W3C wanted to punish Microsoft (which was acting like a monopoly). They encouraged Firefox, Chrome, Safari and Opera to adopt an unintuitive box model that increases the size of a box when one adds padding.

The term "intuitive" refers to the way we expect things to happen in the real world. If you had a 10" box and lined it by 1" padding; you will reduce the interior of the box by an inch on each side. The interior of the box will be 8".

WC3 says adding padding to a box will increase the size of the box ... which doesn't happen.

Netscape, the first popular web browser, used the intuitive box-sizing model. Microsoft adopted this de facto standard for Internet Explorer.

Opera, Firefox and Chrome adopted the unintuitive box model. This means that boxes would be different sizes on different browsers. The two boxes below have width=200px. a 5px border and 10px padding. The box shows up as different sizes on Chrome and IE.

This is how the box would appear on Firefox and Opera.

This is how the box would appear on Netscape and Internet Explorer.

The following line is 200px.

---

Because the WC3 encouraged use unintuitive box-sizing, the boxes would be rendered differently on different browsers.

I am not the only person who had problems with this. Web Designers around the world spent millions of man hours trying to create web designs that would render well under both box-sizing styles.

Politicos at W3C wanted everyone to blame Microsoft. But it was the politicos at W3C who caused the confusion in the market.

I added an article on box-sizing to my primary web page. The article recommends that web designers use the intuitive border-box model.

I recommend that web-designers use the intuitive box model. But in doing so, I believe it important that people remember that the reason that box-sizing is such a challenge on the Web is because the technorati at W3C were playing political games. They wanted to punish Microsoft to reward their friends.