Sleeping Monkey

Sleeping Monkey Presents...

Microsoft Internet Explorer Workarounds

There are a number of methods that I’ve used in the past to work around Microsoft Internet Explorer’s downfalls. But which one is actually the best?

Conditional Comments

Conditional comments are the method I’ve used most in the past, and they provide quite a bit of flexibility when it comes to design. It involves producing a separate stylesheet for each version of Internet Explorer that you want to work around, and linking only those stylesheets if the user is using Internet Explorer. The basic syntax is as shown below:

<!--[if lte IE 6]>
<link rel="stylesheet" type="text/css" href="path/to/ie6/and/below/stylesheet.css" />
<![endif]-->

In the syntax above, only Internet Explorer 6 and below will get served the stylesheet, aptly named “path/to/ie6/and/below/stylesheet.css”, which can contain any changes necessary to push IE 6 and below into shape.

This method is beneficial because it enables you to specify separate stylesheets for each version of Internet Explorer that has problems. However, it provides no support for browsers that aren’t Internet Explorer, but also don’t have advanced CSS capabilities that are served to the other browsers. That’s where advanced CSS selectors can come in handy.

Advanced CSS Selectors

This is where the talk gets a bit more technical. CSS has the ability to select elements from within the HTML and apply styles to them – this forms the fundamental base of most websites nowadays. For example, the selector below will change all text within a div to red:

div {
color: red;
}

IE and the other browsers have no problems with this, all is well and all is good. We can even select child elements in CSS:

div p {
color: blue;
}

All code within p tags will be styled with blue text. Again, no browser has trouble rendering this. However, there are some selectors, so called advanced selectors, that cause problems in IE, simply because IE can’t understand them, and thus ignores them. There are a sample of these selectors below:

First Child Selector

This selector will style the second element only if it is nested within, and comes directly after, the first:

div > p {
color: green;
}

Adjacent Sibling Selector

The following selector will style the second element only if it comes directly after the first element:

h2 + h3 {
color: black;
}

Attribute Selectors

The following selector styles the a only if it’s href is equal to http://www.sleepingmonkey.co.uk:

a[href="http://www.sleepingmonkey.co.uk"] {
color: teal;
}

All of the selectors above will not be processed by Internet Explorer 6 and below, because they simply do not understand them. That’s a bad thing, right? Not necessarily! They can be used to provide an enhanced version of the site to browsers who do support them, but not to those who don’t.

For example, suppose you have a transparent .png that is not essential to the design, but provides an enhancement. You can define it this way:

div#transparent {
background: transparent url(path/to/transparent.png);
}

But Internet Explorer 6 doesn’t support PNG transparency… so we can use the advanced selectors to target the advanced browsers, but provide a solid .gif (for example) to Internet Explorer, to avoid the nasty rendering of the transparent .png:

div#transparent {
background: url(path/to/solid.gif);
}
div[id=transparent] {
background: transparent url(path/to/transparent.png);
}


This is the method that Sleeping Monkey uses, and it works quite effectively. It’s not as flexible as the conditional comments, but it can provide a degraded version of the site to any browser that can’t handle the advanced CSS, not just Internet Explorer.