Argh!! When I’m putting a website together, I hand-code (using the indispensable TextMate) on a Mac and I test the site in Safari, Firefox, Opera, Camino and Mozilla. Once everything is in place, I boot up my PC and test in Internet Explorer, Firefox and Opera. Firefox and Opera on the PC rarely give any grief, but normally there’s something that needs to be tweaked for Internet Explorer. Recently, I had the unexpected epiphany of a site looking as intended first time, but this was not the case this time.
In a two-column page, one column was appearing under the other. Normally this would probably be a problem with the way that the columns are floated but after considerable amount of head scratching, the culprit was found: italics.
A <p> element full of text should fit the parent element but for some reason, in Internet Explorer, if that text is italicised then it will render it slightly wider than the parent element, which in my case broke the two-column layout.
A technical description of the bug can be found here.