September 2002
This page will test the reactions of your browser to an alternative to the Tantek Celik Hack and the Simplified Box Model Hack (SBMH). Do email me your test results. Please specify browser, version number, and platform. Screenshots whenever possible would be invaluable.
The workaround exploits the max-width property of CSS2. This property is not recognized by IE5.x/Win and therefore any value we give it is effecitvely hidden from it. CSS2-aware browsers such as Mozilla, Opera5 and up, NS6.x and up will take the value of max-width and will override the width value if the latter is greater than the former.
Below are two sets of tests. One uses percentage values for width and padding while the other uses pixels.
Note: The test blocks below are not intended to 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. On a browser that correctly implements the CSS box model these three should be as wide as the control. All four blocks should display white text against a navy blue background. 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. 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 as wide as the two above. IE5.5/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; width: 80%; color: white; text-align: justify; }
The width value in this block is for IE5.x/Win. The max-width value is for other browsers. The latter overrides the former. CSS as follows:
div.percent3 { margin: 1em 0; padding: 0 10%; width: 100%; max-width: 80%; background: navy; color: white; text-align: justify; }
The following three blocks have widths and paddings specified in pixels. They should all display white text against a green background. On a browser that correctly implements the CSS specifications all three should have a total width (portion that has a green background) 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; width: 600px; background: green; color: white; text-align: justify; }
This block has a width set to 500px and a left and right padding of 50px 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; width: 500px; background: green; color: white; text-align: justify; }
The width value in this block is for IE5.x/Win. The max-width value is for other browsers. The latter overrides the former. CSS as follows:
div.px3 { margin: 1em 0; border-left: 20px solid silver; border-right: 20px solid silver; padding: 0 50px; width: 600px; max-width: 500px; background: green; color: white; text-align: justify; }
The hack does 'correct' the IE5.x/Win box model bug. The question is how the hack will affect other browsers that implement the box model correctly. From feedback gathered as of September 8 2002:
| Workaround well received by: | Win98 | Moz0.9.9, Opera5.02, Opera6.01, NS6.2.1 |
| WinMe | Moz1.0, Opera6.01, Opera5.02 | |
| Workaround 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.