For those who aren’t familiar with the box model hack, it relates to a problem in the way Internet Explorer 5 decides upon the dimensions of an object, when reading the CSS.
The correct way, according to CSS 2.1 Specifications is: Total width = width + padding + border + margin.
But Internet Explorer 5 sees it like this: Total width = width + margin.
Height also works the same, although it tends to be used less in CSS design.
The original box model hack, by Tantek Çelik, tricks IE5 into thinking the CSS declaration has ended. So we can assign a different value to IE5 first, then override it with our intended sizes for other browsers.
The Box Model Hack:
.box {
padding: 20px; border: 5px solid #ccc;
width: 200px; /*For IE5/win*/
height: 400px;
voice-family: "\"}\"";
voice-family: inherit;
width: 250px; /*For Compliant browsers*/
height: 450px;
}
The version we are going to be using takes advantage of another bug in IE5, which can’t read our backslash (”\”), when positioned next to certain characters (except 0-9, A-F). It works by applying our dimensions to all browsers first, as every CSS browser understands ‘width’ and ‘height’, then compliant browsers read the second set of dimensions (’w\idth’, ‘he\ight’) after. It will then display our results correctly. Leaving us with a hack that uses more meaningful code and less clutter.
The Compact Box Model Hack
.box {
padding: 20px;
border: 5px solid #ccc;
width: 200px; /*For IE5/win*/
height: 400px;
width: 250px; /*For Compliant browsers*/
height: 450px;}
In conclusion there are many Box model hacks out there, so it’s really down to personal choice. Our version is simple and keeps your code tidy.
Edit - 21st July. Browsers that this method isn’t supported on (apart from IE) are as below.
Mac OSX Icab 2.0, OmniWeb 4.2 (fixed in 5.2) & Unix Konqueror 3.0
These browsers aren’t the newest incarnations and may have been fixed since.
