I was about to write a post on how Internet Explorer rendered a page in a way that seemed to be more correct than the way Firefox did it. Luckily I did some CSS specification reading first, and thus saved myself the embarrassment of making the controversial statement that IE renders better than Firefox and then being wrong.
But let’s start with the problem. As seen on my site I have a layout with a wide main column and a thinner sidebar. The layout is (or was, as I redid it to make it look better in IE) made with code similar to the following
padding: 5em 0em 5em 0em;
padding: 2em 0em 2em 0em;
<p>Text inside class="page"</p>
<p>Text inside class="sidebar"</p>
The behaviour in IE is to render the sidebar with the width calculated using the width of
<div class="page"> as reference. This results in an effective width of 21% * 77% = 16%. Firefox on the other hand uses the root element (
<body> or one of its ancestors) which has a width of 100%. This gives an effective width of 21% (which is what I intended).
Intuitively IE’s behaviour seems to be the correct one: the width is calculated using the nearest bounding element (i.e. containing block) as parent. But, as can be seen in section 10.1 in the CSS specification, there is a special case when using
If the element has ‘position: absolute’, the containing block is established by the nearest ancestor with a ‘position’ of ‘absolute’, ‘relative’ or ‘fixed’ [...]
Therefore, in this case the containing block should be the root element (or initial containing block as the standard calls it), which is what Firefox uses.
So, too sum up: Firefox and Konqueror follows the specification; IE and Opera (surprisingly) does not.
For the sake of completeness (and not wanting to bash IE and Opera too much), I’ll better mention this (from the Abstract)
CSS 2.1 corrects a few errors in CSS2 (the most important being a new definition of the height/width of absolutely positioned elements [...]
Once again, open source and its mantra release early, release often has proven its superiority!