skip header and navigation and jump to contentKansas.gov: The Official Web site of the State of Kansas
Kansas.gov: A service of the Information Network of Kansas, Inc. Welcome to Kansas

Home
Planning a Site
Developing a Site
Marketing a Site
Maintaining a Site

 

Kansas.gov Resources

Home > Developing > The Box Model Hack: A New Perspective

The Box Model Hack: A New Perspective


by James Adams
Interaction Architect Kansas.gov

One of the principal tools in a Web designer’s arsenal is the power of Cascading Style Sheets (CSS). CSS, albeit a remarkable tool, has some cross-browser compatibility issues. What might work for most browsers will unfortunately not work in all browsers. For a designer’s vision to come to total fruition tricks or hacks are sometimes implemented to reach a desired outcome.

Microsoft Internet Explorer (IE) for Windows dominates the Web-browser market. The majority of Web surfers use Win IE 6, but version 5 for Windows (Win IE 5) is still widespread. Unfortunately, Win IE 5 has display problems. One of the most significant problems is the display of the box model. But like other problems, the box model can be overcome with simple tricks.

The Box Model - CSS treats every piece of content on a page, whether it is text or graphics, as a box. Each edge of the box has properties: margin, border and padding. The margin is the space between the box containing the content and the content around it. The border is simply a visible or invisible barrier between the content and the content around it. Padding is merely the space between the content inside the box and the border. The box model can be compared to a table with only one cell.

The Box Model

To illustrate how a Web designer might use the box model, imagine creating a simple bit of text that you would use as a navigation button on your Web site. Navigation buttons are an element that most designers need on their Web sites because.

<body>
<p class=”navigation”>Button Text</p>
</body>

Using CSS to format this navigation button, a Web designer could set the width to 140 pixels, the margin to 20 pixels, a 15-pixel border and 20 pixels for padding.

.navigation{
border: 15px;
width: 140px;
margin: 20px;
padding: 20px;
}

To determine how wide this navigation would be, the designer simply adds all of the elements together. The final result in this scenario would be 250 pixels [140 + 40 (margin) + 30 (border) + 40 (padding)]. The margin, border and padding are all doubled because they exist on the left and right side of the block level element. Therefore, most browsers will allot 250 pixels of space on the page for your navigation button.

Unfortunately, Win IE 5 does not interpret this information the same way. When Microsoft first implemented the box model for Win IE 5, it was determined that the width property (height also) would only include the area within the outside edges of the borders, ultimately not including the margins. In the above scenario, Win IE 5 would make the entire box 140 pixels wide, leaving only 70 pixels to display the content for the navigation button. 70 pixels does not appear to be a huge difference when regarding other elements on a Web site, however, when referring to navigation areas, 70 pixels is an enormous amount of lost real estate (space).

Win IE 5 Box Model

Introducing the Box Model Hack. To account for the misrepresentation Win IE 5 delivers, a small amount of code can be added to a designer’s style sheet to force this browser to do what is expected. There are several different versions of the Box Model Hack, the Tantek Hack being among the most common used. I have provided a sample of this hack below. Each version does essentially the same thing; feed Win IE 5 a width value rendering the box to the same dimensions that a browser using the standard box model would do.

.navigation{
border: 15px;
width: 140px;
margin: 20px;
padding: 20px;
}

* html .navigation{
width: 250px; /* trick Win IE 5 */
w\idth: 140px; /* reset width for Mac IE 5 and Win IE 6 */
}

The first style is merely a repeat of the code from above, which is recognized in most browsers, while the bottom piece of code is the hack itself. The hack is a lot easier to understand than it might first appear. The star at the beginning of the selector is the universal selector, which applies to all elements. The html just refers to the root element. As you can see, the width is set to 190 pixels, but since this affects Mac IE 5 and Win IE 6, you need one more hack to maneuver those browsers back on course. The next line with the intentional typo resets the width back to the correct measurement for Mac IE 5 and Win IE 6.

As a Web designer you are unable to control which browsers your visitors use, but utilizing this simple trick will have you combating cross-platform CSS incompatibilities in no time. Until Win IE 5 is no longer in use, the Box Model Hack is definitely another must have solution for any CSS Web designer.

For more information about Box Model and Box Model Hack, visit the Web sites below:

 

 
Give us Feedback

Tool Box

    image of tool box
  • Develop Tool Box
    Listing of software, plug-ins, templates, etc. to help develop your Web site.

Articles

Resource Links