Posted by: hybrid8
CSS Box Model - what a pain in the ass - 18/09/2009 03:20
So, over the years there's been a ton of discussion about how this or that browser breaks the CSS box model, etc.. I've always been of the opinion that what's broken has been the standard.
IE for all its faults (oh there are so many) has at least done something here and there that made some sense. Such as the way it treats parts of CSS. It's completely broken in other respects, but at least some basic box construction works how one *might* expect. That's of course contrary to the spec.
That said, I don't think I've seen anything in the spec to illustrate why all browsers that follow it properly would fall down and completely break on such a simple test.
Here it is...
http://twistedmelon.com/testbox.php
I have one box inside another box, both set to the same width. The first, outside box has padding of 1, which means its real width is actually the width declaration plus 2. No problem, this part is dealt with correctly. The second box has only a background color set to distinguish it from the first and in the markup contains some formatted text. This is where the problem starts.
Neither box specifies a height.
Having padding, makes the outside box respect its contents. But the problem is actually with the inner box (now discovered). If the first box were to be defined with no padding, then the second, inner box, completely fills it as one might expect. But it's still a broken case due to the problem with the inner box...
With the example I included below, with padding of 1 pixel, you end up with the correct padding on the sides and about 10 pixels on the top and bottom.
If you add a border to the inner box, it will correctly fill up that bogus padding space. Likewise, if you include some UNFORMATTED text within it (uncomment the two test comments I added) then it also properly fills in the bogus padding.
What part of the CSS spec specifies that browsers should render this atrocity?
If you set a positive padding for both the bottom and top (or padding for all 4 sides) of he inside box, it can also "fix" this issue. This shouldn't be necessary IMO. While there is no height set for the inner box, it should conform to its contents, the formatted text, or rather, the properties of the elements contained within the box.
The inner box in this broken case is conforming to the text itself instead of the margins that are present on the formated elements. h2 and ul have default margins that are clearly not being respected until you pop something else above or below them or the border onto the box or at least a padding of 1 to top and bottom as mentioned.
When you see the boxes in their apparent broken state, the apparent extra padding above and below the inner box are actually caused by the default margins for h2 and ul within the inner box.
So what am I missing? How can any sane person see this is the correct way to handle boxes?
As it stands, I think my solution is going to have to be to always make sure to set a top and bottom padding. When using this with boxes of fixed size, making sure to specify the width and height minus the padding amount (which is another backwards part of the standard). Most of my box elements invariably do end up with top and bottom padding, it just so happens that I was working on a new class and put some temporary content into it before finishing its layout, thereby showing this problem and just generally pissing me off.
Oh... If you don't put text into the inner box, it works fine, though of course you have to specify a height to hold its shape. Height doesn't do squat to fix the problem with text though, so no need to ask if I've tried it.
IE for all its faults (oh there are so many) has at least done something here and there that made some sense. Such as the way it treats parts of CSS. It's completely broken in other respects, but at least some basic box construction works how one *might* expect. That's of course contrary to the spec.
That said, I don't think I've seen anything in the spec to illustrate why all browsers that follow it properly would fall down and completely break on such a simple test.
Here it is...
http://twistedmelon.com/testbox.php
I have one box inside another box, both set to the same width. The first, outside box has padding of 1, which means its real width is actually the width declaration plus 2. No problem, this part is dealt with correctly. The second box has only a background color set to distinguish it from the first and in the markup contains some formatted text. This is where the problem starts.
Neither box specifies a height.
Having padding, makes the outside box respect its contents. But the problem is actually with the inner box (now discovered). If the first box were to be defined with no padding, then the second, inner box, completely fills it as one might expect. But it's still a broken case due to the problem with the inner box...
With the example I included below, with padding of 1 pixel, you end up with the correct padding on the sides and about 10 pixels on the top and bottom.
If you add a border to the inner box, it will correctly fill up that bogus padding space. Likewise, if you include some UNFORMATTED text within it (uncomment the two test comments I added) then it also properly fills in the bogus padding.
What part of the CSS spec specifies that browsers should render this atrocity?
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<style type="text/css" media="all">
body {
background: #000;
}
#outsidebox {
background-color: #fff;
width: 830px;
padding: 1px;
}
#insidebox {
background-color: silver;
width: 830px;
}
</style>
</head>
<body>
<div id="outsidebox">
<div id="insidebox">
<!-- unmarked text - remove comment tag for test -->
<h2>This is a Heading2 inside a box within an outer box</h2>
<ul>
<li>Both boxes are set to the same width </li>
<li>The outer box has padding set to 1</li>
<li>The top and bottom padding break</li>
</ul>
<!-- unmarked text - remove comment tag for test -->
</div> <!-- end inside box div-->
</div> <!-- end outside box div-->
</body>
</html>
If you set a positive padding for both the bottom and top (or padding for all 4 sides) of he inside box, it can also "fix" this issue. This shouldn't be necessary IMO. While there is no height set for the inner box, it should conform to its contents, the formatted text, or rather, the properties of the elements contained within the box.
The inner box in this broken case is conforming to the text itself instead of the margins that are present on the formated elements. h2 and ul have default margins that are clearly not being respected until you pop something else above or below them or the border onto the box or at least a padding of 1 to top and bottom as mentioned.
When you see the boxes in their apparent broken state, the apparent extra padding above and below the inner box are actually caused by the default margins for h2 and ul within the inner box.
So what am I missing? How can any sane person see this is the correct way to handle boxes?
As it stands, I think my solution is going to have to be to always make sure to set a top and bottom padding. When using this with boxes of fixed size, making sure to specify the width and height minus the padding amount (which is another backwards part of the standard). Most of my box elements invariably do end up with top and bottom padding, it just so happens that I was working on a new class and put some temporary content into it before finishing its layout, thereby showing this problem and just generally pissing me off.
Oh... If you don't put text into the inner box, it works fine, though of course you have to specify a height to hold its shape. Height doesn't do squat to fix the problem with text though, so no need to ask if I've tried it.
