Internet Explorer 7 – The State of Play

An earlier version of this article appeared in the SitePoint Tech Times #160.

In the Tech Times #158, I asked for your experiences adapting sites to support the newly-released Internet Explorer 7. Here are a couple of interesting responses I received, along with some information that might help you to deal with this new browser.

From Angela (emphasis mine):

"I tend to stick pretty closely to the standards recommendations, and test pretty thoroughly, so I didn’t find a lot of surprises with IE7 (It probably helps that I’m a pessimist!). Conditional comments make it easy and intuitive-ish to deal with problems. I’m not a fan of IE by any means, but IE7 hasn’t been as nasty as it could’ve been."

Conditional comments are definitely the way I choose to approach CSS issues in Internet Explorer, Angela. For the uninitiated, I covered conditional comments back in the Tech Times #131. In short, however, conditional comments let you apply additional style sheets to particular versions of Internet Explorer by using a special form of HTML comment that Internet Explorer will process, while other browsers and development tools will ignore them:

<link rel="stylesheet" type="text/css" href="styles.css" />
<!--[if IE]>
<link rel="stylesheet" type="text/css" href="styles.ie.css" />
<[endif]-->
<!--[if lt IE 7]>
<link rel="stylesheet" type="text/css" href="styles.ie6.css" />
<[endif]-->

In the above code, most browsers will only apply styles.css to the page. Internet Explorer browsers, however, will also apply styles.ie.css to the page. Additionally, Internet Explorer versions prior to IE7 will also apply styles.ie6.css to the page.

A number of developers in the community have objected to the use of conditional comments. Instead, they advocate the use of CSS hacks like * html (more on this in a moment). There are several reasons for this:

  • Conditional comments require you to add extra HTML markup to your
    pages to solve what is really a CSS problem.
  • Conditional comments separate your IE-specific CSS code from your normal CSS, making it difficult to see what styles are applied to a particular element at a glance.
  • Conditional comments are invisible to many development tools (like the W3C CSS validator), making them tricky to work with.

And indeed, if all you need to do is apply specific styles to Internet Explorer browsers prior to IE7, then the * html hack can be a very clean solution:

div.thingo {
  float: left;
  margin-left: 1em;
}
* html div.thingo {
  display: inline; /* Fix double float margin in IE6 */
}

In Internet Explorer 6 and earlier, the browser mistakenly believes that the html element has a parent, which can be matched with the universal selector (*).

The nice thing about this particular hack is that the CSS code it uses is perfectly valid—it simply relies on a bug in IE6 to process it differently.

A similar hack can also be used to target IE7.

In most cases, it comes down to a matter of personal preference. The one thing that conditional comments have going for them is a predictable future. I know with reasonable certainty how my conditional comments will behave in future versions of Internet Explorer, whereas with CSS hacks there is the very real possibility that IE8 will fix the problem that makes the hack work, but not the problem that the hack has been used to work around.

From Mary Ranson:

"I try to keep my CSS straightforward and I’ve avoided hacks. My sites work well enough in IE7 to pass muster. Having said that, IE7 does add to the variety of different renderings in a way that I do not find helpful, just because a page works for IE7, doesn’t mean it will work for IE6. Since IE7 won’t install on older versions of Windows, I’m expecting IE6 to continue to represent a significant proportion of users for longer than previous versions."

This is a very good point. Microsoft has claimed that they expect the automated update system in Windows XP to lead an unprecedented uptake of the new browser. While this is proving to be true, the vast number of aging Windows 2000 and Windows 98 boxes in the slow-moving institutions of the world may not make the move to IE7 for years.

Thankfully, this time Microsoft has also handed us a free, practical tool for side-by-side testing in IE6 and IE7: Virtual PC 2007. Download and install this free software on your Windows XP or Windows Vista system, then grab Microsoft’s free virtual machine image containing Internet Explorer 6 (complete with the IE Developer Toolbar) running on a pre-activated copy of Windows XP. Now you can have IE7 installed for your primary development and testing work, and then when it comes time to test in IE6, just fire up Virtual PC and type in the URL!

