[MIX06] Making Your Site Look Great in IE7

Monday, March 27, 2006

Summary

Web developers have come up with a variety of techniques for dealing with a quirky, stagnant browser that continued to dominate the market for the past few years. Most chose the low road, doing whatever it took to look good in IE and ignoring the other browsers. Those who tried to build standards compliant sites relied on a slew of CSS hacks to include adjustments for IE without affecting other browsers.

Both camps will have to fix their sites to work with IE7.

IE7 has cleaned up its act, and is now much closer to complying with standards. This is good news in the long run, since catching up with the standards gives new features to IE and makes it a lot easier to develop for all major browsers. In the short term, though, we've got a lot of code to fix. That was the topic of a Mix06 session (Making Your Site Look Great in IE7). I'm going to present some of that information, mixed with some of my unofficial advice.

If you only supported IE in the past...

The IE-only camp will need to make their code standards compliant. There's a good article by Markus (the presenter at this session) on MDSN that covers some of the issues. There are a few ways to get started - you can install the IE7 Beta 2 Preview on a test machine, install IE7 in standalone mode[1], or - perish the thought - install a standards compliant browser like Firefox or Opera. The official advice is to use IE7 on a test machine.

I didn't really take many notes on this - I've really been pushing for standards compliant design for the past few years. Some general things to think about are element padding and overflow (click on the MSN screenshot to see full size).

Ironically, you'll probably be less affected by this if you've been using HTML tables to structure your pages, something that's generally considered a bad practice. Sizes may be a bit off, but the page structure won't really shift around. On the other hand, if you've been building pages out of floated div's like you've been told, you're much more dependant on element sizing and so much more likely to have bigger shifts in your pages.

If you've relied on CSS Hacks...

If you've been building standards compliant sites and using CSS driven design, then you're familiar with CSS Hacks. CSS Hacks, also known as CSS Filters, are CSS directives that take advantage of browser parsing errors to allow directing CSS instructions to a specific browser. The idea is that you build your page and CSS, then add IE-only overrides to compensate for IE's quirks. Some examples:

* html {/* IE only */}
_height: 50px; /* IE only */
height/**/:100px /* Everything but IE */
html > body {/* Everything but IE */}

These CSS quirks have been fixed in IE7, so you your standards compliant CSS will be applied to your pages, even in IE. Hopefully, IE7 will have fixed the specific browser bug you were working around, and it all sorts out without any extra work on your part - your CSS Hacks apply to your pages in IE6 and under, and IE7 uses your standards compliant CSS rules.

Unfortunately, this won't always be the case. IE7 is a lot better, but it's not perfect. So what do you do? Do you search around for other CSS Hacks that haven't been fixed yet? Nope, the recommended approach is to use conditional comments in the HTML to include CSS depending on IE versions:

Now, wouldn't it be better if this could be done in CSS? Well, kind of. You already need to make a reference to CSS files from HTML, so it's not a big stretch to say the conditions should be applied when you're making references rather than inside the CSS. But apparently the IE team did propose a CSS conditional syntax to the standards committee and it was rejected.

In case you were wondering, there are CSS imports hacks that would allow you to conditionally include other CSS files. You could build a master CSS file with default rules, then conditionally include adjustment CSS files. After some thought and listening to different opinoins on this, I agree with the Microsoft recommendation of using conditional comments.

The Holly Hack

There's one more hack which deserves special mention - the Holly Hack. The Holly Hack is designed to trigger an IE rendering engine internal property, hasLayout. Many IE quirks are due to incorrect size calculation of floated element sizes, and applying this hasLayout property to the element will cause the layout to be correctly calculated. Layout can be applied by applying a dimension to an element, and the Holly Hack works by applying a tiny dimension to the element which IE will then (incorrectly) expand to fit the content:

{height: 1%;}

The Holly Hack will still continue to work on IE6 and will be ignored by IE7, so it's not too much of a problem. However, in cases where you still need to trigger hasLayout on relatively positioned elements in IE7[2], Microsoft recommends that you use conditional comments to include CSS which sets the element's zoom to 1. This is better than setting a small element size, which isn't future-proof; setting an element's zoom to 1 should have no effect on anything:

{zoom: 1;}

Tools You Can Use

Microsoft is providing some helpful tools to make the necessary adjustments for IE7:

ExpressionFinder is a simple but very useful tool which scans CSS files for CSS Hacks which are no longer effective in IE7. Microsoft handed out a beta version of the scanner at Mix06, and I'm sure it will be publicly released soon. It can search local files, of course, but what's cool is that it can also scan a URL, grab referenced CSS files, and then report on all hacks which won't work under IE7. In my tests, it was very fast. It uses a simple blacklist regular expression list to scan for about 10 hacks.
IE Developer Toolbar is similar to the Firefox Web Developer Toolbar, but better in some ways. It's a great tool, and I've been using it on a daily basis since it was first released a few months ago. It allows you to interactively determine and modify the CSS properties of elements on a page. It shows the hasLayout property, default values, and values which are set in CSS. The "Select Element By Click" feature is especially useful.