Style chooser

Internet Explorer hacks

Browsers have made big steps the last few years when it comes to css and javascript support. Unfortunately a lot of people are still using Internet Explorer. Microsoft has not been able to update Internet Explorer to modern standards. Google even got so tired of waiting that they released Chrome as an Internet Explorer plug-in.

There are a number of hacks available to make Internet Explorer show webpages as they where intended. However I try to avoid them, since conditional comments are a much better alternative. The problem with most hacks is that your css will not validate, but even worse, you don't know what results you'll get in future browsers.

With conditional comments you can make a separate stylesheet for each Internet Explorer version if needed and the css will still validate.

Example

The following conditional comment will be displayed in all Internet Explorer versions (but not in any other browser):

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

Targeting a specific IE version

If you want to target only IE6 than you use the following code:

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

Or if you want to target all older versions of Internet Explorer (version 6 and less):

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

Combining style sheet

Normally you want to use the specific IE style sheet after your normal style sheet. This way all your styles are applied and then you only need to put the specific IE exceptions in the IE style sheet:

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

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

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

Leave a reply.