How to overcome the limits of CSS in Internet Explorer 6

Although the support of CSS selectors hasn’t improved dramatically since IE6, we can use some selectors in IE7 and IE8 that really help to style web pages without creating a class for everything that needs styling. Those selectors are:

• Child selector: .parent > .child
• First child selector: .parent .child:first-child
• Adjacent selector: .sibling + .sibling

Where IE6 falls short

Some situations just scream for one of those three selectors that aren’t supported in IE6. Take a list like the one below for example:

Lorem

Ipsum
Dolor
Sit

Amet




Dolor

If you want to style the list items you can do so with a simple selector:

ul li {
	font: bold normal 14px/1.5em Arial
}

But what if you want to style only the li’s in the first level? Well, you either have to give all first level list items a class so you can target specifically those elements, or you have to add some more reset code to remove unwanted styling like this:

ul li { /* set styling for all list items */
	font: bold normal 14px/1.5em Arial
}

ul li li { /* reset styling for all list items except for the first level */
	font-size: 12px;
	font-weight: normal
}

Both solutions have their drawbacks:

• It’s not always possible to add classes to the HTML when, for example, the HTML is generated with serverside code. This is especially true when you’re not a programmer or the serverside code cannot be accessed.
• If you have lots of styles and levels it’s hard to keep track of what styling you have to reset

So let’s style it another way that’s possible in all major browsers except IE6:

ul > li { /* set styling list items in first level */
	font: bold normal 14px/1.5em Arial
}

Fix it with jQuery

Now what to do with IE6? In case I have to use incompatible selectors I call in the help of Javascript by using the popular jQuery library. That’s because with jQuery I can use advanced selectors. You’ll get something like the two snippets below

ul > li,
li.level1 { /* set styling list items in first level */
	font: bold normal 14px/1.5em Arial
}

jQuery("ul > li").addClass("level1"); /* adds class to spcific elements for IE6 */

Fix it with IE7.js

Some of you may say there’s a better solution than patching your website manually with jQuery. For years there’s a script called IE7.js which patches many shortcomings of IE6 and “upgrades” your website to IE7. I tried it but it wasn’t a succes, if not a failure for 2 reasons:

• It fixes a lot of bugs but introduces a few at the same time. Eventually I still had to use jQuery to patch bugs that came out of IE7.js.
• It slows your website.. IE7.js does a lot for you, but it costs CPU power. At first the time IE7.js needs to do its work is minute and you will only see a short glitch. But when your CSS file grows larger than say 1000 lines, the page will freeze for a second or more. Bad user experience.

So although IE7.js is a good initiative it doesn’t scale well for medium or large websites. You will be better off fixing little incompatibilities with jQuery or any other library that gives the freedom to use CSS selectors in Javascript. Or in some cases: don’t fix it at all.