Updating conditional comments for IE8

CSS breaking in IE8? - have you checked your conditional comments?

If you don't know what conditional comments are Jump to the explanaition. If you do and you use them in your site and your CSS is getting messed up in IE8 you might want to check any you have. When I opened redwood.com in IE8 the top navigation was very broken and this was down to me controlling where the end "</a>" was being positioned for ie using conditional comments.

The problem

My problem was a simple one to solve and not the fault of Microsoft for once. When I wrote the code I didn't take into account later version of IE7.

<!--[if IE 7]>
</a>
<![endif]-->

The Fix

The solution is pretty simple add three little letters "gte" which stands for "greater than or equal too"

<!--[if gte IE 7]>
</a>
<![endif]-->

What are conditional comments?

Conditional comments only work in Internet Explorer (IE) and can be used to give special instructions meant only for IE. They are supported from IE5 onwards.

Conditional comments work as follows:

<!--[if IE 6]>
Special instructions for IE 6 here
<![endif]-->

Their basic structure is the same as an HTML comment (). Therefore all other browsers will see them as normal comments and will ignore them entirely.
Explorer Windows, though, has been programmed to recognize the special <!--[if IE]> syntax, resolves the if and parses the content of the conditional comment as if it were normal page content.
Since conditional comments use the HTML comment structure, they can only be included in HTML files, and not in CSS files. I'd have preferred to put the special styles in the CSS file, but that's impossible. You can also put an entire new <link> tag in the conditional comment referring to an extra style sheet.

Code

<p><!--[if IE]>
According to the conditional comment this is Internet Explorer<br />
<![endif]-->
<!--[if IE 5]>
According to the conditional comment this is Internet Explorer 5<br />
<![endif]-->

<!--[if IE 5.0]>
According to the conditional comment this is Internet Explorer 5.0<br />
<![endif]-->
<!--[if IE 5.5]>
According to the conditional comment this is Internet Explorer 5.5<br />
<![endif]-->
<!--[if IE 6]>
According to the conditional comment this is Internet Explorer 6<br />

<![endif]-->
<!--[if IE 7]>
According to the conditional comment this is Internet Explorer 7<br />
<![endif]-->
<!--[if gte IE 5]>
According to the conditional comment this is Internet Explorer 5 and up<br />
<![endif]-->
<!--[if lt IE 6]>

According to the conditional comment this is Internet Explorer lower than 6<br />
<![endif]-->
<!--[if lte IE 5.5]>
According to the conditional comment this is Internet Explorer lower or equal to 5.5<br />
<![endif]-->
<!--[if gt IE 6]>
According to the conditional comment this is Internet Explorer greater than 6<br />

<![endif]-->
</p>

Note the special syntax:

gt: greater than
gte: greater than or equal to
lt: less than
lte: less than or equal to

Source

A great article about conditonal comments which explains in more detail.

Published 22.04.09

News Feed

Bookmark & Share

Tags

Comments