Andrea's Blogger Templates

Unfortunately, older versions of Internet Explorer, along with IE 6 in quirks mode, use their own, nonstandard box model. Instead of measuring just the width of the content, these browsers take the width property as the sum of the width of the content, padding, and borders. This actually makes a lot of sense, because in the real-world boxes have a fixed size, and the padding goes on the inside. The more padding you add, the less room there will be for the content. However, despite the logic, the fact that these versions of IE disregard the specification can cause significant problems. For instance, in the previous example the total width of the box would only be 90 pixels in IE 5.x. This is because IE 5.x will consider the 5 pixels of padding on each side as part of the 70-pixel width, rather than in addition to it (see Figure 3-3).

Luckily, there are several ways you can tackle this issue, the details of which can be found in Chapter 9. However, by far the best solution is to avoid the problem altogether. You can do this by never adding padding to an element with a defined width. Instead, try adding padding or margins to the element’s parent or children.