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]-->
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>
! [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.
by Jonathan Franchell, CEO of Ironpaper - For more tips and hacks: Need to remove a new line after h1 tags? Both web designers and SEO practitioners need to employ headline tags: H1, H2, H3 in several ways to improve web page structure and tag...
The Crowded Arena of the IT Marketplace Updated December 2024 The Information Technology (IT) landscape is experiencing rapid growth and intensifying competition. IT spending is projected to reach nearly 5.1 trillion U.S. dollars in 2024, a...
Updated December, 2024 The field of digital marketing is evolving rapidly in response to new technology and changing buyer expectations. To help career-minded marketers, we’ve rounded up the top 10 skills needed to succeed in the field. These are...
