Spaces matter in IE 7's conditional statements 

Tags :
Internet Explorer 7

This might not be news for you, but it came as a surprise to me when I recently tested a website under Internet Explorer 7 and discovered that nothing showed up, although it displayed normally under IE 6.

The culprit was the conditional statement in the head section eventhough it targeted browsers lower than version 7. Internet Explorer conditional statements are proprietary code that enable a web designer or developer to feed specific code to a specific version, or range of versions, of Internet Explorer. It is very handy to add IE specific css or javascript for example.

I use it to tweak layout related problems with IE by overriding or modifying certain css properties of the main css stylesheet or rewriting part of the DOM. Browsers other than IE treat the statement as a comment, and thus ignore its content.

This specific conditional comment lacked a space after the opening comment element (or had a space to much before the closing comment element) and IE 7 commented out all the page as a result. Interestingly, the reverse isn't true, and it's only this specific configuration that creates this issue.

This configuration doesn't work (unbalanced space on closing comment element):

<!--[if lt IE 7]>
<link rel="stylesheet" type="text/css" media="all" href="/css/iewin.css" />
<![endif] -->

But these do:

<!-- [if lt IE 7]>
<link rel="stylesheet" type="text/css" media="all" href="/css/iewin.css" />
<![endif]-->
<!--[if lt IE 7]>
<link rel="stylesheet" type="text/css" media="all" href="/css/iewin.css" />
<![endif]-->
<!-- [if lt IE 7]>
<link rel="stylesheet" type="text/css" media="all" href="/css/iewin.css" />
<![endif] -->

Although IE 6 doesn't suffer from this issue, I felt this quirk was worth mentioning.

Posted a response ? — Webmention it

This site uses webmentions. If you've posted a response and need to manually notify me, you can enter the URL of your response below.

Comments and responses

  • 05 Nov 2007

    keed:

    Try also:
    <!—[if IE 7]>
    <link rel="stylesheet" type="text/css" media="all" href="" />
    <![endif]—>

  • 09 Dec 2008

    satish:

    I was going nuts as to why the conditional statement always ended in a comment line…
    You made my day..
    Thanxx amillion..

  • 17 Sep 2009

    Christiane:

    The last option by keed worked for me as well. The two blank lines made the cond. comment lines disappear. Thanks a lot!