Loading different styles for the different Internet Explorer versions

The first way is by using conditionals. This will only load the CSS file for a specific version:

<!--[if lte IE 7]><link rel="stylesheet" href="ie7.css" type="text/css" />< ![endif]-->
<!--[if lte IE 6]><link rel="stylesheet" href="ie6.css" type="text/css" />< ![endif]-->
<!--[if lte IE 5.5]><link rel="stylesheet" href="ie55.css" type="text/css" />< ![endif]-->

If you don’t need to be specific with versions, you might want to use the following code. This will load if using Internet Explorer (any version)

<!--[if IE]>
     <style type="text/css" media="screen">
          #myID {
               background-color: red;
          }
     </style>
< ![endif]-->

You could also use "hacks" (though this is not exactly encouraged).
This loads in Internet Explorer 6 but not in 7:

* html #myID {
      *background-color: red;
}

This loads in Internet Explorer 7 but not in previous versions:

html>body #myID {
     *background-color: red;
}

Name
Email (optional)	Your email will only be used to show your Gravatar and to send you replies to this article (if you opt to receive them). You won't get ANY other messages at all!
Comment No HTML allowed
Notify me via email