Oct 7

Use conditional comments to add CSS for Internet Explorer

With this short tutorial, I will show you how to use Conditional Comments to add special Style Sheets for Internet Explorer. In this way you can force Internet Explorer to render your site the way it should.

Not long ago somebody asked me how to approach Internet Explorer’s bugs. They were having a hard time making it work. So I decided to make this simple, yet useful tutorial.

By now this has become normal to me, but when I first saw how Internet Explorer (especially 6) renders websites I was shocked! And, even though IE8 is much (MUCH!) better than IE6, I still find all sorts of bugs I always have to fix.

So, we are left with no choice but to find a way to make it work. Remember that your clients won’t be amused if you hang a “RIP IE6” on their site. They will expect their website to work with every browser.

Conditional Comments to link special CSS for IE is a simple workaround. These Style Sheets will ONLY be read by Internet Explorer.

Step 1

Lets say that you want to support IE 6, 7, and 8. Put in the head of your XHTML document the following code (conditional comments):

<!--[if(IE 6)]>
        <link rel="stylesheet" type="text/css" href="css/ie6.css" />
<![endif]-->
<!--[if(IE 7)]>
        <link rel="stylesheet" type="text/css" href="css/ie7.css" />
<![endif]-->
<!--[if(IE 8)]>
        <link rel="stylesheet" type="text/css" href="css/ie8.css" />
<![endif]-->

These are the links to the CSS docs for Internet Explorer. It’s pretty much like any other CSS link, but these ones are wrapped by the conditional comment, therefore only IE will use them.

Step 2

Now create the Style Sheets called ie6.css, ie7.css and ie8.css.

Step 3

Now you need to render your site using each version of IE. Identify which elemtns IE might be rendering differently than intended. Once you know what’s wrong, you can override your original CSS rules with the rules in these new CSS for IE. Use each Style Sheet for the different versions of IE. Sometimes you need to use more specific selectors, or apply rules to different elements. It’s different every time, of course.

And, that’s it! It’s simple, but the tricky part, which is taming IE, is up to you!

Common fixes for IE6.

These rules can be used for IE6. They will correct one of the most common problems: IE6 doesn’t center the website if you used the margin:auto rule.
Here is the code:

 body { text-align: center; } #wrap { text-align: left; } 

The first rule will force IE6 to center the page. The problem is that the text will also be centered. So, we apply the second rule to your wrap element to put the text back in place. And that’s it, you will have a centered page. Easy, right?

Here a link for some more common fixes. IE Bugs.

Some useful tools.

There are different tools to check your sites in IE. Here there are a few I find useful:

Multiple IEs This one misses IE7, though. (For PC)
IE Tester This one does have IE7, but it crashes quite a bit. (For PC)
Browser Lab Adobe gives you a free subscription for a year on this one. (It works online)

If anybody wants to share their favorite tools for IE testing, go ahead, I’m curious!

I hope you find this tut useful! If you have comments of questions let me know :)

About the author

Liliana Gaete is a Front End Developer working for Mobiquity, a multinational enterprise mobile solutions company with 12 offices in 4 countries.

No Comments.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>