[TUT][CSS] Fixing Padding + Margin On IE!

Decode · 20-04-2008, 10:43 AM

On Internet Explorer, when you make a <div> the padding is different than FireFox and Safari. This tut will show you how to fix it

If i used this code;

HTML Code:

<style type="text/css">
.Box
{width: 500px;
margin: 20px;
padding: 10px;
background: url('BackgroundWithWidthOf500px.GIF');
}
</style>
 
<div id="Box">
Text Text Text!!
</div>

FireFox and safari would make a box that is 540px wide (space for text/500px + margin/20px + padding/10px left padding/10px right padding).

But Internet Explorer would make a box 500px wide (space for text/460px + margin/20px + padding/10px left padding/10px right padding).

This can be realy annoying when your using background images with your divs, or when the divs NEED to be an exact width. But the solution is simple

HTML Code:

<style type="text/css">
.Box
{width: 460px !important;
width /**/:500px;
margin: 20px;
padding: 10px;
background: url('BackgroundWithWidthOf500px.GIF');
}
</style>
 
<div id="Box">
Text Text Text!!
</div>

The code above (called the box model hack) has 2 widths in, the 1st one is understood by IE, Safari and FireFox. But the 2nd one, because of the comment, confuses FireFox and Safari and is only read by Internet Explorer. And that fixes the problem.

For the 1st width, put the width minus the padding and margin of the box, and for the 2nd width, put the actual width you want the box to be.

Enjoy

Thread closed by Yoshimitsui (Forum Super Moderator): Due to being bumped.