September 2002
This page will test the reactions of your browser to a modification of the Simplified Box Model Hack (SBMH). For a detailed description of the syntax and how the hacks work please visit the modified SBMH page.
Notice this page is in standards mode, i.e., it has a correct doctype declaration without an xml prolog. If this page had been marked up in quirks mode the hack would fail in IE6. When in quirks mode IE6 will emulate the faulty box model of IE5.x/Win, nevertheless, it will still recognize character escapes whether on the first letter of the property or not.
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.
Note: The test blocks below may or may not work on NS4.x.
The first block below serves as the control. Padding is set to zero and no width has been specified. The next three blocks have widths and paddings specified as percentages. All four blocks should display white text against a navy blue background, except for the fourth block whose text color and font weight are dependent on the browser used. On a browser that correctly implements the CSS specifications all four blocks should have a total width (portion that has a navy blue background) that spans the entire width of the viewport (from the left gold border to the right gold border). Resizing the browser should not affect the total width.
This block serves as the control. Width has not been specified and padding has been set to zero. CSS for this block is as follows:
div.percent0
{
margin: 1em 0;
padding: 0;
background: navy;
color: white;
text-align: justify;
}
This block has a width of 100% and no padding, therefore, content width is equal to total width. All browsers should have no problem displaying it. CSS as follows:
div.percent1
{
margin: 1em 0;
padding: 0;
width: 100%;
background: navy;
color: white;
text-align: justify;
}
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 as wide as the two above. IE5.x/Win will display it as a block with only 80% total width. CSS as follows:
div.percent2
{
margin: 1em 0;
padding: 0 10%;
background: navy;
color: white;
width: 80%;
text-align: justify;
}
This block has the same CSS as the preceding one. However, an additional rule which makes use of the star html selector has been added to target IE and supply it two widths: one for IE5.x/Win and another for all other IE versions on both Mac and Windows, the latter value being hidden from IE5.x/Win using the SBMH character escape technique. Just for testing purposes, browsers that have the star html bug will display yellow boldface text. CSS as follows:
div.percent3
{
margin: 1em 0;
padding: 0 10%;
background: navy;
color: white;
width: 80%;
text-align: justify;
}
* html div.percent3
{
width: 100%;
w\idth: 80%;
color: yellow;
font-weight: bold;
}
The following three blocks have widths and paddings specified in pixels. They should all display white text against a green background, except for the third block whose text color and font weight are dependent on the browser used. On a browser that correctly implements the CSS specifications all three should have a total width of 600 pixels. Resizing the browser should not affect the total width.
This block has a width of 600px with no padding, therefore, content width is equal to total width. All browsers should render this block properly. CSS for this block is as follows:
div.px1
{
margin: 1em 0;
padding: 0;
background: green;
color: white;
width: 600px;
text-align: justify;
}
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.px2
{
margin: 1em 0;
border-left: 20px solid silver;
border-right: 20px solid silver;
padding: 0 30px;
background: green;
color: white;
width: 500px;
text-align: justify;
}
This block has the same CSS as the preceding one. However, an additional rule which makes use of the star html selector has been added to target IE and supply it two widths: one for IE5.x/Win and another for all other IE versions on both Mac and Windows, the latter value being hidden from IE5.x/Win using the SBMH character escape technique. Just for testing purposes, browsers that have the star html bug will display yellow boldface text. CSS as follows:
div.px3
{
margin: 1em 0;
border-left: 20px solid silver;
border-right: 20px solid silver;
padding: 0 30px;
background: green;
color: white;
width: 500px;
text-align: justify;
}
* html div.px3
{
width: 600px;
w\idth: 500px;
color: yellow;
font-weight: bold;
}
The following table summarizes the reactions of various browsers to the modified SBMH. In the results column "Y" means the hack works in that browser, "N" means it does not work. As you can see testing on Mac browsers is urgently needed.
Thanks to Mike Solomon, Hugo Paulissen, Larry, Hamilton, Lotta, Paul Roubekas and to all who took time to test the hack and sent in much needed feedback and screenshots.
| Platform | Browser | Result | |
|---|---|---|---|
| Win | 98, 2000, XP Home, XP Pro | IE 6 | Y |
| Me, 2000 | IE 5.5 | Y | |
| 95, 98 | IE 5.0 | Y | |
| IE 4.0 | |||
| 2000 | Moz 1.1 | Y | |
| Me, 2000 | Moz 1.0 | Y | |
| 98 | Moz 0.9.9 | Y | |
| 98 | NS 6.2.1 | Y | |
| 2000 | Opera 6.05 | Y | |
| 2000 | Opera 6.04 | Y | |
| 98, Me | Opera 6.01 | Y | |
| 2000 | Opera 6.0 | Y | |
| 98, Me | Opera 5.02 | Y | |
| 2000 | Opera 3.60 | Y | |
| 2000 | K-Mel 0.65 | Y | |
| Mac | IE 5.2 | ||
| OS 8.6 | IE 5.1 | Y | |
| OS 8.6 | IE 5 | Y | |
| OS 8.6 | Moz 1.0 | Y | |
| NS 7 | |||
| NS 6 | |||
| Opera 5 | |||
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.