This blog is NOFOLLOW Free!

Archive for March, 2011

IE8 conditional comments strange behaviour

I have come today on a strange behaviour of IE8 regarding the conditional comments. As anyone knows, conditional comments are a very convenient way to instruct IE to display some content when it cannot display it like all the other browsers.

In short, I wanted to link within a conditional comment a special stylesheet inside the head of a document. Usually, this is a very simple task.  I made it a lot of times before, but I never noticed the strange requirement explained below.

My code was something like this:

<!--[if lte IE8]>
<link type="text/css" related="stylesheet" href="blabla.css">
<![endif}--> 

To my surprise, IE did interpreted correctly the code from "blabla.css" but displayed the following line on the top of the page:

<!--[if lte IE8]><![endif}-->

which was a totally non-sense. It was a triple non-sense, because a) this expression is a comment, b) anyway, this comment was inserted in the head section, and c) the IE interpreted the css code.

If you don't believe it, just use the following code and see it for yourself:

<!DOCTYPE html>
<head>
  <title>Test</title>
  <!--[if lte IE8]>
   <style>
   h1 {color: Red;}
   </style>
  <![endif]-->
</head>
<body>
  <h1>This should be red in IE8</h1>
</body>

The example above will output a red H1 in IE8, preceded by… a strange line that displays the conditional comment’s expression.

<!–[if lte IE8]><![endif}-->

This should be red in IE8

After scratching my head and trying to find a solution to this uncomprehensible situation, I finaly managed to deal with it. The problem was the name of the browser. When writing the comment, one must carefuly obey the syntax recommended by Microsoft and write <!--[if IE 8]> instead of <!–[if IE8]> (with a space between “IE” and “8″). This is all! The following example will output a correct page and will stop triggering the abnormal behaviour, despite the fact that the only difference is given by a space between IE and 8.

<!DOCTYPE html>
<head>
  <title>Test</title>
   <!--[if lte IE 8]>
    <style>
     h1 {color: Red;}
    </style>
   <![endif]-->
</head>
<body>
   <h1>This should be red in IE8</h1>
</body>