I just spent about 20 minutes struggling with a rendering issue in IE. Apparently IE 6 has an issue with justified and italicized text.

Something inside a page was causing the content to jump around below floated divs. It showed the classic signs of a block element taking more width than it’s parent container and jumping below to where there was free space, but I couldn’t figure out what element it was.

Finally I found out it was a paragraph of italicized text. Nothing struck me as unique about this paragraph, except that it was the only paragraph that was italicized on the page. Removing the <em> wrapper around the text fixed the issue, but I didn’t understand why <em> was blowing up my layout – until I put together that the paragraph was italicized AND justified. Those two in common caused my container block to explode wider than the 100% it was taking and force everything out of place.

PC IE 6 has problems rendering justified & italicized text. So be careful placing a paragraph like this inside your pages, at least if you care about IE…. you’ll notice I don’t.