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

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

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


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

As shown above the conditional statement requires

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

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

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

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

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

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

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