Sharepoint 2007 – Quirks mode box model for all browsers with box-sizing

Sometimes you still have to develop for Sharepoint 2007. And, you know, there is no DOCTYPE declaration in standart master pages. Which means, pages are rendered in quirks mode in IE. Which means, magins and padding are counted inside of the element, not outside, as in all other browsers.

Which means, if you have to develop something cross-browser, you add some nested div-s and, for example, just set margins on inner. It works, but it is not pretty and not convenient.

The proper solution from HTML/CSS standpoint – add your own master page, set DOCTYPE there and be happy. Not always possible.
So, there is no way to toggle IE in standarts mode without DOCTYPE. But, maybe, there is something that allows to toggle other browsers into “quirks” mode?
And, actually, there is CSS3 property, which does exactly that: box-sizing.

box-sizing: border-box” sets element’s box model to the model, used in quirks mode = margin, border and padding are counted inside of the element. Some explanations and general of the property is available on css-tricks.

Browser support for box-sizing:

  • Mozilla Firefox: 1+
  • Google Chrome: 0.2+
  • Safari: 3+
  • Opera: 7+
  • Internet Explorer: 8+

As you see, it is quite good in all browsers except IE. But we have quirks mode in IE here, so we do not actually need this property.

So, for example, we have our container on the page, #my_container, and we want it, and everything inside of it to have the same (border-box, quirks in IE) box model in all browsers. How do we accomplish it? Well, it is true, that all browsers support the property, mozilla and webkit do that with vendor prefix (-moz-box-sizing and -webkit-box-sizing). So, the actual declaration will be:

#my_container, #my_container * {
  -webkit-box-sizing: border-box; /* WebKit = Safari, Chrome */
  -moz-box-sizing: border-box; /* Mozilla Firefox */
  box-sizing: border-box; /* Other = Opera, etc. */
}

So, what can we do now with all that?
Well, we can set margins and paddings and don’t think about breaking everything in IE (or otherwise)
And it works in IE6+ and all other modern browsers.
And we can do nice things like specifying width: 50% and padding for the elements at the same time.

So, here are two test pages: without box-sizing: border-box and with box-sizing: border-box.

This entry was posted in CSS, Sharepoint and tagged , . Bookmark the permalink.

2 Responses to Sharepoint 2007 – Quirks mode box model for all browsers with box-sizing

  1. Pingback: Jay

  2. Pingback: max

Leave a Reply

Your email address will not be published. Required fields are marked *