Conditional Styling for Internet Explorer

Categories CSS, Dreamweaver, TutorialsPosted on

In this tutorial I’m going to teach you how conditional stylesheets work and what are some reasons to use them. First off conditional stylesheets 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.
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>

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


Leave a Reply

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.