B2B Marketing Insights by Ironpaper

Crash Course In CSS Conditional Statements For Internet Explorer - IF IE

Written by Ironpaper | May 24, 2010

For web designers, Internet Explorer is a true pain in the butt. This article gives web designers a weapon to combat the various rendering engines for the Internet Explorer browsers whether 5.5, 6, 7, or 8. Since Internet Explorer does not conform to web standards that other browsers, such as Mozilla's Firefox has tried to maintain, designers have had to resort to all kinds of hacks and duplications to make web pages appear the same across different web browsers.

There is a simple technique for executing code in Internet Explorer only, which can be a great last line of defense for cross browser compatibility in web design.

Firstly, there are two types of conditions that will be generally helpful to a web designer. One is positive, which means "if a condition is TRUE, then do this...". The other is negative, which means "if a condition is FALSE, then do this...".

Positive Condition
<!--[if condition]> HTML <![endif]-->
Negative Condition
<!--[if !condition]><![IGNORE[--><![IGNORE[]]> HTML <!--<![endif]-->

Here are a few types of conditions that you can use.

IE
Any version of IE
if lt IE (insert version)
Versions less than the version specified in (insert version) for example if lt IE 6
lte IE (insert version)
Versions  less than or equal to version specified
IE (insert version)
Only version specified
gte IE (insert version)
Versions greater than or equal to version specified
gt IE (insert version)
Versions greater than the version of IE that you specified

In brief:
So basically, you can use this downlevel-hidden conditional comment to reveal something only in a specified version of Internet Explorer.

<!--[if IE 8]>
<p>This is Internet Explorer 8.</p>
<![endif]-->

Using IF IE Conditional Statements For Style Sheets

You can also use "If IE" conditional statements to reference (link to) style sheets for only Internet Explorer. Other web browsers such as Safari, Mozilla's Firefox and Opera will not reference the style sheet used in the conditional statement. This is a very common IE hack used by web designers to fix weird issues with spacing, margins, padding and other problems with pages rendered by IE.

Example:

<head>
<title>Test Page</title>
<link href="all-browsers.css" rel="stylesheet" type="text/css">
<!--[if IE]> <link href="only-ie.css" rel="stylesheet" type="text/css"> <![endif]-->
<!--[if lt IE 7]> <link href="ie-6-and-lower.css" rel="stylesheet" type="text/css"> <![endif]-->
<!--[if !lt IE 7]><![IGNORE[--><![IGNORE[]]> <link href="notie7.css" rel="stylesheet" type="text/css"> <!--<![endif]-->
<!--[if !IE]>--> <link href="not-ie.css" rel="stylesheet" type="text/css"> <!--<![endif]-->
</head>

Conditional Operators

! [if !IE] - The NOT operator.
lt [if lt IE 5.5] - The less-than operator.
lte [if lte IE 6] - The less-than or equal operator.
gt [if gt IE 5] - The greater-than operator.
gte [if gte IE 7] - The greater-than or equal operator.
( ) [if !(IE 7)] - Subexpression operators.
& [if (gt IE 5)&(lt IE 7)] - The AND operator. Returns true if all subexpressions evaluate to true
| [if (IE 6)|(IE 7)] - The OR operator.
View full post