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.

With a little help from a friend, I managed to fix the acorns in the left-hand menu! It turns out that IE gets thoroughly confused occasionally and needs some elements specified in the CSS down to the nth degree before it will work properly. Sadly, I haven’t been able to replicate the same trick on the right-hand menu so I’ve done a little hacking around so that the right-hand menu has no acorns. Poor, deprived menu.

The acorns are still there in all other sensible browsers, though.

That trick also doesn’t work with the blog post titles, so they’re still being hacked around to work dully in IE and work in full, maple-leaf glory in Firefox, Opera etc.

One day, Microsoft will release a browser that actually does the same things that other browsers do and we’ll be able to junk all the hacks. Until that day, we just have to find new ways to work with the ‘undocumented features’.

I have spent a productive Bank Holiday weekend skinning this blog so that it now matches the rest of the site. Happily, it turned out to be much easier than I’d thought because WordPress is so well designed.

The re-work did require a few minor tweaks to the main site layout, turning it from a two-column layout to a three-column layout so that everything would fit well. A List Apart came to my rescue with this great article on three column layouts with liquid centre column and fixed sidebars. I was actually going there for something else, but when I spotted the article titled “In Search of the Holy Grail” after seeing several similar articles over the last few months, I had to give it a try. And the best bit is that it works in IE6 (with a hack or two), Firefox and Opera. I’m informed that it explodes nicely in IE7, though, so hopefully the community will be coming up with a few hacks to get around Microsoft’s latest insanity.

In fact, the only thing that the new layout doesn’t do properly is the little acorns in the left-hand navigation bar and ocassionaly in the right-hand bar. They display perfectly in Firefox and Opera, but randomly disappear in IE6. Damn.

If you’re viewing this in IE6, you will also miss the lovely little maple leaf motifs that decorate the post titles because, again, IE6 is randomly not displaying them. So I used a hack to pull those out and align the post titles properly. Firefox and Opera users can see the blog in its full glory.

Of course, I didn’t spend the entire weekend buried in code because that would be far too geeky. Nope, I braved the mud yesterday to venture into the local woods for a bit of a walk and a photo opportunity - it’s rhododendron season and I couldn’t resist. I will hopefully be updating the gallery with some results soon. But playing around with PHP, XHTML and CSS for a weekend after weeks of only seeing VBA and SQL at work was actually a lot of fun. I really am turning into a sad geek