Community Pick: Many members of our community have endorsed this article.

Conditional Statements for IE (Internet Explorer)

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]) 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" />

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

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

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     |

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     |

Open in new window


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>

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>

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>

Open in new window

Please visit Microsoft's site
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!


Comments (3)

I am using the "lt IE8" version of this conditional comment system to try and fix a float issue in ie7. When I  put the conditional comment structure in the head then pull it up in ie I actually see the comment tags themselves.

Any idea why?


crap.....sorry nikkyron I responded to this this morning, however I had my comment set to private.

These were my two previous posts.

is it an .aspx based site?

One other this happening across all browsers, only in one browser, only in IE8?

have you tried (see code view below)-----will accomplish the same thing.
<!--[if lte IE7]>

Open in new window

Hi there and thanx for your post it is helpful,

my problem is that I don't know how to use conditional statements for something very specific.

I have designed my perfonal portfolio website and I'm encountering one specific problem both in Internet Explorer and Firefox. I am an amateur and would really appreciate an expert's help.

My navigation bar and the div below it (solid color) are absolute but I have applied the following javascript to keep them fixed (meaning they remain apparent/fixed when scrolling sideways):

<script type="text/javascript">
window.pos = function() {
  if (window.scrollX != null && window.scrollY != null) return { x: window.scrollX, y : window.scrollY };
  else return { x: document.body.parentNode.scrollLeft, y : document.body.parentNode.scrollTop };

window.onscroll = function(e) {
  document.getElementById('navigation').style.left = window.pos().x + 'px';
  document.getElementById('under_nav').style.left = window.pos().x + 'px';

The probelm in IE and Firefox is major jerking of the navigation bar when scrolling sideways. I do not have this problem is Safari. And I really don't want to change the design. IF there is no solution to stop the jerking, how can I cancel the javascript only on IE and firefox?

Have a question about something in this article? You can receive help directly from the article author. Sign up for a free trial to get started.