September 2002
This page will test the reactions of your browser to the commented value bug. This technique as used here is intended to work around the box model bug in IE5.x/Win. Unfortunately, this technique only targets IE5.5/Win. It does not work on IE5.0/Win
Below are two sets of tests. One uses percentage values for width and padding while the other uses pixels. The body element of this page has been given a 10px golden yellow border to aid legibility.
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. 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. If text color, background color, or something else is incorrect then your browser is being negatively affected by the hack. Please email me about it.
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. However, some rounding off errors might occur on some (IE6 for instance) specially when the browser is resized. 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 will be as wide as the two above. IE5.x/Win will display this block with a total width of only 80%. CSS as follows:
div.percent2
{
margin: 1em 0;
padding: 0 10%;
background: navy;
width: 80%;
color: white;
text-align: justify;
}
This block has the same CSS as the preceding one. However, an additional width declaration has been included. The first one is for IE5.5/Win while the second one is for all other browsers. The second value is hidden from IE5.5/Win using the commented value technique. CSS as follows:
div.percent3
{
margin: 1em 0;
padding: 0 10%;
width: 100%;
width: /**/80%;
background: navy;
color: white;
text-align: justify;
}
The following three blocks have widths, paddings, and borders specified in pixels. They should all display white text against a green background. On browsers that correctly implement the CSS box model 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 neither padding nor border. 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;
width: 600px;
background: green;
color: white;
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 this block with a total width of 600px, and therefore will be as wide as the one above. IE5.x/Win will display this block with a total width of only 500px. CSS as follows:
div.px2
{
margin: 1em 0;
border-left: 20px solid silver;
border-right: 20px solid silver;
padding: 0 30px;
width: 500px;
background: green;
color: white;
text-align: justify;
}
This block has the same CSS as the preceding one. However, an additional width declaration has been included. The first one is for IE5.5/Win while the second one is for all other browsers. The second value is hidden from IE5.5/Win using the commented value technique. CSS as follows:
div.px3
{
margin: 1em 0;
border-left: 20px solid silver;
border-right: 20px solid silver;
padding: 0 30px;
width: 600px;
width: /**/500px;
background: green;
color: white;
text-align: justify;
}
The hack does 'correct' the IE5.5/Win box model bug. The question is how the hack will affect other browsers. From feedback gathered as of September 11 2002:
| Hack is well received by: | Win98 | IE6, Moz0.9.9, Opera5.02, Opera6.01 |
| WinMe | Moz1.0, Opera6.01 | |
| Mac OS 9.2.2 | IE5.1, Opera5.0, Moz1.1 | |
| Hack upsets: |
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.