The Window Box Step

Unfortunately, not all browsers were created equal. And not all boxes are equal. Win IE5 and Win 6 in Quirks Mode have a different box model. The "width" is interpreted to cover all of the space needed to display the element content, padding and border. To see the effect of the IE5 box model view this page in either IE5 or IE6.

Lets revisit our progression.

First create a 300 pixel square box

Things still look ok here, but something is different.

Next, add a 260 pixel wide paragraph inside box inside

Can you see what is wrong yet

Lets add some margins to the inside box

Adding 20 pixels to each side should center the paragraph within the outer box.

We don't really have a 300 wide pixel box to play in. The border on the outer box is occupying 6 pixels.

Lets add a border to the inner box

5 Pixels of border have been added to each side of the paragraph. And IE is making adjustments to make things fit.

Now lets add some padding to the inner box.

Things aren't getting better but they are not getting worse either

Alright, let's fix this mess

Resetting the width does not help us here because we are dealing with entirely different "widths"

Holy Box Model Batman that looks terrible, how do we fix that?

Well I promised not to get into hacks in this class but you can find some good information managing the two box models on the Macromedia website. My advice is to only use padding on the outermost element when possible, to avoid using width and padding together, and when visually it does not make a difference use margins instead of padding. You can often achieve good comprimizes by using percentages to cover widths, which also adds to accessibility by making the page reflow to fit the window. Many times it just comes down to playing with your design. At least if you know why things are behaving differently you can adapt strategies to avoid the problem.

Next

Previous

Index