Applying IE 7 Layout Fixes Using Conditional Comments

Marketing

Applying IE 7 Layout Fixes Using Conditional Comments

Have no doubt, the onset of IE7 will bring about new rendering bugs and issues. I’m already starting to feel the impact of it with a handful of websites. Fortunately, with much thanks to the company that helped create the fiasco, there’s an easy way to declare layout modifications specific to IE and its version.

Microsoft introduced ‘conditional comments’ in IE5. A conditional comment is an HTML comment with specific text that can trigger an action in the browser. This conditional comment is most commonly used in the HEAD area and is used to call an IE specific CSS file. IE’s conditional comments not only allow you to specify the version number, it also lets you apply simple logic, like “greater than or equal to” or “less than.” Below are some examples from their Detecting Internet Explorer More Effectively article.

Using Conditional Comments

If you are specifically interested in Internet Explorer, conditional comments might be a more appropriate choice. The following example shows an effective way to use conditional comments to display custom content.

<!–[if gte IE 6]>
You’re using a recent version of Internet Explorer.
<![endif]–>

<!–[if lt IE 6]>
Hm. You should upgrade your copy of Internet Explorer.
<![endif]–>

<![if !IE]>
You’re not using Internet Explorer.
<![endif]>

In addition, this example carefully mixes downlevel-revealed and downlevel-hidden comments to ensure that each message appears only for the intended browsers.

If you want to be able to make changes that are specific to IE7′s rendering engine, and the changes are being made using CSS, then you would add code to the HEAD area of your HTML document that’s similar to the example below:

<!–[if IE 7]>
<link rel=”stylesheet” href=”/style/ie.css” type=”text/css” media=”screen” />
<![endif]–>

Another example would be to have two different conditional comments that address either IE7 or IE6 and lower. In that case, the code might look like this:

<!–[if IE 7]>
<link rel=”stylesheet” href=”/style/ie7.css” type=”text/css” media=”screen” />
<![endif]–>

<!–[if lte IE 6]>
<link rel=”stylesheet” href=”/style/ie6.css” type=”text/css” media=”screen” />
<![endif]–>

 

Comments are closed on this post