Workarounds.

2002-02-22.

To handle the problem with CSS box widths and italicized text in IE5, I recommend any one of the following workarou- I mean, uh, measures:

– Use a background graphic, rather than box borders. This is the best solution when attempting precise alignment of borders with a title graphic. Yes, I know it eats up a few more bytes, and yes, I know it’s a waste of CSS capability, but do you want that CSS box to align or not?

– Don’t pad your boxes. Since some browsers put padding inside the width, while compliant browsers add the padding to the width, just leave the padding out of your CSS declarations. Instead, you can “simulate” padding by adding an inline “margin” style declaration inside the box DIV, like so… (It doesn’t always work, though.)

<div class="box">

<div style="margin: 0px 10px">

Hello! I'm padded!

</div>

</div>

– Use the box model hack. It’s a piece of genius, though I don’t recommend resorting to this, since it is a workaround to overcome IE5’s own shortcomings. But if you need it, there it is, and it works quite well. Just remember: in the years to come, truly compliant code will shun such hacks. (But then, I have feeling that hacks such as this will always be needed anyway.)

Tim adds his own stylesheet hack: “IE5+ understands “expressions”, so you can use the userAgent string to see if the browser is IE5.x, and if so, give it a different value.”

Other browsers simply ignore the expression and use the first value. IE6 reads the expression, but doesn’t pass the conditional, so uses the second value within the expression.

This doesn’t validate, though. But it’s a whole heck of a lot easier to read and understand than Tantek’s hack. It should last forever, because the W3C would never use the “expression” feature (at least not as IE has called it).