Box Model Hack

Content

Here is a sample div with class "content".

This div is styled almost identically to the "boxtest" div:

div.content { 
  border:20px solid;
  padding:30px;
  background: #ffc;
}

with one important addition. There is a second style rule, which takes advantage of a CSS parsing bug in IE5/Windows and IE5.5/Windows, to apply a width which is then overriden.

div.content { 
  width:400px; 
  voice-family: "\"}\""; 
  voice-family:inherit;
  width:300px;
}

This div (including its borders) should also be as wide as the blue bar, even in IE5/Windows and IE5.5/Windows.

In addition, we add one more rule immediately following the above style rule, to help out UAs which support CSS2 selectors and the CSS box model, but have the same parsing bug as IE5.x/Windows mentioned above. I call it the "be nice to Opera 5" rule. And be sure to not leave any space around the '>'.

html>body .content {
  width:300px;
}

Finally, note that UAs that have the parsing bug illustrated by the "\"}\"" value, could potentially ignore the next rule, so the "be nice to Opera 5" rule serves to help those errant parsers "catch up" with where the style sheet is going.

To demonstrate that UAs' CSS parsing has recovered at this point, I added one more rule immediately after the previous one just to make it clear.

p.ruletest { color: blue }

This paragraph has class="ruletest" and thus should be colored blue. If it is red, then an earlier rule (which should have been overridden by the later one) is improperly taking effect. Note that this last style rule is unnecessary, and is only here for the purpose of illustrating that the above box model hack rules properly clean up after themselves.

Addendums

Avoid the unnecessary ?xml prolog

20020404 Prerit Bhakta noted that if you include the ?xml prolog:

<?xml version="1.0"?>

then IE6/Windows uses the quirky box model.

Since the ?xml prolog is unnecessary, I recommend simply omitting it.

Validate style sheets as media independent files

20020903 Jonathan Horn noted that the W3C CSS validator returns errors when the 'voice-family' property is used in a 'screen' style sheet.

As I noted in the comments of Dave Shea's mezzoblue, this is an error in the W3C CSS validator itself. The validator should report a warning, not an error, when properties which are unsupported by a particular medium are used, and this has been reported to the W3C:

My advice: validate your style sheet as a media independent file, so you know you are using valid CSS, and then @import it within a media dependent element as necessary.

Translations

20020915 Christophe Ducamp had provided a French translation: Bidouillage de Boîtes (dead link as of 20060713).

20040210 Mauricio Samy Silva has provided a Portuguese translation: Corte Do Modelo Da Caixa.

20040219 Alex Kachanov has provided a Russian translation: Трюк с блочной моделью.

20040604 Vakorin Nikita has also provided a Russian translation: Способ обхода коробочной модели.

20040704 Hermann Kaser has provided a Spanish translation: Hack para el modelo de cajas

20040710 Jens Meiert has provided a German translation: Boxmodell-Hack

20040802 Daniel Torres Burriel has provided a Spanish translation: Corte Del Modelo De la Caja

20050212 Marcel Feenstra has provided a Dutch translation: Dutch translation of the Box Model Hack

20050224 Mehmet Doğan has provided a Turkish explanation: Kutucuk Modeli

Box Model Hack

Boxtest

Content

Addendums

Avoid the unnecessary ?xml prolog

Validate style sheets as media independent files

Translations

More Hacks, Examples, and Tests

Semantic XHTML

See Also