In this tutorial I’m going to teach you how conditional styling work and what are some reasons to use them. First off conditional style-sheets can target certain versions of IE or hide certain things from it. It’s a good way to work around the differences Internet Explorer uses in its browser.
The tool of choice for fighting IE problems is the conditional style-sheet. IE provides comment tags, supported all the way up to the current IE 8 to target specific versions, as well as greater-than/less-than stuff for targeting multiple versions at once.
Why we Need Conditional Styling?
- We need Conditional Styling for Fixing the problems.
- We need to make our Codes Hack Free and Valid.
- We need to make our Main Style Sheet Clean.
- Microsoft Should accept our Techniques.
So here we are going to discuss our topic. All the code I’m going to show you goes somewhere within the <head></head> tags in your HTML file.
The example below shows how to target ALL versions of IE :
<!–[if IE]>
<link type=”text/css” rel=”stylesheet” href=”IE-only.css” />
<![endif]–>
It is also possible to simply write the CSS for IE right in the conditional stylesheets :
<!–[if IE]>
<style type=”text/css”>
#div_outer { margin-left: 20px; }
</style>
<![endif]–>
Here’s how to target all versions BEFORE IE 8. The “lt” stands for Less Than :
<!–[if lt IE 8]>
<link type=”text/css” rel=”stylesheet” href=”IE_lessThan8.css” />
<![endif]–>
Here’s how to target all versions ABOVE IE 6. The “gt” stands for Greater Than :
<!–[if gt IE 6]>
<link type=”text/css” rel=”stylesheet” href=”IE_greaterThan6.css” />
<![endif]–>
Anyone with previos programming knowledge knows that an an exclamation point “!” means NOT. So to target everything EXCEPT Internet Explorer :
<!–[if !IE]><!–>
<link type=”text/css” rel=”stylesheet” href=”noIE.css” />
<!–<![endif]–>
To show message only in IE 5:
<!–[if IE 5]>
<p>This message is only displayed in IE5.</p>
<![endif]–>
To show message in Browsers other than IE 5 :
<!–[if !IE 5]>
<p>This message is only displayed in browsers other than IE5.</p>
<![endif]–>
To show message in Browsers earlier than IE 7 :
<!–[if lt IE 7]>
<p>This message is only displayed in browsers earlier than IE7.</p>
<![endif]–>
To show message in IE 6 or greater :
<!–[if gte IE 6]>
<p>This message is only displayed in IE6 and greater.</p>
<![endif]–>
About The Author
Nice… Thanks for your great site
I was very much looking for these codes
Thanks
Cool .. thanks for share
Cool stuff.It came at the right time.