CSS for Internet Explorer using Conditional Comments

Ensuring that websites are compatible with all of the major browsers is an important part of any web designer/developers job. But it can be a frustrating and time consuming process. Thankfully, there is a fairly painless technique that you can employee to make the task a lot easier.

There is a feature in Internet Explorer called Conditional Comments. This can be used to create content that is visible only in Internet Explorer. By using Conditional Comments wisely, you can specify CSS style sheets for each version of Internet Explorer.

The first stage is to design and develop your website to be compliant with Firefox. The CSS style sheet you use will be your default style sheet.

Next we are going to include the conditional comment code for Internet Explorer.

Internet Explorer Conditional Comment syntax

You can develop a single style sheet for versions 5, 5.5, 6 and 7 of Internet Explorer. Name this style sheet something like ie-all.css. Then include the following code in your html pages (between your <head> tags):

<!--[if IE]>
<link rel="stylesheet" type="text/css" href="ie-all.css" />
<![endif]-->

You can create separate style sheets for the different versions of Internet Explorer. It is a good idea for have a style sheet for both version 6 and 7 as they both behave quite differently and are the most common browsers in use.

<!--[if IE 5.0]>
<link rel="stylesheet" type="text/css" href="ie-5.0.css" />
<![endif]-->

<!--[if IE 5.5]>
<link rel="stylesheet" type="text/css" href="ie-5.5.css" />
<![endif]-->

<!--[if IE 6]>
<link rel="stylesheet" type="text/css" href="ie-6.0.css" />
<![endif]-->

<!--[if IE 7]>
<link rel="stylesheet" type="text/css" href="ie-7.0.css" />
<![endif]-->

You can mix and match if you like. You could have a style sheet for all versions of Internet Explorer and then one specific to version 6. In this case, your conditional comments will be:

<!--[if IE]>
<link rel="stylesheet" type="text/css" href="ie-all.css" />
<![endif]-->

<!--[if IE 6]>
<link rel="stylesheet" type="text/css" href="ie-6.0.css" />
<![endif]-->

Order

The order in which you list your style sheets is important. To ensure that your default style sheet does not over write your IE style sheet, list the default first. For example:

<link rel="stylesheet" type="text/css" href="default.css" />

<!--[if IE]>
<link rel="stylesheet" type="text/css" href="ie-all.css" />
<![endif]-->

<!--[if IE 6]>
<link rel="stylesheet" type="text/css" href="ie-6.0.css" />
<![endif]-->

Enjoy this article?

Get my best content on Javascript, CSS, PHP & Git before anyone else and special bonuses.

Get started

Comments

This is really helpful. Thanks very much.

Add new comment