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 @*/

This is a simple fix that will work in all browsers so no need for special IE Hacks or Conditional Comments.

First add a position: relative; declaration to the fieldset rule so that the absolute positioning of the legend will be relative to its fieldset:

fieldset {
position: relative;
background: #ffffcc;
}

Next, add a new rule for the legend element and set its absolute positioning properties to emulate its current position:

legend {
position: absolute;
top: -.7em;
left: .2em;
}

That’s it… That’s all there is to it.

This technique uses the Sliding Doors of CSS technique described by Douglas Bowman on A List Apart.

We need 4 containers or elements we can apply style to, to define the four corners we want to round. Here you see I’m using an h4 tag as my outer container and nesting inside it two spans one for the header text and one for a link or anchor point. With the inclusion of our anchor tag we now have our four elements.

<h4><span class="title">H4 Demo Title 2</span><span class="link"><a href="edit_link.htm" title="edit">Edit</a></span></h4>


<h4><span class="title">H4 Demo Title</span><span class="link"><a name="anchor">&nbsp;</a></span></h4>


The markup may seem a bit overkill in this example but I tend to always design for the future. In my original markup I wanted to allow for Graphic headers as well as edit links in my headers. But as you can see in my second example the edit link can be used as a legacy anchor. No matter how you split it up the goal here is to have semantic markup in the end not a bunch of meaningless wrapper divs. I will get into using wrapper containers in a later post.

I have created my corners in a graphical editor. I used gif’s for their transparency and browser support. The corners are transparent on the inside of the corner and have the background color of the page on the outside of the corner. Doing this allows me to style the background of the object that is being rounded with any color and not have to recreate the corner images every time I want to change the styling. Here are the images as I have made them.

Ok so now lets style it…

h4 {
background:#E3E3E3 url(corner-TL.gif) no-repeat scroll 0 0;
font-size:1.1em;
height:5ex;
position:relative;
}


I set the background color on the outer container and position the background (in this case the Top Left corner,) image to the top left and set it to no repeat. I set the position to relative so I can use absolute positioning for the rest of the corners. I also set the height here to accommodate the text so I used ex which is 1/2 em in browser calculations. see my post on calculating ems for more info. (Note: Elements when positioned absolute are removed from the document flow causing the parent containers to collapse as if they have no contents.)

h4 span.title {
background:transparent url(corner-BL.gif) no-repeat scroll 0 100%;
bottom:0;
display:block;
left:0;
padding:0 0 10px 10px;
position:absolute;
}


Here I set the Bottom left corner position in the background property and set the position to absolute with a bottom and left of zero. Its important to note that our background color is set to transparent here because all of the absolute positioned elements inside the first container sit on top and I don’t want to hide the background image of its container element. The padding is set to space in my text 10px from the left and bottom of the container. I set the display to block and any inline element so it holds its padding.

h4 span.link {
background:transparent url(corner-TR.gif) no-repeat scroll 100% 0;
display:block;
height:5ex;
padding:0 10px;
position:absolute;
right:0;
top:0;
}


Here I set the top Right corner nothing different and pad in the text 10px. I set the height to the same height we used for the container. Since this container has no content (child elements when positioned absolute are removed from the document flow causing the parent containers to collapse) we set the padding to accommodate the corner image and the height to accommodate the anchor tag.

h4 span.link a {
background:transparent url(corner-BR.gif) no-repeat scroll 100% 100%;
bottom:0;
display:block;
font-size:0.7em;
font-weight:normal;
padding:0 10px 10px 0;
position:absolute;
right:0;
}


In this last piece we set the Bottom Right corner and pad in the text from the right and bottom. I reduced the font size for the link so it does not compete with the header text. Set the padding here to 10px to accommodate the corner image and spacing in the text from the bottom and right.

The Results

H4 Demo Title 1Edit

H4 Demo Title 2 

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.

As an example, set a div font size to 10px (use a contrasting background color), zero out the border and padding, and then set the width to 100em. It should equal 1000px exactly.

The accurate method to convert a true typographic em is to use a capitol M’s width to calculate the em size. It’s the same method for calculating the en and ex units. Most browsers just treat en and ex as one-half em.

calculated: 1em == 2en == 2ex