Box Model Enlightenment

Album Cover: The Future

"Love's the only engine of survival."
Leonard Cohen / The Future

Posted on April 04, 2003 6:38 PM in Web Design
Warning: This blog entry was written two or more years ago. Therefore, it may contain broken links, out-dated or misleading content, or information that is just plain wrong. Please read on with caution.

While discussing the CSS dotted border gap bug in Bugzilla tonight I came upon a very depressing find. Turns out the DIV width problem Mozilla users are seeing on my site are actually my fault, for sticking with the tried and true web design ideal that padding refers to padding within a cell (like in the TD days) rather than beyond the borders of a cell. So apparently IE6 and Opera are displaying my page incorrectly, even though they display it the way I want them to. Luckily there are some hacks I can look into to try and make the page look as I intend it to in Mozilla and IE6, but I'm not in the mood to take care of it right now. After reading a very insightful and surprising page called Box Model Tweaking, I came to the conclusion that I shouldn't blame myself for these problems, but rather the W3C. They came up with the backward/awkward/bizarre box model that is the root of all my problems. There is a light at the end of the tunnel, though. Apparently in CSS3 we, as designers, will be able to specify which box model we prefer. For me it's border-box all the way. Oh the headaches these browsers and standards give me! In the immortal, wise words of Frank Costanza, "Serenity now!"


No one has added any comments.

Post Comments

If you feel like commenting on the above item, use the form below. Your email address will be used for personal contact reasons only, and will not be shown on this website.


Email Address:



Check this box if you hate spam.