Finally, IE compatibility for this blog

After much head scratching, I finally figured out why this site never displayed correctly in IE for Windows. I had some tags nested in the following order in my template:

<div class="grabber"><h3>Heading</h3></div>

After this line, text in the following part of the page drifted just slightly to the left, eventually getting cut off by the bounding box of the parent div so that it became unreadable. By reversing the order of the <div> and <h3> tags, so:

<h3><div class="grabber">Heading</div></h3>

it works on IE for Windows.

I should amend my first sentence. While I’ve figured out how to fix the problem, I’m still not sure why the order of the tags should matter—and why IE/Windows cares when other browsers (including IE/Mac) doesn’t. But the important thing is the problem is fixed.

more…