Conditional Comments

You’ve built a site and it looks great on Firefox, Safari, Opera etc but after taking a look at it using Internet Explorer, your heart sinks as you see your wonderful website messed up beyond belief!

I always use Firefox during the development process to check how my website looks as it renders web pages the ‘correct’ way. (The various add ons that are available make it a great choice too). However, I also ensure that the site looks the same in all browsers. Internet Explorer (especially IE6) is the curse of many a web designer and can cause lots of problems for the newcomer to web design.

First of all, get yourself aquainted with the many bugs that IE has. As you gain experience, you will learn to build sites that ‘naturally’ avoid many of the known bugs. You can still be caught out from time to time though and that’s where conditional comments can prove very useful indeed.

What Are Conditional Comments?

Conditional comments are placed inside the <head> tags of your document. They are only read by Internet Explorer and can give specific instructions to IE alone. You use them to direct to an IE specific external stylesheet. The key thing to remember is to place them after any other links to stylesheets for other browsers.

Example

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" type="text/css" href="style.css" />
    <!--[if IE 6]>
    <link rel="stylesheet" type="text/css" href="ie6.css" />
    <![endif]-->
<title>Conditional Comments</title>
</head>

In this example, we have directed Internet Explorer 6 to use another stylesheet (ie6.css) as well as the standard stylesheet. Inside ie6.css, you put the css that IE6 needs to render the page the same as other browsers. This css will then overwrite the standard css for IE6 only.

As an example, you might have a floated div that, no matter how hard you try, you can’t get to look right in IE6; it won’t sit next to another floated div but it does in other browsers (a fairly common occurance). Your standard css might look like this:

#wrapper {
    width:760px;
}
#div1 {
    width:70%;
    float:left;
}
#div2 {
    width:30%;
    float:left;
}

Because of IE’s problem with rounding up percentages, this might not work in IE6 so ie6.css would overwrite this with the following:

#div2 {
    width:29.9%;
    float:left;
}

My example has only targetted IE6 but conditional comments can also be used like this:

1
2
3

<!--[if IE 7]>
<link rel="stylesheet" type="text/css" href="ie7.css" />
<![endif]-->

Targets a specific version of IE (7 in this case)

1
2
3

<!--[if  lt IE 7]>
<link rel="stylesheet" type="text/css" href="ie7.css" />
<![endif]-->

Targets versions before IE7

1
2
3

<!--[if  lte IE 7]>
<link rel="stylesheet" type="text/css" href="ie7.css" />
<![endif]-->

Targets versions IE7 and earlier

1
2
3

<!--[if IE ]>
<link rel="stylesheet" type="text/css" href="ie7.css" />
<![endif]-->

Targets all versions

Category: CSS // Make ElanMan happy and be the first to comment.Open my Lovebox

RSS

ElanMan