For quite some time many of us have been using IE conditional comments. These are a great way to get various versions of IE to do something while excluding all other browsers. This is especially true because, technically speaking, they are not hacks. A hack relies upon an unintended flaw in a browser. Conditional comments are supported features from IE 5 and up. Your basic IE conditional is like so:


<!--[if IE]>
<style type="text/css">
#pointermenu2 {
width:490px;
}
</style>
<![endif]-->

In the above example, IE 5 and up will add the style contained within the green comment block. All other browsers will ignore it as a comment. This is all well and good but sometimes we want more fine tuning than that. The next level of fine tuning comes with specifying a version number:


<!--[if IE 6]>
<style type="text/css">
#pointermenu2 {
width:490px;
}
</style>
<![endif]-->

Now, only IE 6 will read and use the above style. We can further fine tine using the lt (less than), gt (greater than), lte (less than or equal to) and gte (greater than or equal to) qualifiers:


<!--[if gte IE 5.5]>
<style type="text/css">
#pointermenu2 {
width:490px;
}
</style>
<![endif]-->

Now our style will only be used by IE 5.5 or greater.

Fantastic! But, what if we want to include all IE versions starting at a certain version up to but not including a specific IE version? What can we do then? The answer is to nest these conditional comments but, some browsers that do not see these as anything other than regular comments (particularly FF) get confused by something like this:


<!--[if gte IE 5]>
<!--[if lte IE 6]>
<script type="text/javascript">
document.write('<style id="kludge" type="text/css">\
select {\
visibility:hidden;\
<\/style>')
</script>
<![endif]-->
<![endif]-->

IE interprets it to mean greater than or equal to IE 5 but also less than or equal to IE 6. FF sees it as too confusing and so just runs the 'shielded script' anyway. So far we have only been using one basic type of conditional comment though, the 'downlevel-hidden' conditional. This type hides its content from browsers that do not meet its test. There is also another type of IE conditional comment, the 'downlevel-revealed'. It is identical to the hidden except that it contains no dashes in either its opening or closing tags so, will not confuse other browsers when nested. As a result we can rewrite our nested comment like so:


<!--[if gte IE 5]>
<![if lte IE 6]>
<script type="text/javascript">
document.write('<style id="kludge" type="text/css">\
select {\
visibility:hidden;\
<\/style>')
</script>
<![endif]>
<![endif]-->

and all will be right with the world once more.