IE Conditional Comments

The avowed goal of this site is to be a "bare-essentials" resource for experienced developers wishing to create standards-compliant web pages. While it is largely possible to do this by enforcing the use of the strict HTML 4 DTD one is still obliged to allow for the legion of deficiencies that plague IE even in standards compliant mode. Many of these deficiencies have, finally, been set right in IE7. However, given that the latter requires Windows XP SP2 or better it will be a long time before it can be safely assumed that IE6 is extinct. In the mean time one is left with the need to deal with its many quirks. That is why we have, grudgingly, elected to discuss IE Conditional Comments.

Conditional comments were introduced in IE5. They bear the form

<!--[if IE n]>
   statements
<![endif]-->

where n is the IE "version vector." This would be 5.5000 for IE5.5, 6 for IE6 etc. Note the space before the version vector. One can optionally place the logical operators listed below between if and IE.

• lt:Less than
• lte:Less than or Equal to
• gt:Greater than
• gte:Greater than or Equal to
• !:The "not" operator

Browsers other than IE will treat such comments as normal HTML comments and simply ignore them. Note that there should be no spaces in the terminating sequence ]--> for the conditional comment to be interpreted correctly by IE7.

On this site we have used conditional comments to style the Jump To... combobox which appears on this and other pages. Our technique involves using a <select> form control and making it transparent. Under it we place a <div> containing another div floated to the right and styled to look and feel like a button with an arrow, ▼. We then use some simple JavaScript to change the appearance of the faux combobox when the user hovers over the real one. Unfortunately, this technique fails in IE6 since it ignores attempts at modifying the opacity of select controls. Therefore we use an IE conditional comment targeted at pre IE7 browsers

<!--[if lte IE 6]>

to hide the faux combobox and settle for showing the real combobox with its intrinsic, browser-defined, style.