The 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:
- If you haven’t done so yet, download and install IE7 RC1.
- 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.
- 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.
- 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.cssfile 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.
- In some cases, you will need to add specific IE7 hacks, create a file
ie7hacks.cssfor this, and repeat the process.
- 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.