Conditional Statements for IE (Internet Explorer): web browser, Internet Explorer, Firefox, web authoring

I often run into questions on Experts Exchange asking "Why does my site look different in FireFox than it does in IE" and "My site looks great in Firefox/Safari, but looks messed up in IE". I often suggest a quick fix for people, and that is to use conditional statements for Internet Explorer.

I am not going to focus so much on why the problem happens (that's another several articles in and of itself), but how to implement IE conditional statements, and when to use them. The very basic explanation of why web pages display differently is because each browser interprets HTML, CSS, and other programming languages in its own way. W3C (World Wide Web consortium [learn more at w3c.com]) sets "standards" for web development, however it is up to the developer of each browser how closely they want to comply with those "standards". Firefox and Safari comply fairly closely, where as Internet Explorer does it more their own way (it should be noted that IE standards compliance has gotten better with each new version - 8 being the most recent).

Some styles that commonly need attention are position, paddings and margins, float elements, and in the dreaded IE6, transparent images.

So now that we have a basic idea of why my site looks "weird" in some browsers. How do we fix it? Here's how I design a site. I layout my site, test/preview in Firefox, than add a conditional statement, and "fix" it for IE. And here is how you apply the "fix" for IE:

to the head of your document add the following

<!--[if IE]>
<link rel="stylesheet" type="text/css" href="ie_style.css" />
<![endif]-->

1:
2:
3:

Select all Open in new window

The above statement say "if the browser is Internet Explorer than apply style sheet ie_style.css"

You can now use your new style sheet to adjust your CSS so your site looks just as good in IE as it does in Firefox.

So now what do you do if your site looks fine in IE8, but looks "weird" in IE6, and IE7? Now you need to add an operator to your conditional statement as follows:

<!--[if lt IE8]>
<link rel="stylesheet" type="text/css" href="ie-8_style.css" />
<![endif]-->

1:
2:
3:

Select all Open in new window

The above statement will apply style sheet ie-8_style.css to all versions of IE below 8.

...And the best part about the IE conditional statement? You can use it for just about anything

To apply styles as we discussed above

To apply JavaScript, or other script to a specific browser version

To prompt the user to upgrade or switch browsers (PLEASE EVERYONE UPGRADE FROM IE6 :))

Or to display another page or site all together

The following is a list of operators, their application, and syntax

As shown above the conditional statement requires

<!-- [if xxx]> HTML <![endif]-->

1:

Select all Open in new window

This is standard HTML comment with the IE conditional comment. So lets look at the operators:

+-----+--------------------------------------+
|!    |NOT operator                          |
|lt   |Less than operator                    |
|lte  |Less than or equal to operator        |
|gt   |Greater than operator                 |
|gte  |Greater than or equal to operator     |
+-----+--------------------------------------+

1:
2:
3:
4:
5:
6:
7:

Select all Open in new window

+------------------+----------------------------------------------------+
|[if !IE]          |if not Internet Explorer                            |
|[if lt IE 7]      |if less than Internet Explorer 7                    |
|[if lte IE 7]     |if less than or equal to Internet Explorer 7        |
|[if gt IE 7]      |if greater than Internet Explorer 7                 |
|[if gte IE 7]     |if greater than or equal to Internet Explorer 7     |
+------------------+----------------------------------------------------+

1:
2:
3:
4:
5:
6:
7:

Select all Open in new window

Examples

The following expression says if browser is Internet Explorer version 7 or below, execute script ExpertExchange.js:

<!--[if lte IE7]> 
<script language="javascript" src="ExpertsExchange.js"><script>
<![endif]-->

1:
2:
3:

Select all Open in new window

This expression is similar to examples I gave above, but instead of linking to an external style sheet all the styles are within the conditional comment. This expression says if browser is Internet Explorer version 8 make the body text red, and size:120%.

<!--[if IE8]>
<style>/*this is regular old CSS within the style tag*/ body {font-size:120%; font-color:red}</style>
<![endif]-->

1:
2:
3:

Select all Open in new window

This expression congratulates the user on using a version of Internet Explorer higher than version 6, in huge red letters:

<!--[if gt IE6]>
<p style="font-size:400%; font-color:red">Congratulations, you are using Internet Explorer version 7 or higher!</p>
<![endif]-->

1:
2:
3:

Select all Open in new window

Please visit Microsoft's site http://msdn.microsoft.com/en-us/library/ms537512(VS.85).aspx
to learn much more about IE conditional statements, and to see a complete list of operators, and how they can be used.

I hope you enjoyed my first EE article, and hope it saved you some anguish in your site development endeavours.

If you found this article useful please click the yes link at the bottom right of this article to let me know!

FDM

Gain Access to all our Tech Resources

Get personalized answers

Ask unlimited questions

Access Proven Solutions

Search 3.2 million solutions

Read In-Depth How-To Guides

1000+ articles, demos, & tips

Watch Step by Step Tutorials

Learn direct from top tech pros

And Much More!

Your complete tech resource

30-day free trial. Register in 60 seconds.

Conditional Statements for IE (Internet Explorer)

web browser

Internet Explorer

Firefox

web authoring

Hypertext Markup Language (HTML)

About The Author

Comments

Add your Comment

Join Experts Exchange Today

Gain Access to all our Tech Resources

Get personalized answers

Access Proven Solutions

Read In-Depth How-To Guides

Watch Step by Step Tutorials

And Much More!

Top HTML Experts