Another box model hack alternative

The box model hack15 is used to fix a rendering problem in pre-IE 6 browsers on PC, where by the border and padding are included in the width of an element, as opposed to added on. A number of CSS-based solutions have been put forward to remedy this, so here's another one which we really like:

padding: 2em;
border: 1em solid green;
width: 20em;
width/**/:/**/ 14em;

The first width command is read by all browsers; the second by all browsers except IE5.x on PC. Because the second command comes second it takes precedence over the first - any command that comes second will always override a preceding command. So, how does all this work?

By placing empty comment tags (/**/) before the colons, IE5.0 will ignore the command. Likewise, by placing these empty comment tags after the colon, IE5.5 will ignore the command. By using these two rules in conjunction with each other, we can hide the command from all of IE5.x.

By Geethalakshmi, On - 2010-02-09

PreviousNext