The copy of Windows XP included in the virtual image is set to expire on April 1st, 2007, but from Microsoft’s announcement it looks like they’re planning to update the image before that date.

I’d really like to see Microsoft release a free virtual machine containing IE5.5 for those of us still interested in providing some support for that browser. But this solution for IE6 testing alone is a huge weight off the shoulders of web designers, who would previously have to keep a spare machine around (with an extra Windows license) to test that browser.

By the way, if you’re wondering why I haven’t mentioned the “standalone” versions of Internet Explorer that you can download from places like evolt and Tredosoft, it’s because these are not adequate for in-depth browser compatibility testing. Specifically, these standalone versions all use the current (latest) version of JavaScript installed on the system, not the versions of JavaScript that these older browsers actually come with. Alex Russell has an excellent blog post on the subject.

Thankfully, Virtual PC 2007 does it all, and does it for free! The only downside is that it requires Windows XP Professional (not XP Home) or Windows Vista Business, Enterprise, or Ultimate (not Home or Home Premium), so if your operating system isn’t what Microsoft considers “developer grade,” you’re out of luck.

Update on the Windows XP Home issue: I’ve been informed by several people that Virtual PC 2007 does indeed run on Windows XP Home — it simply isn’t supported by Microsoft in that configuration. Apparently if you ignore the warnings during installation, it works just fine.

Free book: Jump Start HTML5 Basics

