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.”

width: 400px ;

width: expression( navigator.userAgent.match( /MSIE 5/ ) ? "440px" : "400px" ) ;

And when all is said and done, CSS and italics in IE5/Win are still a problem.

(This lesson is provided to you for free from Brownpau’s School of Hard Knocks. Ow.)