Lately, I have been spending a lot of time sprucing up my fitness web site, Trainster.
One of the most unpleasant tasks is making a good-looking, standards-compliant web design that works on all browsers. Far and away, the most annoying browser is Internet Explorer 6. Stuff that works fine on Firefox, Opera, Safari, and even IE7 just does not work on IE6.
I wish I could just say "to hell with IE6" and not support it, but according to Google Analytics, over 70 percent of Trainster users are using IE6. So like it or not, I am stuck with making it work.
Last week, I tried out Trainster on Safari for the first time. Like Opera, Safari is a very strict browser when it comes to interpreting HTML, so it is good for testing out a site. If it works with Opera/Safari, it should work with anything. I found a few problems, further confirmed by the excellent W3C Markup Validation Service.
Thinking that standards compliance would solve all of my problems, I set out to make all of Trainster HTML 4.01 strict. It took a lot of work, especially since there are a lot of little nitpicky things that one needs to do in order to be HTML 4.01 strict. But I slogged through it, and Trainster is now HTML 4.01 strict (yay!). And strict compliance did fix everything... except for IE6. A few hours after pushing the changes live, complaints started to roll in from IE6 users saying that the site was all messed up.
Mind you, it is not that easy for me to test IE6. You can't even run IE6 on Vista, so I had to install Virtual PC 2007 and download a special virtual machine from Microsoft Support that has Windows XP with IE6 on it. And sure enough, once I loaded it up on IE6, the site didn't look right.
Fast forward over two hours of pulling my hair out trying to figure this out, and it turns out I was bitten by the IE6 xml prolog "feature". Any seasoned web developers out there are probably nodding their head in sad agreement at this point... For those who don't know, if you have this one innocent-looking line at the beginning of your HTML page:
<?xml version="1.0" encoding="iso-8859-1"?>
Then IE6 will disregard any specific DOCTYPE instructions that you have otherwise given and render the page however it sees fit (called "quirks mode"). ARGGGHHGGHHHHHH! Luckily this behavior has been removed for IE7. So I removed the line and all is well.
I'm not sure what the point of this blog entry is, other than to vent a little bit and perhaps save some other poor soul from suffering the same fate some day.