Spaces matter in IE 7's conditional statements — 25 May 2007

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.