The Box Model Hack for CSS
Table code is great for tabular data, but you really should use CSS for the layout of your page. When getting out of the habit of using tables and moving toward using Cascading Style Sheets (CSS) positioning for laying out elements on a page, it is important to become familiar with the W3C Box Model. When you first get started, the box model will probably seem a bit complicated, but it is a very important concept to understand correctly. Unfortunately, merely getting a handle on the W3C box model itself is not the only thing you need to have a cross browser compatible design. The following delves into the Box Model, the browsers that get it wrong, and what to do about them.
Note: While layout editors are very good at tabled layouts, and applying CSS to those layouts, the current state of browser development leaves much to be desired when attempting CSS positioning. Because of this, CSS “hacks” are sometimes required to persuade certain browsers to play nice with such positioning. At the present time no layout editor can fully deal with these positioning bugs, and manual text editing is necessary to work around the problems.
This article is intended for people familiar with with CSS syntax and usage. If you are new to CSS, see Adrian Senior’s excellent article, CSS: An Introduction.
The box model
A table structure is comprised of rectangular cells within a rectangle. A CSS “box” can be thought of as a table with only one cell. Such a box can be given borders, transparent margins outside the borders (keeps other boxes away), and transparent padding inside the borders (keeps the content away from the edges of the box). These can be applied to each side of the box separately. Inside the padding is the “content area”, which, you guessed it, holds the content of the box.
If the box has no given dimensions, it is called “fluid” or “liquid.” This means that it horizontally fills the container box surrounding it, and expands vertically to enclose whatever content is within it. For the most part, such fluid boxes are quite reliable.
But let’s say you want to give horizontal and vertical dimensions to the box. Naturally these properties are called “width” and “height.” But what exactly is “width?” After all, there’s the content area, then the padding, the border, and finally the margin on the outside. As it happens, the W3C decided that the width dimension goes from the inside edge of the left padding to the inner edge of the right padding. If there is no padding, the width is measured from the inside edge of the left border to the inner edge of the right border.
Not all browsers handle this properly. Older IE browsers have a different way of implementing the box model so a work around had to be created.The infamous “Box Model Hack”There are several different versions of the Box Model hack, but all seek to feed IE5.x/win (and only that browser) a width or height value such that it will render the box to the same dimensions as a browser using the standard box model. Here is an example of a page with the box model hack in use.
Being the complex beasts they are, browsers can sometimes be shown CSS code and will (for one reason or another) totally ignore it. The first box model hack was the good old Tantek hack, which takes advantage of an IE5.x/win parsing bug involving the escape character: “”. This does the job, but it has some problems. It is difficult to understand and remember, it affects Opera adversely (requiring another hack), and it causes Nav 4 to ignore ALL CSS styles! Not good.
Then came the simplified box model hack which improves things, but still breaks Nav 4. Finally came the Tan hack (named for Edwardson Tan), which affects only IE browsers and no others. It is simple and easy to remember, and can’t harm any future browsers. A miracle hack!
You can read much more about the box model problem at CMX.
Blogging
about the author