The CSS Parsing Error Bug

Bookmark with

StumbleUpon
del.icio.us
Digg it
reddit
Furl
Spurl
ma.gnolia
Yahoo MyWeb
Windows Live

Sponsors

The "Box Hack"

First things first, the "box hack" was proposed and published by Tantek Celik so we need to thank him for that!

Tested in 5xPC

Why is the hack needed?

Obviously because browsers are flippin' stupid. In this case IE5x PC is to blame. This browser incorrectly implements the Box Model, it puts the padding and border of a box within the specified width. so to get pixel perfect layout we can use the hack as a work-around.

The Hack

In the example we want to create a div 350px wide with a 10px border (it's just an example ok!) and padding of 15px. In most browsers this will add up to a width of 400px (10 + 15 + 350 + 15 + 10 = 400px) but not our lovely IE5x!!
So we do the following::

div.cont {
border:10px solid #000;
padding:15px;
width:400px;
voice-family: "\"}\"";
voice-family:inherit;
width:350px;
}

/*for Opera*/
html>body .cont {
width:350px;
}

What happens?

IE5x takes our calculated width (400px) and puts the border and padding on the inside of the div. When it hits the voice family "\"}\"" it will close the style rule. However other browsers which don't have this parsing bug will take the override values which we set below and allow for correct box-model implementation! Note: whenever you use the box hack you also need to use the Opera rule!

For a better explanation please visit www.glish.com/css/hacks.asp

Final note: It is recommended NOT to use fixes such as these, however it works so I don't care! An alternative method is to nest div's and separate the style settings of padding and borders from any width settings. This is described in Advanced CSS Layout - Webreference.com.