As you might know, Internet Explorer 6 isn’t the most modern browser out there. In fact, it is almost 8 years old, but many people are still using this un-secure access to the web. Because of this fact, webdesigners still have to worry about how their work looks in Internet Explorer 6.

When CSS Frameworks & Templates came around, some layout problems have been fixed, but definitely not all. These problems can usually be solved via normal CSS, but sometimes it is better to only display some (style)information to Internet Explorer users only.

That is possible with conditional comments. Conditional comments are only supported by Internet Explorer versions on a Windows machine. With these ‘tricks’, we can add special behavior to Windows based versions of Internet Explorer 5, 6, 7 and 8. The good thing is that this HTML code validates as well.

The Form of a Conditional Comment

All the conditional comment tags available are based on the same principle. This conditional comment is for all Internet Explorer versions.

1
2
3
4
5

<!--[if IE]>
If user browse with an Internet Browser, let's display this.
<![endif]-->

Depending on the situation you need to add a version number. Maybe you want to show a different stylesheet to Internet Explorer 5.5:

1
2
3

<!--[if IE 5.5]>
	<link rel="stylesheet" href="css/ie5.css" mce_href="css/ie5.css" href="css/ie5.css" mce_href="css/ie5.css" href="css/ie5.css" mce_href="css/ie5.css" href="css/ie5.css" mce_href="css/ie5.css" type="text/css" media="screen, projection" /><![endif]-->

Or only to IE7:

1
2
3

<!--[if IE 7]>
	<link rel="stylesheet" href="css/ie.css" mce_href="css/ie.css" href="css/ie.css" mce_href="css/ie.css" href="css/ie.css" mce_href="css/ie.css" href="css/ie.css" mce_href="css/ie.css" type="text/css" media="screen, projection" /><![endif]-->

You get the point, right?

What Else Can We Do?

Microsoft have added a couple parameters to these conditional comments too. For example, we can add “version Greater Than or Equal to” and “version Less Than or Equal to“. And that’s pretty handy.

Let’s say we want to add a different stylesheet for the Internet Explorer version 7 and below. We can do that like this:

1
2
3

<!--[if lte IE 7]>
	<link rel="stylesheet" href="css/ie.css" mce_href="css/ie.css" href="css/ie.css" mce_href="css/ie.css" href="css/ie.css" mce_href="css/ie.css" href="css/ie.css" mce_href="css/ie.css" type="text/css" media="screen, projection" /><![endif]-->

Or if we want to create a different stylesheet for version 6 or higher:

1
2
3

<!--[if gte IE 6]>
	<link rel="stylesheet" href="css/ie.css" mce_href="css/ie.css" href="css/ie.css" mce_href="css/ie.css" href="css/ie.css" mce_href="css/ie.css" href="css/ie.css" mce_href="css/ie.css" type="text/css" media="screen, projection" /><![endif]-->

We can any of these parameters in our conditional comment:

• lte – less than or equal
• lt – less than
• gte – greater than or equal
• gt – great than
• (IE6)|(IE7) – if Internet Explorer 6 OR Internet Explorer 7
• (IE6)&(IE7) – if Internet Explorer 6 AND Internet Explorer 7
• For more examples click here

Conditional Comments to Ask People to Upgrade Their Out-dated Browser

I usually don’t use conditional comments to fix browser bugs. The way I use them is to tell people they have an out-dated browser. In that message, I tell them they should upgrade their browser for more security and features.

1
2
3
4
5
6

<!--[if lt IE 7]>
<p class="error">Warning! You are using an out-dated version of Internet Explorer. This version has less features than alternatives and is <b>not secure</b> to use on the Internet anymore. Please upgrade your browser to <a href="http://getfirefox.org/" mce_href="http://getfirefox.org/">Get Firefox</a> or <a href="http://www.microsoft.com/downloads/en/default.aspx" mce_href="http://www.microsoft.com/downloads/en/default.aspx">Internet Explorer 7+.</p>

<![endif]-->

Via this way, you can tell people they shouldn’t be using this version and when they read it, they might upgrade to a more modern browser. As you can see, these conditional tags have many advantages to use in your next website.