September 2002
This page will test the reactions of your browser to three new box model hacks. For a detailed description of the syntax and how the hacks work please visit the alternate box model hacks page.
Below are two sets of tests. One uses percentage values for width and padding while the other uses pixels. Do email me your test results. Please specify browser, version number, and platform. Screenshots whenever possible would be invaluable.
All the test blocks inherit the following CSS:
div
{
margin: 1em 0;
font-family: monospace;
text-align: justify;
}
Note: The test blocks below may or may not work on NS4.x.
The first three blocks below should have a gray background. They do not contain any hacks. The last three blocks each use a different box model hack. They should have a light green background and should be as wide as the control block even on IE5.x/Win. If any of them is not as wide as the control then the hack is failing. Resizing the browser should not affect the total width.
This block serves as the control. Neither width nor padding has been declared. CSS for this block is as follows:
div.cent0
{
background: #ccc;
color: #666;
}
This block should be as wide as the one above. It has a width set to 100%. There is no padding declaration. Therefore, content width is equal to total width. All browsers should have no problem displaying it. CSS as follows:
div.cent1
{
width: 100%;
background: #ccc;
color: #666;
}
This block has a width of 80% and a left and right padding of 10%. Browsers that correctly implement the CSS box model will display a block with a total width of 100%, and therefore should be as wide as the two above. But IE5.x/Win will display it as a block with only 80% total width. CSS as follows:
div.cent2
{
padding: 0 10%;
width: 80%;
background: #ccc;
color: #666;
}
This block employs technique 1 to give IE5.x/Win a width value of its own while supplying other browsers another value. CSS as follows:
div.cent-tech1
{
padding: 0 10%;
width: 100%;
width/* */:/**/80%;
width: /**/80%;
background: #cfc;
color: #060;
}
This block employs technique 2 to give IE5.x/Win a width value of its own while supplying other browsers another value. CSS as follows:
div.cent-tech2
{
padding: 0 10%;
width: 80% !important;
width: 100%;
width/**/:/**/80%;
background: #cfc;
color: #060;
}
This block employs technique 3 to give IE5.x/Win a width value of its own while supplying other browsers another value. CSS as follows:
div.cent-tech3
{
padding: 0 10%;
width: 80% !important;
width /**/: 100%;
background: #cfc;
color: #060;
}
The first two blocks below should have a gray background. They do not contain any hacks. The last three blocks each use a different box model hack. They should have a light green background and should be as wide as the control block even on IE5.x/Win. If any of them is not as wide as the control then the hack is failing. Resizing the browser should not affect the total width.
This block serves as the control. It has a width of 600px. There is no padding declaration. Therefore, content width is equal to total width. All browsers should render this block properly. CSS as follows:
div.px0
{
width: 600px;
background: #ccc;
color: #666;
}
This block has a width set to 500px, a left and right padding of 30px each, and a left and right border of 20px each. Browsers that correctly implement the CSS box model will display a block with a total width of 600px, and therefore will be as wide as the one above. IE5.x/Win will display it as a block with only 500px total width. CSS as follows:
div.px1
{
border-left: 20px solid #999;
border-right: 20px solid #999;
padding: 0 30px;
width: 500px;
background: #ccc;
color: #666;
}
This block employs technique 1 to give IE5.x/Win a width value of its own while supplying other browsers another value. CSS as follows:
div.px-tech1
{
border-left: 20px solid #0c0;
border-right: 20px solid #0c0;
padding: 0 30px;
width: 600px;
width/* */:/**/500px;
width: /**/500px;
background: #cfc;
color: #060;
}
This block employs technique 2 to give IE5.x/Win a width value of its own while supplying other browsers another value. CSS as follows:
div.px-tech2
{
border-left: 20px solid #0c0;
border-right: 20px solid #0c0;
padding: 0 30px;
width: 500px !important;
width: 600px;
width/**/:/**/500px;
background: #cfc;
color: #060;
}
This block employs technique 3 to give IE5.x/Win a width value of its own while supplying other browsers another value. CSS as follows:
div.px-tech3
{
border-left: 20px solid #0c0;
border-right: 20px solid #0c0;
padding: 0 30px;
width: 500px !important;
width /**/: 600px;
background: #cfc;
color: #060;
}
The following table summarizes the reactions of various browsers to the above techniques. "Y" means the hack works in that browser. "N" means it does not work.
Thanks to: Philippe Wittenbergh for checking on a wide variety of Mac browsers. To loro for most of the tests on Windows browsers. To Mark Newhouse for even more Mac tests. To Trevor Rhodes for the Konqueror screenshot. To Paul, Lukie, and everyone who took time to view this page and sent in much needed feedback and screenshots. You've been an indispensible part of this project.
| Platform | Browser | Technique | |||
|---|---|---|---|---|---|
| 1 | 2 | 3 | |||
| Win | 98, XP | IE 6 | Y | Y | Y |
| Me | IE 5.5 | Y | Y | Y | |
| 95, 98, 2000 | IE 5.0 (incl. SP2) | Y | Y | Y | |
| IE 4.0 | |||||
| 2000 | Moz 1.1 | Y | Y | Y | |
| 2000 | Moz 1.0.1 | Y | Y | Y | |
| Me | Moz 1.0 | Y | Y | Y | |
| 98 | Moz 0.9.9 | Y | Y | Y | |
| Me, 2000 | NS 7.0 | Y | Y | Y | |
| 98 | NS 6.2.1 | Y | Y | Y | |
| 98 | NS 6.0 | Y | Y | Y | |
| Me, 2000 | Opera 6.05 | Y | Y | Y | |
| 2000 | Opera 6.03 | Y | Y | Y | |
| 98, Me | Opera 6.01 | Y | Y | Y | |
| 2000 | Opera 5.12 | Y | Y | Y | |
| 98, Me | Opera 5.02 | Y | Y | Y | |
| 2000 | Opera 4.02 | Y | Y | Y | |
| 2000 | Opera 3.60 | Y | Y | Y | |
| 2000 | K-Meleon 0.65 | Y | Y | Y | |
| 98, Me, 2000 | K-Meleon 0.6 | Y | Y | Y | |
| 2000 | Beonex 0.8-stable | Y | Y | Y | |
| 2000 | DocZilla 1.0 RC2 | Y | Y | Y | |
| 2000 | DocZilla 1.0 RC1 | Y | Y | Y | |
| Me | Phoenix 0.2 | Y | Y | Y | |
| 2000 | Phoenix 0.1 | Y | Y | Y | |
| Mac | OS X | IE 5.21 | Y | Y | Y |
| OS X | IE 5.2 | Y | Y | Y | |
| OS 8.6, OS 9 | IE 5.1 | Y | Y | Y | |
| OS 9 | IE 5.01 | N | Y | Y | |
| OS 9 | IE 4.5 | N | N | N | |
| OS X | Moz 1.2 | Y | Y | Y | |
| OS X | Moz 1.1b | Y | Y | Y | |
| OS 9 | Moz 1.0 | Y | Y | Y | |
| OS X | NS 7 | Y | Y | Y | |
| OS X | NS6.2 | Y | Y | Y | |
| OS 9 | NS6.1 | Y | Y | Y | |
| OS X | Opera 6 beta1 | Y | Y | Y | |
| OS X, OS 9 | Opera 5 | Y | Y | Y | |
| OS X | Chimera 0.5 | Y | Y | Y | |
| OS X | Omniweb 4.11 beta | N | N | Y | |
| OS X | Omniweb 4.1 | N | N | Y | |
| OS 9 | iCab 2.82 | [1] | [1] | [1] | |
| Linux | Mandrake 8.2 | Konqueror 2.2.2 | Y | Y | N |
Here again are the various test blocks above but now with minimal content for a bird's eyeview comparison. If you're sending me a screenshot please snap the following rather the ones above. You may want to use Text Zoom on your browser to fit everything into one frame.