Anne van Kesteren

Keep CSS easy

Everyone who is aware of web standards (which are semantic) knows the Box Model Hack I presume. It is a really nice trick to let IE5.x apply the right width/height for a box:

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

 width:400px; /* width for IE5.x */
 voice-family: ""}""; 
 voice-family:inherit;
 width:300px; /* width for standard-compliant browsers and IE6 (400px - 2*(20+30)px = 300px)
                 Opera does not apply this rule */
}
body>div.content{ /* make sure there are _NO_ spaces within this selector for IE5.0 */
 width:300px; /* width for standard-compliant browsers (IE6 does _NOT_ apply this rule) */
}

This looks complicated and it is. How would you feel if we could reduce it to this:

div.content{
 border:20px solid;
 padding:30px;
 background: #ffc;
 width:400px; /* width for IE (including IE6) */
}
body>div.content{ /* make sure there are _NO_ spaces within this selector for IE5.0 */
 width:300px; /* width for standard-compliant browsers (IE6 does _NOT_ apply this rule) */
}

That looks a lot better. We have only thing left to do. We need to put IE6 in quirk rendering mode, so that it will apply (exactly) the same box model as IE5.x. And for XML documents, that is not very difficult. Add the following before you doctype:

<?xml version="1.0" encoding="iso-8859-1"?>

If you use another encoding type, that's fine, it doesn't effect the 'trick'. If you have done this you can eliminate the useless meta element where you now have applied you content-type and encoding. Not a single parser will even read that element. Remove it and you done.

Comments

  1. Hmmm, I see you take a diferent approach by including IE6 in the quirky mode. Is this deliberate and why? Why not allow IE6 to render in the non-quirky mode?

    Posted by folkert at

  2. Discussion about IE6 whether or not in quirk mode, can be continued here: http://www.plasticlab.nl/in...

    Questions about the Box Model Hack and my method can be asked here (if there are any :)).

    Posted by Anne at

  3. Perhaps a link to CSS Hub's Alternate Box Model Hacks is useful, so here it is: http://www.info.com.ph/~eta...

    Posted by Mark Wubben at

  4. if you are designing mostly liquid, there will be no need for box model hacks.
    Anyway, I like this one and have used it a couple of times because I think it is not really a hack. No weird combination of slashes and asterisks, just plain and simple CSS.

    Go ahead!

    Posted by Minz Meyer at

  5. I try to avoid hacks as much as possible by liquid design and not setting width at the same time as border, padding and margin. Of course this can not always be accomplished without adding semantically senseless div elements. The question then remains which is worse or uglier.

    Posted by Ben at