Simplifying the Modified Simplified Box Model Hack

I’ve been working on putting a table-based layout into CSS and semantic XHTML, and having a monkey of a time getting everything kosher across browsers.

I decided to use the Simplified Box Model Hack (Tan Hack) to get around IE5 oddness with CSS Widths for the following reasons:

  1. It is a very small amount of code to be added.
  2. It works without breaking other browsers
  3. It’s very readible. (No /*\*/*//**/ stuff.)

FYI, the MSBMH (Tan Hack) works like this:

  1. Put the correct width in the rule. (Content only.)
  2. Feed all versions of Internet Explorer a modified rule, with two different widths.
  3. Hide the “correct” width from IE5.

Putting it all together, it looks like this in action.

Interesting things that I found:

  • There aren’t really any good tutorials or test sites where you can view this. (There are many for the multitude of other box model hacks.)
  • Without a XHTML DOCTYPE, IE6 behaves very badly. (Sometimes including padding in the width, sometimes including borders, and sometimes both! No thorough testing done.)
  • Without a doctype, some browsers behave differently in the presence of a top or bottom border.
  • Depite what people may say online, margins are not the problem - borders and padding are the only issues.

If you want to see the hack in action on other browsers, check out the Browser Cam renditions. (Some of the comments on the screenshots may be misleading, because I was changing the code around until I got it right, but wasn’t bothering to change around the contents every time. The colors tell you which rule the browser is getting.)

PS: I’ll have some cool new JavaScript tricks to share as soon as I get a moment to blog it.

One Response to “Simplifying the Modified Simplified Box Model Hack”

  1. On August 31st, 2004 at 13:25:24, Isaac Schlueter Said:

    In case you read this, and you’re going crazy wondering why IE6 is acting like IE5…
    Make sure that <!DOCTYPE is the first thing in the document, or IE6 will stay in “quirks mode.” (If you have an <?xml… tag, get rid of it.)

Leave a Reply

Comments are moderated like crazy using a variety of plugins. There is a very high likelihood that your comment won't show up right away, especially if you have never commented here before, but it was not deleted.

Please be patient, and do not post your comment more than once. It will show up once it is approved.

You must be logged in to post a comment.