I have been using conditional comments for years now and this may seem like old news to some, To others this is refresher.

Conditional comments can do more than allow you to serve up different CSS for specific versions you can use conditional comments for just about any type of content you want to exclude or include for various versions. Conditional comments work in IE versions 5 and newer. You can be as specific as you need to like IE 5.01 and 5.5.

The syntax is simple…
<!- -[if IE 6]>
Special instructions for IE 6 here
<![endif]- ->
Variations are as follows…
[if IE]
[if IE 7]
[if gte IE 5]
[if lt IE 6]
[if lte IE 5.5]
[if gt IE 6]
[if !IE]
[if !(IE 7)]
[if (gt IE 5)&(lt IE 7)]
[if (IE 6)|(IE 7)]

All standard comments are wrapped in <!- – and – ->
All conditional comments fall within a standard comment and have an if block wrapped in square brackets [if ] [endif]

• !: not equal
• &: and
• |: or
• gt: greater than
• gte: greater than or equal to
• lt: less than
• lte: less than or equal to

They are just comments to all other browsers and just like comments they can be anywhere comments can be… in the Head or body. Places these comments don’t work are inside CSS files or script files.

to server up diff CSS for IE you can either use embedded CSS as in <style type=”text/css”></style> or link to an external CSS file as in <link type=”text/css” rel=”stylesheet” media=”all” href=”#” />

Same for script files…
<script type=”text/javascript”></script> or <script type=”text/javascript” src=”#”></script>

IE also has a JScript version of this for using inside JavaScript files.

/*@cc_on @*/
/*@if (@_win32)
IE specific JavaScript goes here.
/*@end @*/

The Problem: HTML Lists don’t allow you to style the list counters separate form the contents of the list.

Here is the markup for my Ordered List. (note the span tag that wraps the content… this is important)

<ol>
<li><span><strong>Intro</strong> description. </span></li>
<li><span><strong>Intro</strong> description. </span></li>
<li><span><strong>Intro</strong> description. </span></li>
</ol>

The basic Idea here is to overcome the limitations of styling the list numbers separate from the content. In order to accomplish this I use the span tag to wrap the content.

Now for the CSS

ol {
color:#225E8A;
font-size:1.5em;
font-weight:900;
}
ol li span {
color:#696969;
font-size:0.7em;
font-weight:normal;
}

Whats going on?

I am setting the color and size of the font on the “ol” element, to a 1.5em larger size from its parent size (the body) and making it bold and blue. This will style the list numbers and the content. Now I need to reset the content of my list items to use a smaller font of regular color and weight. To do this I simply style the span that is wrapping the content to a smaller size and normal color and weight.

I use a .7em here to say I want to make my font .7em of its parent size which was 1.5em larger than my base size. So if my body font size is 12px, 1.5em makes my “ol” font size 18px. Now I want to re-size my lists content font to roughly 12px, so .7em of the “ol” font size (18px) we will get 12.6px. (A closer number would be .67em.) I am also resetting the color and weight to match the rest of the page text.

Example

for more information read my other post on Calculating ems.