Day: October 20, 2007

The latest version of Mozilla Firefox 2.0.0.8, I’m sorry to report, broke a couple of our web pages yesterday.

UPDATE: This problem has now been fixed in Firefox 2.0.0.9: see Firefox 2.0.0.8 update to be updated

I noticed it just as I was about to go out for lunch. I was checking out a page on the University website and followed a broken link … to a broken 404 page.

Investigations

At first I simply suspected that it was due to some CSS tinkering that either my colleague or I had done. But neither of us had done any.

And then I discovered that it was working fine in Firefox 1.5, IE6, IE7, Opera 9 and Safari 3. It was working fine in my colleague’s installation of Firefox 2.0.0.7 … and then when he restarted the browser to allow its automatic update to version 2.0.0.8 it promptly broke.

So the culprit was indeed the latest incarnation of my favourite browser. How disappointing.

The problem

The way that the page is constructed is that there is a div that wraps the page’s main content. If I was recoding it today, I’d call it #contentWrapper; when I coded it 10 months ago, I called it #main.

Within #main there are three other divs, in order:

1. #content
2. #sidebar
3. #related_content

#main then has a background image of part of the University crest. How much of the crest is displayed depends entirely on the height of its three internal divs.

Only, this appears to be the problem that Firefox 2.0.0.8 has highlighted/discovered/introduced* (*delete as applicable): it now does not recognize the height of the internal divs: #content, #sidebar and #related_content and so collapses, as you can see from the screenshot above.

The (temporary) fix

Introducing a min-height CSS attribute to the code has temporarily fixed the problem, but fixed the height of #main at 550px — enough for the 404, 401 and the front page, which all use that code.

Recoding

I’m now working on a more robust fix … in fact, I’m now working on recoding the entire site to make it more usable by the few ancient browsers that Google Analytics informs us are still being used to visit the site, such as Firefox 1.0, Firefox 1.5, and various older versions of Netscape and IE.

I had used a variation of Matthew Levine’s In Search of the Holy Grail method on A List Apart, mixed with a Dan Cederholm’s Faux Columns approach, for a number of reasons:

1. I wanted the site to be as accessible as possible, and decided that placing the main page content as high in the source code as possible would be helpful.
2. Do you know how difficult it is to achieve something as seemingly simple as creating a page layout with three equal-height columns?
3. The ‘holy grail’ approach worked for almost everything we needed until it came to wanting to jump down to page anchors. We had a couple of A-Z lists and wanted to be able to click on ‘D’ to take us down to the ‘D’ entries. Instead, it pulled ‘D’ up to the top of the page and made A-C disappear completely!!
4. We decided to fully support only modern browsers: IE6 and IE7, Firefox, Safari/Konqueror and Opera 8 and above. (While I don’t class IE6 as a modern browser it’s the one used on about 75% of all the university PCs so we had no choice but to support it.)

I guess I now need to be finishing writing these fixes sooner rather than later. I’m just a little disappointed that the latest version of my favourite browser has broken the code, while Safari, Opera 9 and even IE7 saw fit to render it as expected.

However, what I’m not entirely certain about is whether Firefox is now simply rendering the code as it should be (in other words, I’d missed a trick with my code) or whether this genuinely is a fault with Firefox’s rendering. Time will tell.