I’ve finally solved the puzzle of the mysterious fat italics. A few sites I have worked on recently have made use of italic text in floated containers. You’d have thought that Microsoft would have thought to just wrap the text to fit, but no, Internet Explorer seems to increase the containers’ width, in order to accomodate the extra space required for the leaning characters, even if you’ve already set their width!

If your layout is the sort where every width pixel is accounted for, this will result in a horrible fight for horizontal space, where one container loses and is forced underneath the others.

Fortunately, the solution is fairly simple: add the ‘overflow’ style to the container. It would be best to do this only for Internet Explorer, by using an IE Conditional Comment. Internet Explorer will then be forced into dealing with the unexpected extra width as overflowing content. Then, depending on your own circumstances, you may wish the overflow to be ‘visible’ or ‘hidden’.