Box Model Enlightenment

Album Cover: New Skin for the Old Ceremony

"You told me again you preferred handsome men, but for me you would make an exception."
Leonard Cohen / Chelsea Hotel #2

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!"


candy crush on May 23, 2019 at 4:47 AM:

Nice post. I learn something more challenging on your different blogs everyday. Thanks for sharing.


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.