Conditional Styling for Internet Explorer – Ways to Handle It

CSS Dreamweaver Tutorials

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” />
<![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]–>

A professional freelance web developer/designer, skilled in Web/Graphic Design, Programming, 3D Animation, Game Design & Photoshop. I love what I do.

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 *