Testing with Internet Explorer 8

OK, this is both confusing and not confusing. For some reason, this morning was The Morning™ that I downloaded and installed IE8 RC1. Our ASP.NET evangelist Mehul Harry has been nagging me to do it for while (as in, "you are so far behind the cutting edge, Julian, you'll have to take into account the stretching of space-time in order to catch up"), so you could say I bowed to the inevitable.

There was no problem in installing it, though it did want to reboot my machine (and configure a bunch of stuff during the reboot).

Once my machine was back, it was time to test. Because my own website is my home page (it saved all my configuration and bookmarks from IE7 — very nice), it was the first thing that came up and the first to fail. WTF, as they say on the internet.

By "fail", I mean that the browser switched to "compatibility mode" in order to display the site. You could have heard me splutter up and down our hallway, here in the DevExpress offices. For, you see, I did at least know something about IE8: that it was extraordinarily standards-compliant and that at the drop of the proverbial hat it would switch to compatibility mode if it sniffed so much as a single problem with a web page (generally, that means compatibility with IE7, not with Firefox or something). In fact, my little website is not the only one: Mary-Jo Foley reports today that the list of IE8-incompatible sites (that IE8 uses to immediately display in compatibility-mode, no question) stands at 2,400 and counting. And they're sites like google.com, yahoo.com, and, ahem, microsoft.com, not sites like Joe the Biker's site about diners on Highway 42, which he maintains with a 10-year-old version of FrontPage.

But the thing was, my site validates with XHTML 1.0 Transitional and also with CSS 2.1, using the W3C tools. Yes, that's "validates" as in "there are no errors". Perfectly legal HTML and CSS, which of course displays just fine with Firefox, Safari, and Chrome. And IE7. So, you'd have thought the page would display just fine in IE8 since, you know, it's "standards-compliant." Nope, a brief flicker and then the accusatory balloon comes up, wagging its metaphorical finger, saying that the page can only be shown in compatibility mode.

At that point, I spent some time trying to find out why IE8 wouldn't display my website properly. Quite a bit of time. Let's put it like this: if you are in charge of a website and you want to make sure it displays properly in IE8 without it slipping into compatibility mode, you have a two-point plan. First, make sure the page's HTML and CSS validate. Second (optional), if it still doesn't display properly, pray to the old gods, preferably Thor and point him to Redmond. Or splutter. Or throw your mouse around. You see, the only, and I do mean only, help you get from Microsoft about making your sites IE8-compliant is to make sure they are valid HTML/CSS and have the right !DOCTYPE and so on. I searched quite a while.

The wackiest thing: it still wouldn't display properly if I added the special meta tag that "tells" IE8 how to display the content (I used the "emulate IE7" option, but it didn't).

In trying to find out what the issue was I did learn about IE8's Developer Tools. Go to Tools|Developer Tools or hit F12 (nice touch that: Firebug in Firefox uses F12 as the keystroke to open its panel/window), and you get a separate window displaying the various tools available to the web developer. There's a DOM explorer, a JavaScript debugger, a CSS explorer, and a profiler. You can set the main browser to display standard IE8 or in compatibility mode, and you can make changes to the HTML/CSS that are reflected immediately in the browser display. A very nice tool, indeed.

Using it, I found that the issue was my main DIV having a float:left CSS style. Turn it off, and the site displayed perfectly; turn it on, I got a white screen. I think this is a bug in IE8 – I can't see why the main DIV can't be floating inside the BODY tag – but I've got to parse the W3C standards to see if I'm right or not and for that I need my copy of CSS: The Definitive Guide by Eric Meyer, which is at home.

Interestingly enough, the home page on our web site contains the header's meta tag asking the browser to use IE7 mode, but the home page displays perfectly in IE8. I'll have to check to see why we did that, especially as we seem to have the meta tag twice (we want to make really sure).

IE8 will soon be released (I think it's mid-March, probably around MIX09 time), so I would recommend that you spend a quick half-hour to see how your web site behaves with it. You may be lucky and there's nothing to do, or you may be unlucky and find that there's quite a bit. But it's much better knowing and you can always add the meta tag in the meantime.

Free DevExpress Products – Get Your Copy Today