Does Internet Explorer 7 like your website?

Internet Explorer 7The IE blog recently announced that Internet Explorer 7 will be available for users in a few weeks time, delivering it to user via automatic update a few weeks later. This gives you a few weeks to make sure your sites are rendered correctly in the browser that a major part of your users will be using in just a few weeks from now. It boasts a lot of new features, but it has some other stuff which has way more impact on web-developers: fixes to how it renders certain CSS properties.

What does this mean for you?

If you have any Internet Explorer hacks in your CSS file(s), these hacks might now backfire on you. Some hacks will still work, but the reason you had to use the hack might be gone, and the rendering might now be broken. Luckily enough, the IE team have given us a way of fixing this. It’s called conditional comments, and though it’s a tragedy if you like semantics, it’s the preferred way of solving problems with rendering differences between IE versions.

6 steps to getting your site to look good in Internet Explorer 7

To get your site to work well in IE7, you’ll have to take the following steps:

  1. If you haven’t done so yet, download and install IE7 RC1.
  2. Open up your site in IE7 and test it. If it works, stop right there. You have coded well, and you need not do anything (for now). If it doesn’t work, keep going, salvation lies within.
  3. Move all the CSS hacks in your CSS file(s) to a specific file, e.g. ie6hacks.css, and use conditional comments to load this file only when IE6 or below is encountered.
  4. Open your site in IE7 again. Chances are, you’ll still have to apply some of your old hacks. Move these over from your ie6hacks.css file to a file called iehacks.css, and use conditional comments again to load this file whenever IE is encountered. Move over as much hacks as you need to get it to work, and keep testing in IE6 as well.
  5. In some cases, you will need to add specific IE7 hacks, create a file ie7hacks.css for this, and repeat the process.
  6. If all goes well and you have applied all your hacks, your site should now render fine in both versions of Internet Explorer.

If you’ve done the above and your site works now, you’ll have to make sure to be up to date on the latest IE7 updates and what they fix. You now have an easy way to make changes if new versions of IE7 are released and other CSS bugs are fixed. Test your sites rendering regularly, and go over the steps again if you encounter a problem. Note that conditional comments allow you to check for minor versions as well, so you could even make sure your hacks are loaded for specific minor version in the future.

3 Responses

  1. chris rhee
    By chris rhee on 11 October, 2006

    I grabbed the standalone version of IE7 a couple days ago and ran some quick tests on a bunch of sites I had worked on in the past (some of which, I know I used hacks for IE5/6) and didn’t notice any pages coming to a crash. A HUGE relief.

    I’m beginning to wonder if the damn thing is using the right rendering engine at all now, haha. Only thing I noticed was (the standalone, at least) is very slow in opening new tabs.

  2. Joost de Valk
    By Joost de Valk on 11 October, 2006

    Good for you that your sites are working Chris :), I know i still have to do some work ;)

  3. Anshuman chandel
    By Anshuman chandel on 8 February, 2008

    hello sir,
    my website is working good on all version of ie, but show blank page in can u please help me to find out what is the problem? i am not a profeesional web designer and this is my first attemt to design a website.
    thanks and regards