Applying IE 7 Layout Fixes Using Conditional Comments


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.

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

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

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” />

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” />

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


Related Posts Plugin for WordPress, Blogger...

Tell us what you think

  • SneakyWho_am_i

    Good article. It’s interesting to note that IE’s conditional comments have been around for quite some time (If I Recall Correctly) and we’ve all just not_used_them because Virus Explorer is developed so slowly that it’s easier to make one global stylesheet with a hundred hacks than two separate stylesheets (as the IE hacks never need adjusted as a result of ie development)

    The conditional comments should really also be used in place of browser sniffing in a production environment (although we all know by now that browser sniffing is a BAD idea in javascript anyway) because it’s the only 100% reliable method (unless you run an incompletely set up version of a testing environment with multiple IE versions, but that’s another matter)

    Finally, and this is really being pedantic…. Why tell people to upgrade only if their virus explorer version is less than IE6 ?? That’s really, really bad!
    Anybody who CAN upgrade their browser should NOT be using IE6!! Basically if you can install and run IE7 or a proper browser, but you’re still using IE6 for every day surfing, then you should be thrown in prison.