Common fixes for Internet Explorer 5.x

A few major problems are known to affect Internet Explorer 5.x specifically, and were fixed
in versions 6 and above. When using any of the fixes from the following Solution sections,
add them to an IE 5–specific style sheet (see the conditional comment earlier that begins
<!--[if lt IE 6]>).

Box model fixes (5.x)

 
Problem: Internet Explorer 5.x wrongly applies padding and border values within the
defined dimensions of a box (which is what the box model specifies). In the following
example, the overall width taken up by the box should be the sum of its border, padding,
and width values (420px). (Note that when using shorthand, you need to be mindful that
the amount of space they take up is double the value. In other words, if you set padding
to 50px, 50 pixels of padding is applied to both horizontal edges. Therefore, in the following
code block, the sum to find the overall width of the values in the rule is 300 + 50 + 50
+ 10 + 10.) However, in Internet Explorer 5.x, the box is only 300 pixels wide—the padding
and border are placed inside the defined width, leaving only 180 pixels for content. This
issue tends to affect most CSS-based layouts.
.boxout {
width: 300px;
padding: 50px;
border: 10px solid #000000;
}
Solution: Override the width setting by setting a new value in the style sheet attached via
a conditional comment. The value should take into account the shortcomings listed previously
and therefore needs to equal the value of the relevant dimension (depending on
whether you’re defining a width or a height), along with the relevant padding and border
values.
.boxout {
width: 420px;
}

Centering layouts
Problem: The browser doesn’t understand margin: auto, so when, for example, a wrapper
is horizontally centered using the following code block, the resulting layout will be incorrectly
aligned to the left of the browser window.
#wrapper {
width: 700px;
margin: 0 auto;
}

Solution: A workaround for this problem is to use the text-align property to align everything
within the page body centrally. You then set the alignment back to the default of
left in your wrapper (or wrappers, if you’ve used more than one). If you’ve used
other/additional layout elements that have been centered (e.g., if you have separate masthead,
content, and footer containers, rather than your entire page structure placed within
a single wrapper), those elements will also need the text-align: left override.
body {
text-align: center;
}
#wrapper {
text-align: left;
}

The text-transform bug
Problem: The browser ignores a text-transform value if line-height is defined in the
same rule.
h1 {
font: bold 1.2em/1.4em Arial, Helvetica, sans-serif;
text-transform: uppercase;
}

Solution: Reconfirm the text-transform value in the style sheet linked via a conditional
comment.
h1 {
text-transform: uppercase;
}

Font-size inheritance in tables
Problem: When using relative units, text within table cells may be displayed at the wrong
size (too large).

Solution: Set font-size to 100% in a table rule in a style sheet linked via a conditional
comment.

table {
font-size: 100%;
}