It's pretty simple actually....
In CSS, the box model is structured like so:
+-------------------+
| Margin |
| +-------Border--+ |
| | Padding | |
| | +---------+ | |
| | | Content | | |
| | +---------+ | |
| +---------------+ |
+-------------------+
(Apologies for lame ASCII art)
In "true" CSS, the width: of the element is actually the width of the content.
So, if you have a box with width: 400px; and padding of 10px, no border or margin... the overall size displayed on the screen is supposed to be 420px (400 + 10 + 10).
In IE, however, the box model is incorrect (though, arguably more logical). In IE, the padding is included in the width. So using the same width/padding as above, the overall box would only be 400px, and the content 380px.
Due to a CSS-rendering flaw in IE, it's easy to workaround, just use voice properties.
ex:
#content {
width:420px;
voice-family: "\"}\"";
voice-family:inherit;
width:400px;
}
/* be nice to Opera */
html>body #content {
width:400px;
}
Basically, how it works: IE reads the 420px width, making the content 400px (what we want), but stops reading the rule when it encounters a property it doesn't parse, in this case, voice-family.
Other browsers that get the box model correct, keep reading past the voice family (and resetting it), and then re-read the correct width value (400px).
The last line of that is known as the "Be nice to opera rule". Basically, Opera suffers from the lack of voice-family capabilities, so it stops after reading 420px..... but Opera does the box model correctly... so instead you use the following rule that IE can't understand (the > means nothing to IE)... and it fixes the width for Opera.
AHHHH all done.
http://tantek.com/CSS/Examples/boxmodelhack.html for the 'original' explanation.
