As a website designer, one of the challenges we have is making websites that look and function the same in a variety of browsers. In a perfect world everybody would use the latest version of the same browser. Then we would only need to design websites for this one browser. Unfortunately this is not the case.

Perhaps people are scared of updating their browser, or don’t even know why they should. Newer browsers have better security, and support the latest technologies we use as website designers / developers.

One of the largest challenges is dealing with the Internet Explorer browser. This browser is one of the most commonly used browsers, but always seems to make problems. I’m not going to go into the different issues IE creates, I’ll assume you know. The point of this article is to show the different ways of targeting Internet Explorer browsers with your XHTML / CSS. There are many different techniques, I’m going to show the ones I use most commonly.

Conditional Statements

Import a CSS style sheet if the users browser is IE

<!--[if IE]>
<link rel=”stylesheet” href=”styles/ie.css” type=”text/css” />



<![endif]-->

Import a CSS style sheet if the users browser is IE6

<!--[if IE 6]>
<link rel=”stylesheet” href=”styles/ie6.css” type=”text/css” />



<![endif]-->

Import a CSS style sheet if the users browser is IE7

<!--[if IE 7]>
<link rel=”stylesheet” href=”styles/ie7.css” type=”text/css” />



<![endif]-->

Import a CSS style sheet if the users browser is a version of IE before 7

<!--[if lt IE 7]>



<![endif]-->

CSS Hacks

Target IE7 + IE6 with your CSS ( use star * )

#column {margin-left:20px; *margin-left:10px}

Target IE6 with your CSS ( use underscore _ )

#column {margin-left:20px; _margin-left:10px}

Digg Digg

About the Author

Mike Ilsley "ilz" is a Boston based website designer, front-end developer, WordPress addict, owner of Beantown Design, and exclusive ThemeForest author. Check him out on Twitter, Facebook, Google+ and don't forget to subscribe to the WebDesign&Such email RSS feed. Also, check out his latest project, jQueryMobileShowcase.com.

http://www.keithparent.com Keith

i’ve really been digging the targeting method that the HTML5 Boilerplate framework uses:
<!–[if lt IE 7 ]> <body class="ie6"> <![endif]–>
<!–[if IE 7 ]> <body class="ie7"> <![endif]–>
<!–[if IE 8 ]> <body class="ie8"> <![endif]–>
<!–[if IE 9 ]> <body class="ie9"> <![endif]–>
<!–[if gt IE 9]> <body> <![endif]–>
<!–[if !IE]><!–> <body> <!–<![endif]–>
then in a singular stylesheet you can address IE anomalies by simply pre-pending the appropriate ‘parent’ class applicable to the (per-)version.
of course, i’ve already adapted it to my own needs:
<!–[if lte IE 7 ]> <body class="ie7 ie"> <![endif]–>
<!–[if IE 8 ]> <body class="ie8 ie"> <![endif]–>
<!–[if gte IE 9 ]> <body class="ie9 ie"> <![endif]–>
<!–[if !IE]><!–> <body> <!–<![endif]–>
basically i just drop IE6 support and add the general ‘.ie’ class to target all versions of IE indiscriminately. works pretty darn well in most cases and saves on having to repeatedly comment the code just to notate what IE bug i’m addressing.