Tan Hack - (Edwardson Tan)

Basic Syntax:
Only for adjusting the width setting due to wrong CSS1 box model of IE5.x/Win browsers

/*selector recognized-IE only*/

* html selector 

{

  width:value; /*total width-IE5x/Win)*/

  w\idth:value;/*content width-otherIE)*/

}



selector

{ padding:value;

  width:value; /*content width-others)*/

}

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.

The second rule above is recognized by all CSS-aware browsers. 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.

Advantages:
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.

Example:

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 IEs*/

}