Conditional Styling for Internet Explorer – Ways to Handle It

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]–>

Daniel Borowski

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

View Comments

Share
Published by
Daniel Borowski

Recent Posts

4 Key Components of a Comprehensive Security Plan

In an increasingly complex threat environment, organizations must take a proactive and layered approach to…

7 months ago

AI in SEO: How Smart Tools are Changing Search Rankings?

Search Engine Optimization has always been a key strategy for online growth. SEO is evolving…

9 months ago

AI and Blockchain are Reshaping App Development

I've been observing the technology space change for many years, and to be honest with…

9 months ago

Top 5 ERP Platforms with the Best User Interface in 2025

Let’s be honest. For years, ERP platforms weren’t exactly known for their looks. They got…

10 months ago

Leveraging AI and EdTech for a Competitive Edge in Your Career

At a time when automation, digitalization, and globalization are defining how industries operate. It means…

11 months ago

Top 8 Freelance Jobs to Build Financial Stability

Freelancing isn’t just a trend. Freelance Jobs has evolved into a smart way for individuals…

1 year ago