Conditional Styling

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.

Conditional Styling for IE

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” />

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; }

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” />

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” />

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” />

To show message only in IE 5:

<!–[if IE 5]>
<p>This message is only displayed in IE5.</p>

To show message in Browsers other than IE 5 :

<!–[if !IE 5]>
<p>This message is only displayed in browsers other than IE5.</p>

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>

To show message in IE 6 or greater :

<!–[if gte IE 6]>
<p>This message is only displayed in IE6 and greater.</p>

About The Author

4 thoughts on “Conditional Styling for Internet Explorer – Ways to Handle It

Leave a Reply

Your email address will not be published. Required fields are marked *

Select your Language please »