the empty set

Spaces matter in IE 7's conditional statements

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.

Ø permalink: https://davidroessli.com/logs/2007/05/spaces_matter_in_ie_7s_conditi/


Reponses to “Spaces matter in IE 7's conditional statements”

#1 by keed

10:50 on 5 November 2007

Try also:

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

#2 by satish

08:55 on 9 December 2008

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

#3 by Christiane

18:52 on 17 September 2009

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

Post a comment

(If you haven't left a comment here before, you may need to be approved by the site owner before your comment will appear. Until then, it won't appear on the entry. Thanks for waiting.)



Previous: Hot in Geneva

Next: Embracing iTunes Plus, or from LPs to MP4a, or some 32 years of music


About

Hello, my name is David Roessli. I am a freelance web designer and developer based in Geneva, Switzerland.

This weblog is an nth attempt to solve my multiple online personalities and weblog/rss feeds burnout issues. (more)

Words

I have been contemplating the idea of upgrading my desktop Mac since this spring. The latest 27" iMac (Quad-Core) seemed the perfect candidate, but the release of Apple's 27" Monitor last September made me stick with the Mac Pro...

Music

The autopsy of an iconic album cover picked up on Kottke.org. A stacked graph of successive radio signals from pulsar CP 1919, in a 1977 astronomy encyclopedia that originated in a 1970 Ph.D. thesis. Fascinating <3...

Pictures

Check out my latest Flickr ramblings. Mostly day to day cameraphone pictures stolen here and there.


© 2000-2018 David Roessli | v4.1 | as valid xhtml and css as possible | hosted by Infomaniak | RSS feeds. Looking for my Privacy Policy ?