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, Netscpae 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]>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 6<![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.

PLEASE NOTE: I have added a space between the “-” because for some reason word press converts them to “–” you need to remove the space to make html comments

Have fun

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

Related Posts

• August 2, 2007 -- The PNG problem in Windows Internet Explorer
• October 26, 2007 -- 27 Tips to build a successful SEO website in 12 months
• August 6, 2007 -- Permalinks on IIS - Step by Step illustrated guide
• August 3, 2007 -- Pure CSS round Corners
• July 29, 2007 -- how to embed youtube videos as valid xhtml 1.0

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 4 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

Reply - Quote

September 5th, 2007 at 5:14 pm