Grab a free copy of one our latest ebooks! Packed with hints and tips on HTML5's most powerful new features.

  • http://www.eastley.net daniel_eastley

    I dont use hacks or conditional statements to get things working in all browsers… my process is:

    1. Design a site for FF1+
    2. Test in IE7, tweak CSS until it continues to be spot on in FF1+ and IE7
    3. Test in IE6, tweak CSS until it continues to be spot on in FF1+, IE6+
    3. Test in IE5.5, tweak CSS until it continues to be spot on in FF1+, IE5.5+

    and so on – developing for the latest browsers and working backwards tweakign the css. Usually after its working in IE5.5+ and FF1+ I’ll jump onto testing it across other browsers and OS’s (opera, safari etc…)

    I’ve yet to find the need to use conditionals and hacks. I’ll always find another way round it – still keeping semantically correct HTML.

    Dan

  • http://chris.unigliding.co.uk Stormrider

    How do you solve the IE5.5 box model issues?

  • Fre420

    the only real problem I found in IE 7.0 is that it renders the height of select boxes less higher then IE 6.0 or firefox, I have no idea why it does it that way, it makes no sense to me.
    Good to know I can finally hack this issue.

  • pauldwaite

    Virtual PC 2007 does it all, and does it for free! The only downside is that it requires Windows XP Professional (not XP Home) or Windows Vista Business, Enterprise, or Ultimate (not Home or Home Premium)

    That’s a pretty big drawback. Windows XP Pro is expensive. Also, I suspect that running a whole Virtual Machine could be pretty RAM-intensive. As a web developer who’s using a MacBook Pro, it’s bad enough running OS X and XP Home side-by-side, let alone another virtual machine or Virtual PC instance just to test one browser.

    I know it’s by no means trivial for Microsoft to make a standalone Internet Explorer, and that they’d rather everyone in the world upgrade their Windows 2000 boxes to XP. Doesn’t make supporting IE 6 any easier. I’ll be sticking with the hacked standalones for the moment.

    Fantastic article, by the way.

  • http://www.saumendra.com Saumendra Swain

    IE 7 , is irritating when you put DIV blocks under <ul> or <ol> listing.

  • Dan Schulz

    Stormrider, here’s a method to handle box model hack problems. Use the Star HTML hack to hold another hack for IE 5.x. For example, if I have a DIV with an ID of “sidebar” that is eleven EM wide, but is thirteen EM wide in IE 5 and 5.5, then I’d do this:

    
    	* html #sidebar { /* IE 5.x Box Model Hack */
    		width:13em;
    		width: 11em;
    	}
    

    Just something to consider (thanks go out to Paul O’B for reminding me about this earlier this year).

  • http://www.sitepoint.com/ Kevin Yank

    Dan, I believe Stormrider was asking how daniel_eastly is able to handle box model issues without using CSS hacks or conditional comments, as he claims.

  • Dan Schulz

    Ah, sorry. Didn’t realize that (long day). He probably just doesn’t support IE 5 and 5.5 is all. Would be the easiest way to get around it.

  • http://johnwozniak.com wozbk

    Virtual PC 2007 does not install on XP Home (SP2) – which a lot of folks have. The install will not complete (though it will begin). Probably best to offer some other IE testing suggestions of which there are many beyond using an image of an OS that is not yours to keep anyway.

    As far as testing, I have found that my sites look near indentical in IE7 and Firefox and the browser behaves much more like I would expect, unlike IE6 and below. It is actually a little bit of a relief that CSS support is so much better in IE7 – perhaps one day it won’t still lag beyond every other major browser in this area.

  • http://johnwozniak.com wozbk

    I see now that you mentioned the standalone options (and their pitfalls – especially with .js) and that Mary mentions the trouble installing VPC on certain flavors of Windows.

    They don’t make this easy do they! I just resurrected a Windows box for testing (need to have at least one Windows box in the house no matter how much I would prefer not to) and am using the OEM version of Home that came with it (I try to be as by the book as I can be).

    It may make sense to MS business units to fragment the OS into so many flavors but it gets tiresome to have to pop in disk to install stuff you would thing should be there by default (e.g. speech recognition) and/or be told your plenty expensive computer is not developer grade and not be able to install the software after all.

  • asdf

    keep hacks seperate

  • http://www.sky-web.net/ Dr John

    So how does daniel_eastly handle a min-max width design that will work in IE7 and FF AND IE6?
    I’ve done a couple that use min-max widths and a conditional statement – what’s daniel’s method?

  • http://www.gd-studio.com/ logic_earth

    It is understandable that Virtual PC will not work on Windows XP Home Or Vista Home as they are meant for average home use: view pictures, watching movies, etc. If you want some virtual machine on Home one can try VMware they have a free player and lots of images already made for it.

  • A.Learner

    It is somewhat ironic that this page does not
    display correctly in IE6 ! (Left column intrudes into centre content)

  • http://www.sitepoint.com/ Kevin Yank

    It is somewhat ironic that this page does not
    display correctly in IE6 ! (Left column intrudes into centre content)

    Fixed, thanks! :)

  • http://johnwozniak.com wozbk

    Hey logic-earth. I hear ya. I am frugal and just figured I would use the OEM XP Home that came with this inexpensive box I got for Xmas (literally the cheapest at Best Buy even without any rebates – $350 – the salesperson tried to steer my anywhere but to that profit loosing box) a few years back. I don’t like having to run Windows at all, Pro, Home, whateva but as we all know you can’t deny its importance in the IT ecosystem.

    I tried the VMWare player and it made my machine unstable (had to use a restore point), but I haven’t given up. In the meantime I have the Trendsoft IE6 installed and that is good enough for most of my purposes as I don’t use that much .js.

    Ideally, I would like to have an Ubuntu box running XP and Vista in a virtual machine so if the images get any baddies I can just trash them and replace em. Soon enough – just gotta make a little time to tinker.

  • http://www.sitepoint.com/ Kevin Yank

    Update on the Windows XP Home issue: I’ve been informed by several people that Virtual PC 2007 does indeed run on Windows XP Home — it simply isn’t supported by Microsoft in that configuration. Apparently if you ignore the warnings during installation, it works just fine.

  • pauldwaite

    > “It is understandable that Virtual PC will not work on Windows XP Home Or Vista Home as they are meant for average home use”

    Bull crap. OS X is meant for average home use too, and you can do anything you want on it.

  • pd

    If the evil empire was able to incorporate conditional comments in CSS instaed of HTML, would there be any problems with them?

    Why they are implemented in HTML and not CSS is a bit strange.