[home] [PDF Version]
The "CSS Box Model" refers to using the margin, border and padding properties of a block level element, such as a <div>. The box model is great for styling your weblog - you can create borders and complex layouts without using any graphics and while still sticking to the HTML specifications.
There's just one problem - IE5.x on the PC gets it wrong. When borders, padding and margins are specified, their width is supposed to be added to any width specified. For example:
div.mybox {
width: 200px;
border: 10px solid lime;
}
The total width of the box, including borders, should be 220 (10 + 200 + 10). IE5.x get's it wrong, using 200 as the total width, which only leave you with 180 pixels of content space. If you wanted to have a div fit an image perfectly, or line up with other items, this becomes a big problem.
Luckily there is help at hand, in the shape of some CSS trickery. IE5.x has a broken CSS parser that doesn't understand CSS strings properly. Take a look at following style rule:
voice-family: "\"}\"";
In CSS-land, this means that the value for the property 'voice-family' should be set to '"}"' (the slashes before the quotes mean not to treat them like a quote. IE5.x doesn't understand this, and thinks that's it's encountered a base '}' symbol, and so thinks the end of the rule has been reached. Any property declarations placed after the one above will not be readable by IE5.x, but will be readable by the browsers who get the model right. The voice-family property is one that nobody uses yet, so is a good one to use for the trick. You can always reset it's value straight afterwards anyway: using 'inherited' tells CSS to get the value from the parent element:
voice-family: "\"}\""; voice-family: inherit;
So, armed with this new knowledge, we can fix our previous style rule to have the correct sized boxes on IE5.x and on more compliant browsers:
div.mybox {
width: 220px;
border: 10px solid lime;
voice-family: "\"}\"";
voice-family: inherit;
width: 200px;
}