IE Fixes - Different Sized Div Tags Rendered in IE 5 & 6

Pre-IE 6 Browsers for PC render boxes with padding differently than more recent browsers.  You might notice this issue when you browser text a page that is heavy in boxes and padding.

Here is the CSS code for our example:

#box
{
width: 200px;
padding: 30px;
border: 20px;
}

<div id=”box”>content</div>

Most browsers today add padding and border to the width. For instance if you set the width of the div to 200px, add a 30px padding and a 20px border – the browsers will render a 300px box.

20+30+200+30+20=300

Now for the Pre-IE Browsers, the difference is quite drastic.

Using the same CSS for the older browsers, the width is set, and then the padding and border are set within that. So the same settings above would render a 200px wide box. But remember that the border and padding would leave only 100px inside for the content.

200-20-30-30-20=100

This is QUITE a difference!

Here’s the solution. Use 2 div tags to render equally across the browsers. The outside box will determine the set size. The inside box will add the padding and border.

CSS code for the solution:

#box
{
width: 300px;
}

#box div
{
padding: 30px;
border: 20px;
}

<div id=”box”><div>content</div></div>

And this will render across browsers like this:

As a final note, it is obvious that you aren’t going to double ALL of your div tags in order to maintain this. I am providing this solution for a ‘trouble-shoot’. When you find your page broken as you attempt to optimize it for the older browsers, think of this solution. Only implement it where it is necessary.

Hope this helps!