Comparison of the Various Box Model Hacks
September 2002
This page will test your browser's reactions to various box model hacks. Gray blocks are control blocks. They contain no hacks. They should render properly in all browsers. Unfortunately there are browsers that don't even get the basics correctly.
The blocks are background color coded. Each color (except for gray) utilizes a different type of box model hack. Here is the guide to the colors:
Below are two sets of tests. One uses percentage values for width and padding while the other uses pixels.
Note: Because of the character escapes utilized in the Tantek Hack and the SBMH all styles in this page will be ignored by NS4.x.
div.cent0
{
background: #ccc;
}
div.cent1
{
width: 100%;
background: #ccc;
}
div.cent2
{
padding: 0 10%;
width: 80%;
background: #ccc;
}
div.cent-tantek
{
padding: 0 10%;
background: #fcc;
}
div.cent-tantek
{
width: 100%;
voice-family: "\"}\"";
voice-family: inherit;
width: 80%;
}
html>body div.cent-tantek
{
width: 80%;
}
div.cent-sbmh
{
padding: 0 10%;
width: 80%;
background: #ccf;
}
div.cent-sbmh
{
\width: 100%;
w\idth: 80%;
}
div.cent-modsbmh
{
padding: 0 10%;
width: 80%;
background: #ffc;
}
* html div.cent-modsbmh
{
width: 100%;
w\idth: 80%;
}
div.cent-tech1
{
padding: 0 10%;
width: 100%;
width/* */:/**/80%;
width: /**/80%;
background: #cfc;
}
div.cent-tech2
{
padding: 0 10%;
width: 80% !important;
width: 100%;
width/**/:/**/80%;
background: #6c6;
}
div.cent-tech3
{
padding: 0 10%;
width: 80% !important;
width /**/: 100%;
background: #090;
}
div.px0
{
padding: 0;
width: 600px;
background: #ccc;
}
div.px1
{
border-left: 20px solid #999;
border-right: 20px solid #999;
padding: 0 30px;
width: 500px;
background: #ccc;
}
div.px-tantek
{
border-left: 20px solid #c00;
border-right: 20px solid #c00;
padding: 0 30px;
background: #fcc;
}
div.px-tantek
{
width: 600px;
voice-family: "\"}\"";
voice-family: inherit;
width: 500px;
}
html>body div.px-tantek
{
width: 500px;
}
div.px-sbmh
{
border-left: 20px solid #00c;
border-right: 20px solid #00c;
padding: 0 30px;
width: 500px;
background: #ccf;
}
div.px-sbmh
{
\width: 600px;
w\idth: 500px;
}
div.px-modsbmh
{
border-left: 20px solid #990;
border-right: 20px solid #990;
padding: 0 30px;
width: 500px;
background: #ffc;
}
* html div.px-modsbmh
{
width: 600px;
w\idth: 500px;
}
div.px-tech1
{
border-left: 20px solid #080;
border-right: 20px solid #080;
padding: 0 30px;
width: 600px;
width/* */:/**/500px;
width: /**/500px;
background: #cfc;
}
div.px-tech2
{
border-left: 20px solid #080;
border-right: 20px solid #080;
padding: 0 30px;
width: 500px !important;
width: 600px;
width/**/:/**/500px;
background: #6c6;
}
div.px-tech3
{
border-left: 20px solid #080;
border-right: 20px solid #080;
padding: 0 30px;
width: 500px !important;
width /**/: 600px;
background: #090;
}