Jamie Le Souef

If you are anything like me, and most of the Web Design industry, you’ve run into CSS bugs that in IE that just don’t make any sense. You’re building the perfect site with W3C valid CSS and XHTML1, you test it in Firefox, Opera, Netscape and even Safari beta for Windows only to find that IE6 just makes a total mess of your hard work.

According to these the stats at W3 Schools IE6 still controls 36.9% of the market (IE6 and 7 combined have 57%) so unfortunately ignoring the issue is just not an option.

We all know about CSS hacks, tips and tricks but this can make your CSS files really messy. Also you might find that you are using the same techniques over and over again on different sites.

One way that I’ve found to create reusable CSS code is to use Conditional Comments. I’ve had a number of people ask me about them so i thought i would write a introduction to them.

Conditional Comments are only available in the Windows version of Internet Explorer from version 5 onwards. The conditional comments are wrapped in the html comment tag ( <!– –>) which means that all other browsers treat the content within these tags as normal comments and ignore what’s within. GREAT!

You can include CSS files within the comments, javascript, images and – most importantly – a link to Firefox ;)

One of the best features of Conditional Comments is that you can target individual version of IE (5.0, 5.5, 6.0 and 7). You can also specify multiple version.

Here is a run down of the available syntax:

<!--[if IE]&gt;This is Internet Explorer<[endif]-->
 
<!--[if IE 5]>This is Internet Explorer 5<[endif]-->
 
<!--[if IE 5.0]>This is Internet Explorer 5.0<[endif]-->
 
<!--[if IE 5.5].This is Internet Explorer 5.5<[endif]-->
 
<!--[if IE 6]>This is Internet Explorer 6<[endif]-->
 
<!--[if IE 7]>This is Internet Explorer 7<[endif]-->
 
<!--[if gte IE 5]>This is Internet Explorer 5 and up<[endif]-->
 
<!--[if lt IE 6]>This is Internet Explorer lower than 6<[endif]-->
 
<!--[if lte IE 5.5]>This is Internet Explorer lower or equal to 5.5<[endif]-->
 
<!--[if gt IE 6]>This is Internet Explorer greater than <[endif]-->

Nothing really tricky here, the if statement is self explanatory. Begin with an if statement (if x=true then) and end with endif.

There are two special syntaxes used here.

• gt: Grater than
• lt: Less than
• gte: Greater than or Equal to
• lte: Less than or Equal to

Example of this used in xhtml
PNG Javascript fix

<!--[if lt IE 7.]><script defer="defer" type="text/javascript" src="includes/pngfix.js"></script><[endif]-->

Loading multiple CSS files

<link href="css/main.css" rel="stylesheet" type="text/css" />
<!--[if IE 6]><link href="css/ie6.css" rel="stylesheet" type="text/css" /><[endif]-->
<!--[if lte IE 5.5]><link href="css/ie55.css" rel="stylesheet" type="text/css" /><[endif]-->

Hope that helps. I now have reusable CSS files that I use in any sites that require them (hostly all). Makes life easier and a good place to bunch all those workarounds (CSS hacks?!) into one easily accessible place.

Have fun

(and please comment.. no one comments on my Blog! :))

This entry was posted on Wednesday, September 5th, 2007 at 5:00 pm and is filed under CSS, Design, Microsoft, Web Design. You can follow any responses to this entry through the RSS 2.0 feed.You can leave a response, or trackback from your own site.

There are 7 Responses to “ Internet Explorer Conditional Comments ”

1

Jamie Le Souef Says

Pleases leave your comments. If I’ve got something wrong, please defiantly point it out. Politely :)

September 5th, 2007 at 5:14 pm

2

Jamie Le Souef Says

One things I’ve noticed is that Wordpress is striping the Not quite sure how to fix that :)

September 12th, 2007 at 7:22 pm

3

Chad Says

Oy. I was wondering why IE was screwing up my css! I found the answer referenced on another site, but yours was the first I found that explained the conditional comments. THANKS!

September 20th, 2008 at 5:54 pm

4

Jamie Le Souef Says

Glad I could help out mate. I’ll be posting a new tutorial soon about using ASP or PHP to load different CSS files based on what browser the user is using.

It gives you more flexibility with your CSS rules.

Be sure to signup to my feed so you know when it’s posted.

September 21st, 2008 at 10:00 am

5

Web Design Glasgow Says

Hi,
When coding I always test in IE and then tailor to FireFox etc, that way I avoid a lot of recoding.
regards
George

April 19th, 2009 at 12:12 am

6

Jamie Le Souef Says

I used to code that way, but i found that my code would not validate. For me, it’s best to design and test in FF and/or Safari and then fix the bugs in IE (which generaly broke CSS validation). That way, you server up the valid code to everyone who’s not using IE (including the Validators) and the nasty bug fixes to IE uses.

I have noticed lately though that my fixes for IE still validate most of the time.

April 20th, 2009 at 1:42 pm

7

Increase Metabolism Nancy Says

i already had some CSS bugs with ie and i aways use conditional comments

September 17th, 2009 at 3:20 am

Leave a Reply