Clansphere :: FREE Clan Content Management System

padding: 0px 20px 0px 20px

What is the Box Model Hack

In basic terms, the box model hack uses bugs in Internet Explorer to force it to use CSS tags that other browsers will ignore.

If you have a div like this:
div {
width: 100px;
padding: 10px;
border: 10px solid #000;
}
It will be 140px wide in valid browsers, and 100px wide in Internet Explorer.

To fix this you need to set up two div selectors, one which defines the width for compliant browsers at 100px and one for IE at 140px.

div {
width: 100px;
}
div {
\width: 140px;
w\idth: 100px;
}

The first line "width: 100px;" is for browsers like Mozilla and Opera that render correctly. Opera and other browsers choke on the escape character (\) and so will ignore the second and third properties. The second property "\width: 140px;" is for IE 5 and 6/quirks mode. The final line "w\idth: 100px;" will be read by escape friendly browsers (including IE 6 in non-quirks mode) and set the width back to 100px. The problem here is that Netscape 4 crashes when it sees escape characters in the property names, so this isn't done yet.