Website Design United States, Website Design California, Website Designing United States, Website Designing California

Hacking the Box Model Problem

If you're making the move from using tables to using CSS to layout your web sites you may have already encountered the situation known as the "Box Model Problem". It's very well documented and you can find the code for the hack to fix the problem. But in order to become a better web developer we should know and fully understand what's going on with the box model problem. Hopefully this article will help.

What's the problem?

The Box Model problem is the result of way Windows versions of IE 5.x and IE 6 in "quirks mode" handle a CSS box with a set width, padding and borders. Before we explain the situation you should understand that when we're talking about a "box" in CSS you should think of the "box" as being a table with only one cell - not always a table but more commonly a div with a set width.

You'll notice that we mentioned the Windows versions of IE 5.x and IE 6. This is because IE 5.x for Mac actually handles the box model situation correctly. We also mentioned IE 6 in "quirks mode" above. Microsoft fixed the box model problem for IE 6 but only when it was in "standards mode". IE 6 goes into "quirks mode" when you use a <?xml ... ?> prolog at the top of your document. If you use the xml prolog at the top of your document make sure that you take the time to test out the page to make sure everything is working the way you want it to.

Okay with all of that said let's take a look at an example of the situation. Let's assume that we've created a div with a margin of 15 pixels, a red border that's 10 pixels wide, has 5 pixels for padding and has its width set at 200 pixels. The CSS code would be:

div{
margin: 15px;
padding: 5px;
border: 10px solid #f00;
width: 200px;
}

In our html document we have the code:

<div>
The Box Model Problem
</div>

The Results

If we use the code above in a web page we'll get different results depending on the web browser we use to view the page. Take a look at the two images (Figures 1 and 2) below.

Box Model Ex. Correct
Figure 1

Box Model Ex. Incorrect
Figure 2

Figure 1 shows the box the way it is meant to be shown according to the W3C Specifications for CSS. The total width of the area is 200px not including the border or the padding.

Figure 2, on the other hand, shows the way IE 5.x and IE 6 (in "quirks mode") shows the box. Those IE browsers set the width of the box, borders and padding, to 200 pixels. The border width and padding are included in the total width leaving less than 200 pixels for the inside of the box.

It may be easier to see if you look at Figure 3 below to compare the two. The blue represents the 15 pixels of padding. The red represents the actual 10 pixel solid red border. And the black represents the 5 pixels of padding. The top image is how the box should look according to the W3C Specifications and the lower box is how IE renders the box.

Box Model Compare
Figure 3

If we break down the values above we can see what is actually going on here. First let's look at the proper way the box is handled.

We have a total width of 200 pixels. The 5 pixel padding adds 10 more pixels (5px for the left and 5px for the right). The border adds 20 pixels (10px for the left and 10 more for the right). The margin does not come into play for this problem so we won't factor it in.

200px + 5px + 5px + 10px + 10px = 230px

The way IE handles the box though shows us that we have a total of 200 pixels for the whole box. Which means that the space inside the box - for text, images, etc. - is less than 200px.

200px - 5px - 5px - 10px - 10px = 170px

The Hack

We want to make sure that the total area inside the box is 200 pixels in width. Since IE 5.x and IE 6 in quirks mode doesn't render the box correctly we need to apply a hack to the CSS code to get the desired 200 pixel width. There are a few "Box Model Hacks" that you can use but the best one to use is the Tan Hack.

One of the first hacks out for this problem was the Tantek hack which made use of an IE 5.x parsing bug. While it did the job it had caused some other problems. For one it would cause Netscape Navigator 4 to ignore all CSS styles that followed it. Secondly it was a little hard to remember and caused some problems in Opera web browsers which meant you needed to apply a second hack ("Be Kind to Opera" hack).

The other hacks had some problems as well. Usually leaving you to use other hacks to fix the problems the box model hack caused. Then along came the Tan Hack which would focus only on IE browsers and will prevent future browsers from breaking down.

The Tan Hack

