Browser-Matching Stylesheets

In a perfect world, one stylesheet would create a WordPress Theme that looks perfect across every major browser. However, in some more complex WordPress themes you may have to use multiple stylesheets so that the theme will look exactly the same on every browser.

Creating the different style sheets is easy, just make a new style sheet and name it something like “stylesheet-ie6.css”, but how do you let the browser know which style sheet to use?

Using WordPress like myself, by default your browser will use the style sheet titled simply: “stylesheet.css”, so you must tell each browser specifically which one you want them to use by adding the following codes to your website (header.php if using wordpress) before your </head>

To make the css style sheet “iespecific.css” render only in Internet Explorer 6 use:

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

Only in IE5 use:

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

Only in specific IE5 version use:

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

Only in versions of IE greater than IE6 use:

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

To exclude a certain Stysheet use:

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