How To: Create an IE Specific Stylesheet

If you are a web developer you know how painful is to write a webpage that behaves same in all the web browsers. Generally the webpage created for Firefox behaves pretty much the same in Chrome, but Internet Explorer has its own problems. Whether it be problem with Multiple Selection in IE or the AJAX Cache Problem, Internet Explorer has always been a browser which needs special attention.

Thus, generally how we deal with IE is we create a separate stylesheet altogether and include it in the webpage whenever the client is using Internet Explorer.

IE Only

Here is the basic technique for an IE-Only stylesheet:

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

Non-IE Only

The opposite technique, targeting only NON-IE browsers:

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

If you need to get include stylesheet for specific versions of IE, here are a few examples.

IE 7 ONLY

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

IE 6 ONLY

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

IE 5 ONLY

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

IE 5.5 ONLY

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

VERSION OF IE VERSION 6 OR LOWER

<!--[if lt IE 7]>
	<link rel="stylesheet" type="text/css" href="IE-6-OR-LOWER-SPECIFIC.css" />
<![endif]-->