Avoiding Tantek's "Box Model Hack" | August 13, 2003

Bryant said on August 13, 2003 6:04 PM

I think Tantek’s hack is actually a Good Thing because it places the hack in the CSS, not the page source. One of the big plusses to the XHTML + CSS combination is that styling changes are made by editing your site’s CSS file instead of each HTML page individually. When IE 5.x ceases to be an issue (perhaps in 2010 or so) the hack can be removed from a single CSS file, instead of manually stripping hundreds of non-semantic divs from your XHTML.

Dan said on August 13, 2003 6:59 PM

I agree. I think the term “Hack” is a derogatory term for an other-wise Ingenious and welcome “FIX” to a corrupt browsers mis-interpretation of standards.

Andy said on August 13, 2003 7:37 PM

I’m not suggesting that you shouldn’t use the “box model hack” at all. Just that it’s not the only option.

Tantek’s hack is great. However if you need to use it on a number of elements it can make an otherwise lean, mean CSS file into a bit of a bloated mess. Also for people not familiar with it, it’s a bit of a head scratcher.

On some occasions you can get rid of multiple instances of the Tantek hack just by wrapping a bunch of elements in a wrapper div.

In the case of the message site I set the width of my col div’s and the margin/padding of their children. The col div’s were already there to hold everything together so I didn’t have to add anything new. It meant that I could get everything working very easily and avoid having to use the “box model hack” 3 times where it wasen’t actually needed at all.

I agree with the argument of keeping the “presentational” code in the CSS and keeping the markup “Structural”. I wouldn’t reccomend just throwing wrapper div’s around. However if done sennsibly, they can add to the semantic meaning of the document and give you much greater freedom when laying out a page, and often there will already be a parent element that you can use.

It’s really all about having more options to play with. Sometimes one method is much better than the other, but it’s good to be aware of both.

Andy said on August 13, 2003 7:43 PM

Actually sorry, on the message homepage I would have had to use Tanteks hack 6 times. Once for each content block, where all I needed too do was set the width of the 3 col div’s and then the padding/margin of the content div’s.

Much more ellegant solution I feel.

josh said on August 13, 2003 8:02 PM

good stuff daddy.

Andy said on August 13, 2003 10:13 PM

Son, is that really you?

:-)

Jeff Croft said on August 14, 2003 3:02 AM

Interesting discussion. I think both points are valid. I agree with the idea that it’s nice to have the so-called “hack” in the CSS, rather in the (X)HTML. After all, the “hack” is for presentation, not structe, right?

But, in many cases, you already have the “wrapper” DIV in place (because it’s really a functional element and not JUST a wrapper) and you CAN save multiple instances of the Tantek “hack” — which IS more elegant.

I think the bottom line on this is that you’ve got to decided on a case-by-case basis. Which solution is more elegant varies from site to site…

Jeff

Andrew said on August 14, 2003 2:56 PM

I don’t use Tantek’s hack, but instead use the method you describe. I personally think it is more elegant, but has the extra benefit that by applying the width to the wrapper DIV, you then don’t have to worry about future compatability.

It’s quite possible that some browser will come along and totally ruin Tantek’s hack in a big way. If that browser was IE7 (or whatever MS call it) there would be real problems!

Still each to their own :)

z said on August 14, 2003 4:04 PM

Tantek’s hack is good for more than box model adjustments. I used it to hide a decorative top border framing a sideba element from IE5.0/Win. All other browsers showed the border element where it was supposed to be shown: in the sidebar, at the top of the styled element. IE5.0/Win extended the border out of its containing box and across the entire page, thus ruining the layout.

The fix was simple: in CSS, state that the element had no border.

Then use Tantek’s hack to say that the element DID have a border.

Better browsers (everything but IE5/Win) show the border; IE5/Win doesn’t and so doesn’t choke on its inability to display a simple CSS rule correctly. Steve Champeon coined the phrase “progressive enhancement.” Tantek’s hack can be a tool for progressive enhancement.

Andy Budd said on August 14, 2003 6:24 PM

I agree,

I use this hack often to get round certain IE specific issues, so I’m not saying don’t use it. Just that if it’s being used to get around IE box model bug, there is possibly a more elegant solution.

Really depends on the sittuation. I tend to use lot’s of wrapper div’s in my layouts anyway (usually to create collumns or center things) so usually there is no need for this hack at all.

However there are times when it’s a straight choice between using the hack once, or adding a wrapper div and then it’s down to personal preference. I try to keep things as semantic as I can, while still maintaining control over the design. As such I don’t really like adding in meaningless wrapper div’s. However I also see Andrews point that all future prowsers need to take this hack into account or many peoples layouts could break.

It would be so cool, instead of resorting to hacks, if there was some way in CSS to speficy a certaian browser should not follow a certain rule. Maybe one fot the wish list? (although with IE as a standalone not being developed any more, who knows what’s next for web standards).

Paul Scrivens said on August 14, 2003 10:45 PM

For now I would have to go with the CSS hack because it keep the HTML document structured without meaningless div’s. Another issue is that when you start adding div’s you are doing no better than table-based layouts in my opinion. CSS should be used to reduce markup not replace it with div’s However, your method is nice because of the non-use of hacks. There will be a better way soon.

Off-topic: Is there a reason the comment-body is text-align: center? It is a pain to read.

Tom Clancy said on September 2, 2003 7:57 PM

I guess I disagree with this, mainly because of the additive nature of padding vs. non-additive margin. Margin is meant to do one thing, padding another and all elements should have a specified width (not that I follow my own rules).

What I’ve gone to doing is using a DOCTYPE that puts IE6 into standards mode, specifying the incorrect width in the original CSS declaration and then hacking the correct width with a simplified hack. Looks sorta like this:

.element {
padding-left: 50px;
width: 150px;
}

.e\lement {width: 100px;}

The backslash can be applied to any letter in an ID or classname after the first character. However, the character cannot be the letters a,b,c,d,e or f (lower-case or capital) as they can be part of a hex color.

(See http://centricle.com/ref/css/filters/tests/sbmh/ for a better explanation)