Seriously.

I spent two hours last night poring over the WordPress template files and the stylesheet for the theme I’m building, searching for some error that would explain why IE was rendering the page improperly.

Exhibit A (Firefox):

Exhibit B (Internet Exploder):

See that grey border on the right? It’s supposed to be a solid line from top to bottom, but IE was pushing it to the right partway down, and rendering it twice at the bottom of the page.

After much frustration, I realized that there must be something “special” about the content of one or more entries on the page. Through trial and error, I managed to isolate the problem to a single entry: a movie review for Dungeons & Dragons: Wrath of the Dragon God. I tried removing any unusual formatting (image float, footnotes) without success. Finally, after hacking the entry to pieces, I removed a couple of lines where italic text wrapped from one line to the next. Voila, no more rendering problem. It didn’t make any sense, but there it was: italics.

So I searched for “internet explorer italics bug” in Google and I came up with this entry at PositionIsEverything.net. Seems IE doesn’t respect element sizing very consistently. The author provides several good examples as well as a couple of ways to work around the problem. I tried the “overflow: visible” method, which seemed to work until I put the rest of the contect back in the entry, at which point the entire middle section of the page got bumped down below the sidebars in IE (but not in Firefox).

This morning, I set the width of the rogue element to 95% and voila… all better. Well, except for a little “extra” padding on the right, but that doesn’t actually affect the rendering of the border.

I’m not finished working on the new theme, but this particular bug as been fixed. IE can still [censored] my [censored].