Avoiding Tantek's Box-Model Hack

Home

The following text is a conglomerate of comments made at Webmaster World about how to avoid Tantek Çelik's famous box-model hack.

Tantek's box-model hack works because it employs multiple values to serve both IE non-standard as well as Standards compliant browsers. The hack makes use of an IE parsing bug which allows IE5.5 to read a style sheet up to the the code suppied to allow proper rendering (in IE5/5.5) and then ignore the cascade which suppies Standards compliant broswers the correct set of values.

Right, this approach really allows IE to be IE (standards or quirk) as well as allowing flexibility in other browsers. If you experiment you will find tremendous possibilities without any of the angst associated with "hack calculations."

In the simplest of terms, the IE box-model problem can be avoided by not assigning problematic properties and values to sized containers. Instead... apply padding and/or margins to the "liquid elements" contained within the "sized" elements.

The first thing to do is identify which elements will be "rigid" and which will be "liquid" - apply the padding and borders to your "liquid" elements and let your "rigid" (having at least one fixed dimension, e.g. width:200px) alone.

If background colors, padding and even borders are desired for visual cues, then the style declarations can be applied to any of the contained elements, e.g. headings, paragraphs, blockquotes and so on. Nested divs are not required.

p,h1,h2,h2 { 
  padding:5px;
}
 
img { 
  margin:5px;
}

How much more elegant than that? Of course, adjusting the margins or padding to suit is understood.

The "liquid box model" is in fact an approach to CSS layouts that provides a logical solution to a known issue. The logic assumes an understanding of the CASCADE and DOM by removing troublesome style attributes from a parent element and assigning them to the children. Let the kids do the work! There are more of them and they are more limber to begin with!

There is no trickery here, one browser is not fed one set of information and then spoofed into ignoring the real style declarations, no, the approach simply, logically and legally applies formatting rules where they are suitable for the majority. Rather than apply margins and padding to the parent container, these attritbutes are assigned to the fluid elements within the container... simple and logical.