Let's take a look at the code we had for our CSS example above with the Tan Hack applied before we explain what is actually going on.

div{
margin: 15px;
padding: 5px;
border: 10px solid #f00;
width: 200px;
}

/* Tan Hack */

* html div{
width: 230px;
w\idth: 200px;
}

Let's break the hack down line by line.

* html div{

The * is the universal selector in CSS. It applies to all elements. After the * we have a space, "html", another space and then finally "div". The reason for this line is to help IE work through some of its problems. IE wants to think that there's some outer element outside of the html element and we need to account for this. The * before the html in this line takes care of that situation. IE seems to be the only browser that this needs to be done for and this is partially how the Tan Hack focuses only on the IE browsers.

width: 230px;

With this line we're setting the overall width of the box (div in this case) to 230 pixels. At this point all browsers will be setting the width to 230 pixels. Keep in mind though that at this point all we've really done was set IE 5.x and IE 6 (if in quirks mode) to have the proper "inside" width of 200 pixels. All other browsers will actually be 260 pixels in total width.

IE 5.x and IE 6 in quirks mode:
230px - 5px - 5px - 10px - 10px = 200px;

Browsers that follow W3C Specs:
230px + 5px + 5px + 10px + 10px = 260px;

So at this point we need to make sure that the other browsers go back to having a total of 200px for the total inside width. We can do so by using the next line of the Tan Hack.

w\idth: 200px;

IE 5.x for Windows will ignore this line and will keep the total width for the div set to 230px. However IE 5 for Mac and IE 6 will ignore the escape in this line (the '\') and will set the width to 200px.

Note:
It is important to note that when you use the escape you must use it within the property name and you must not use it before the letters a, b, c, d, e, or f. Doing so may screw up the whole hack because the character may be rendered as a hexadecimal character. So don't put wi\dth: 200px; in the code. Just remember to escape any letter other than a-f.

Problems in IE 6 - Quirks Mode

We've mentioned IE 6 in quirks mode and after reading the paragraph above you may have noticed that something just isn't right. If we have to have our page in IE 6 quirks mode and use the hack above, the box is not rendered correctly. But at the same time we want to make sure that we don't cause any problems for IE 5 on Mac. So what should we do? Well thankfully there's a solution for that situation.

If we have to have our page in IE 6 quirks mode and we need to apply the Tan Hack we just simply need to add an easy fix to the CSS code. So our code would look as follows: div{
margin: 15px;
padding: 5px;
border: 10px solid #f00;
width: 200px;
}

/* Tan Hack */

* html div{
width: 230px;
w\idth: 200px;
}

/* Pre Hack Comment \*/
* html div {
width: 230px;
}
/* Post Hack Comment */

If you look at the comment line /* Pre Hack Comment \*/ you'll notice that right before the closing comment tag we use an escape. Because of that escape IE 5 for Mac will not notice the closing comment tag and will treat the CSS as a comment until the comment is actually closed. It is important that you place a comment after the actual CSS or else IE 5 for Mac may ignore the rest of your CSS.

Conclusion

I'm sure that you can see how differently browsers can interpret CSS even from operating system to operating system. IE 5 on Windows handles things differently than IE 5 on Mac. It's important to pay attention to the hacks and their uses. Avoid them if you can but if you need them, make sure you know how they work and what they are doing. They can help you notice other problems you may not have thought about. For example... considering this article and the effects borders and padding can have on the overall width... what do you think happens if you have a set height for a box? Yup you guessed it the same problems are there. IE 5.x and IE 6 in quirks mode (both for Windows) does the exact same thing for the height.

Keep that in mind. Watch your code and the results. And as always if you have any questions, stop over at PC and ask some questions.


WEB DESIGN INDIA
42 B Malviya Nagar , New Delhi-110017

Skype: manmeetsi
Email: support.webdesignindia@gmail.com
Tel: 91-011-40502005, 9810067295

 















 


© 2008-2009 dotnet4all.com