<

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x

Conditional Statements for IE (Internet Explorer)

Published on
14,050 Points
5,550 Views
5 Endorsements
Last Modified:
Approved
Community Pick
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]-->

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

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



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

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

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

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
5
Author:FDMilwaukee
4 Comments

Expert Comment

by:nikkyron
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?
0
LVL 9

Author Comment

by:FDMilwaukee
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 question...is 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

0

Expert Comment

by:manal87
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 www.manalelias.com 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';
};
-->
</script>


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?
0
 

Administrative Comment

by:lherrou
manal87,

I see you have asked that as a separate question (which is the appropriate thing to do) here:
http://www.experts-exchange.com/Web_Development/Q_27024923.html

Any responses to the question you have posed should go there as well, so they don't clutter up this article.

LHerrou
Experts Exchange Page Editor
0

Featured Post

Determine the Perfect Price for Your IT Services

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden with our free interactive tool and use it to determine the right price for your IT services. Download your free eBook now!

In this tutorial viewers will learn how to style elements, such a divs, with a "drop shadow" effect using the CSS box-shadow property Start with a normal styled element, such as a div.: In the element's style, type the box shadow property: "box-shad…
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).

Keep in touch with Experts Exchange

Tech news and trends delivered to your inbox every month