Box model hacking

There’s always been different rendering issues within different browsers. From the problems with Netscape 4.2 and Internet Explorer 5 right upto the differences today with Firefox and IE7. But one of the biggest problems that always seems to crop up is when a website has to support IE5.x and the issue of the box model versus the broken box model.

What is the box model?

Firstly I’ll explain what the box model is. The W3C Specifications state that padding, border and margin’s should all be applied outside of the box and therefore should be added to the width of an element to create the total width.

For example:
border: 10px;
padding: 10px;
margin: 10px;
width: 500px;


margin + border + padding + width + padding + border+ margin = total
10 + 10 + 10 + 500 + 10 + 10 + 10 = 560px

However, IE5.x use a broken box model whereby it applies everything within the width and will therefore render the box at 500px with an inner width of only 440px.

The box model hack

I’ve always used the voice family hack as used by Tentek Celik. However, up until recently I’ve never realised that there was a problem using this method until Dan Schulz pointed out to me that this can have severe implications from an accessibility point of view.

It uses a parsing error to pass a separate width to IE5.x whilst providing a different width for standards compliant browsers and certainly works visually but there are other issues.

1. It’s not valid CSS code
2. It uses voice-family and its therefor messing with rules for screenreaders which may make it difficult for blind or visually impaired users.

Other box model fixes

Apply padding/margin and width to separate elements

The easiest solution is not to apply the width and the padding at the same time. Apply the width to an elements container and then apply the padding and margin directly to the children.

Also remember that a block level element will always display at 100% and therefore a width probably won’t be required if one has been set on it’s parent.

This can cause code bloat though where more div’s are inserted into the code simply to get around this problem.

The Simplified Box Model Hack

This method also uses a hack but uses a different method so that accessibility isn’t an issue. Using the code below, we set the padding and width general rule which will be applied by all browsers. Then using the * html selector we target the element width the broken box model width but within this rule we use the backslash hack to reset the width for browsers other than IE5.x.

This hack was suggested to me by Dan as an alternative to the Tantek Celik broken box model.

#sidebar {
padding: 0 10px;
width: 200px;
}
* html #sidebar {
width: 220px;
w\idth: 200px;
}

Conditional Comments

Another widely used techniques is conditional comments. These can be used to specify that part of the HTML will only be rendered by a specific IE browser, in this case IE5.x.

Using the following code we can create a stylesheet with the correct box model width’s and then specify the broken box model width’s within a separate CSS file.

<link href="default.css" rel="stylesheet" type="text/css" />
<!--[if IE 5]>
<link rel="stylesheet" href="ie5.css" type="text/css">
<![endif]-->

Summary

After seeing all the other options I won’t be using the Tantek Celik hack anymore. Where possible, I’d always try and create clean code without the use of a hack so the first option would be my initial suggestion if it’s possible to isolate the child elements and style those.

The hack that Dan suggested seems like a good alternative but I’m inclined to go for the conditional comment solution and simply apply the hack in a separate stylesheet. I’ve tended to stay clear of conditional comments as it seems like it creates more work and probably stems from my feelings about browser sniffing and having to create complete stylesheets for different versions of browsers five or six years ago.

But having seen them all in action and using only a small CSS file to get around this problem, I’ll tend to go for the conditional comments solution in future.