The technique discussed here is a modification of the Simplified Box Model Hack. As with the SBMH this variant is intended to provide IE5.x/Win and it alone a width value of its own to compensate for its erroneous implementation of the CSS Box Model. Test your browser now to see how it reacts to the hack.

The technique exploits a bug that exists in IE browsers versions 5 and up (both for MS Windows and the Mac). [1] Tests show that IE has the star html selector bug which is a CSS selector that does not match any element in a valid HTML or XHTML document. Be that as it may it is nevertheless a valid CSS selector. The inclusion of the star html selector is the modification in the 'standard' SBMH. As with the SBMH the character escape mechanism is utilized to hide width values from IE5.x/win.

The following is the basic syntax of the modified SBMH:

* html <selector>   /* this selector recognized by IE only */
{
  width: <value>;   /* total width (only for IE5.x/Win) */
  w\idth: <value>;  /* content width (for other IE) */
}

<selector>
{
  padding: <value>;
  width: <value>;   /* content width (for other browsers) */
}

The selector of the first rule is meant to be recognized only by IE. It utilizes the star html selector. The first declaration in the rule supplies IE5.x/Win its width value. But since other IE versions which do not have the box model bug will also pick up this value the second declaration is necessary to serve them the correct width. This second declaration has the escape character (backslash) embedded in the middle of the property name, thus, making it "invisible" to IE5.x/Win only. Character escapes are recognized by IE6/Win and IE5/Mac. Keep in mind that the backslash cannot appear before the first letter of the property since IE5.x/Win understands that. Furthermore, the backslash cannot appear before the letters a to f, and A to F, and numerals 0 to 9 since doing so will turn those letters or numerals into hexadecimal numbers.

The second rule above is recognized by all CSS-aware browsers. [2] All the properties declared here are for all browsers including IE. The only values which IE will not apply from this rule will be width values since the first rule has a higher specificity. And because of this difference in specificity placement of these two rules relative to one another is irrelevant. Either one can precede the other.

Check how your browser reacts to the modified SBMH on this test page

Comparison of the SBMH and its Modified Form

One serious side effect of the character escape technique of the SBMH is that it wreaks havoc in certain browsers. NS4.x, for example, ignores the entire stylesheet—the page is rendered without any CSS at all. Thus, if NS4.x is to be served the same style sheet some way of hiding the escape is necessary. This is the reason the Caio Hack is employed at times.

Opera 5, on the other hand, ignores all the declarations in the rule in which the escape is found. Because it will disregard any rule set that contains a character escape (whether on the first letter of the property or not) at least two (maybe even three), nearly identical, rules with the same selector must be specified: one with an unescaped width and another (or two) with an escaped width.

Therefore, while using escapes is a simple and elegant solution, the necessity of adding another hack to hide the SBMH from NS4.x or specifying several rules defeats its initial simplicity.

One advantage of the modified form of the SBMH is that it effectively hides any escapes from browsers (other than IE) that may have difficulty with them. When a browser (other than IE) reads the star html selector it will not find any matching element in the markup and will simply move on to the next rule. It will not bother reading the declaration block. Therefore, such browsers as Opera 5 and NS4.x are effectively shielded from w\idth.

Moreover, the modified SBMH is obsolescence-proof. If and when the star html selector bug finally is fixed by Microsoft the hack will not have any negative impact on the browser. Just like Mozilla or Opera 6 for instance the hypothetical new IE without the star html bug will simply ignore the entire rule and pick up the width from the other rule. And since this new IE will presumably be implementing the correct box model (IE6 and IE5.x/mac do so already) all will be as it should be.

Other Applications

Like the SBMH its modified form can be used to supply IE5.x/Win (or IE for Windows and the Mac in general) its own set of values for properties other than width. For instance the footer text on this page uses this technqiue to supply IE5.x/Win its own fractional font size. Because this browser displays a text much larger than other browsers I decided to serve it its own value. The CSS used for the footer is as follows:

div#footer p
{
  margin: 0 30% 0 0;
  padding: 0.5em 2em 0.5em 10%;
  background: #eee;
  font-size: 90%;
}

* html div#footer p
{
  font-size: 75%;   /* for IE5.x/win */
  f\ont-size: 90%;  /* for other IE versions */
}

Notes

  1. Tests show this bug is present in the following IE browsers: IE5.0/Win, IE5.5/Win, IE6/Win, IE5.1/mac.
  2. Strictly speaking this depends on the selector used since some browsers still don't recognize, among others, the universal selector, certain combinators, attribute selectors, and some pseudo-classes