Screenshot of the new code, with debugging background colours (greys) showing.
I’ve spent much of today working on an XHTML/CSS code rewrite for the University of St Andrews website.
Based on feedback from staff and students, having used the site for the best part of the last year and the desire to make the code more robust and work in more browsers we’ve started again and rewritten the code from the scratch, throwing in a few design tweaks. And on the whole we’re really pleased with it.
Browsers
Our Google Analytics statistics reveal that the majority of visitors use newer browsers, the usual suspects:
- Internet Explorer 7
- Internet Explorer 6
- Mozilla Firefox 2.x
- Apple Safari 3.x
- Opera 9.x
But there are still quite a number of visitors who still use older browsers, such as IE5.01/Win, IE5.23/Mac, IE5.5/Win and older versions of Mozilla Firefox, Netscape and Opera.
My desire was to ensure that the new code works as perfectly as I can get it in the newer browsers (our base-line browsers), and it would be a real bonus if I could get it to work in IE5.01 and IE5.5, as well as some of the other browsers.
IE5.01 jumping bug
Well, this afternoon I managed to get it working perfectly in IE5.5 and almost in IE5.01 apart from one really annoying bug.
Whenever I hovered over the left-hand navigation the website would jump down the page! (See screenshot below.) And the more I moved my mouse over the navigation the more it would leap on down the screen until there was nothing there but white space.
I spent about an hour pouring over CSS books and websites trying to identify which IE bug this was, and how to fix it. Then just as I was about to give up I found the answer on the A List Apart website, in an article called Drop-Down Menus, Horizontal Style.
It said
Anyone using IE5.01 on Windows will notice that the menu jumps around when you hover over some of its items. The problem is easily fixed by modifying our previous hacks as follows:
/* Fix IE. Hide from IE Mac \*/
* html ul li { float: left; height: 1%; }
* html ul li a { height: 1%; }
/* End */
So I tried it, and lo and behold it worked! There was much rejoicing and leaping around the office.
Was it all worth it?
Within the last month the University has had 318,282 visits to the website. 189,328 visitors used IE7, 155 used IE5.01. That represents just 0.04% of all visitors using the old and outdated web browser.
Was it really worth spending 90 minutes trying to find this obscure patch for a browser that hardly anyone uses? It was certainly fun trying to track it down, and it satisfied my intellectual curiosity, I went home on a high feeling that I’d done something worthwhile and productive today. So in that respect yes.
Our desire is to make the site as accessible as possible. As I said, we see this as real bonus that we can get the new code working in IE5, but those visitors still using IE5 won’t see it as a bonus, I imagine they’ll be delighted that we took the time to ensure that they can still view the site as we’d designed it. Maybe one of them will come to study with us, as a student, and go on to bigger and better things. Who knows.
Sure, it would be great if they upgraded their browser. Perhaps they can’t. Perhaps they’re still on dial-up accessing from a poorer area of the world. Who am I to judge?
In my interview I said that I was interested in the pastoral care of Web users. Today was one of those days where I could put that into practice.
Update
I’ve been playing around with the code since writing this post, and have discovered that if you have a sub-list within the main navigation list then this hack doesn’t work. Darn!
However, I’ve also discovered that it’s the background-color element with the hover rule that breaks it in IE5.01/Win.
It would appear that serving up an IE5-only conditional comment that pulls in an IE5-only style sheet that overrides the background-color, such as:
background-color: transparent !important;
does the trick. Changing the text colour works too, but almost everything else I’ve tried, such as font-weight, text-transform or border also breaks it, it would appear. Simplicity on a:hover within IE5/Win would appear to be the key it seems.
