How To Create CSS for IE Browser only

Following are some way to create the style sheet for Internet Explorer versions.

While working on web development (specifically in IE) we've had a hair-pulling experience with IE.

But if you are worth your salt as a CSS coder, you should be able to deal with it. IE provides comment tags, supported all the way up to the current IE 9 to target specific versions, as well

as greater-than/less-than stuff for targeting multiple versions at once.

Why use conditional style sheets?

Perfectly acceptable technique, sanctioned by Microsoft
Keeps your code hack-free and valid
You got problems, they need fixing
Keeps your main style-sheet clean.

Also, these conditional tags don't have to be used only for CSS. You could load JavaScript, or even use them down in the content of your site to display special IE-specific messages.

Here is the code

This would go in your <head> with all the other regular CSS files.

The syntax to note is "!" stand for "not", so !IE means "not IE". gt means "greater than", gte means "greater than or equal", lt means "less than", lte means "less than or equal."

For ALL VERSIONS of IE

<!--[if IE]>

<![endif]-->

For everything EXCEPT IE

<!--[if !IE]><!-->

        <link rel="stylesheet" type="text/css" href="not-ie.css" />

 <!--<![endif]-->

For IE 7 ONLY

<!--[if IE 7]>

        <link rel="stylesheet" type="text/css" href="ie7.css">

<![endif]-->

For IE 6 ONLY

<!--[if IE 6]>

        <link rel="stylesheet" type="text/css" href="ie6.css" />

<![endif]-->

For IE 7 and LOWER

<!--[if lte IE 7]>

        <link rel="stylesheet" type="text/css" href="ie7-and-down.css" />

<![endif]-->

For IE 8 and LOWER

<!--[if lte IE 8]>

        <link rel="stylesheet" type="text/css" href="ie8-and-down.css" />

<![endif]-->

For IE 6 and HIGHER

<!--[if gte IE 6]>

        <link rel="stylesheet" type="text/css" href="ie6-and-up.css" />

<![endif]-->

For IE 7 and HIGHER

<!--[if gte IE 7]>

        <link rel="stylesheet" type="text/css" href="ie7-and-up.css" />

<![endif]-->

For IE 8 and HIGHER

<!--[if gte IE 8]>

        <link rel="stylesheet" type="text/css" href="ie8-and-up.css" />

<![endif]-->

Hope this helps...!!!

Tech-Blog !!!

Monday, 19 March 2012