Every browser has its own way at messing up certain CSS elements. For this reason you may want to have multiple style sheets for one website, so that each browser can make use of a specific one.
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]>