Above the Fold: The Blog

After three hours of staring at books, installing a plug in for Firefox that allows me to render pages (screenshots only, but good for clues) as various versions of Internet Explorer and tearing out my hair, I figured out the problem. I even worked out why the layout worked a few weeks ago and doesn’t work now.

It’s the code that I was cleverly sharing. More importantly, at certain screen resolutions (i.e. anything not widescreen) that code overflows the content area because of the way that the <code> tag works. Unlike normal text, anything inside a <code> tag does not flow onto the next line. It simply continues in one long line until there is a carriage return.

Firefox, Opera, IE7 et al. cleverly decide not to do anything to the content boxes and just allow the stray lines to overflow. IE6, on the other hand, decides that this calls for changing the box sizes to accommodate the overflow, thus breaking my tried and tested three-column layout tricks.

Actually, it belongs to A List Apart, but that’s beside the point.

So I had two options. I could edit the posts below to introduce appropriate line-breaks, but leave the layout still subject to potential breakage if I ever try that again. Or I could fix the layout.

I chose option two and added the following to the overrides css file:

#main-content {
overflow: hidden;
}

And ta-da! IE6 now works exactly as it did a few weeks ago. My problems are solved.

It is moments like this that some kind of unified approach to how browsers implement standards such as CSS starts to really appeal. It’s a shame that the idea will remain just a fantasy.