Separate CSS for IE5

I have face the challenge with separate CSS style sheet file for Internet Explorer 5.x. The reason was this site was horrible with IE5 and I have notice that there is about 10% visitors with IE5.

So, there are two good ways you can attach different CSS file for IE5:

- Using JavaScript. (You will need to identify browser)
- Using IE conditional comments.

JavaScript way is actually obvious. You can prepare or take on the web (or on this site) any good function which will detect users browser. Then, using document.write write following lines in your html file:

<script type=”text/javascript” xsrc=”js/main.js” mce_src=”js/main.js” ></script>
<script>
if(IE5 && !IE6) {
document.writeln(”<link rel=”stylesheet” type=”text/css” xhref=”styles/main_ie5.css” mce_href=”styles/main_ie5.css” />”);
}
</script>
Where:
- main.js is your attached JavaScript file with browser detection function
- if(IE5 && !IE6) don’t forget to exclude IE6
- document.writeln… will write a stylesheet link to your document

But, there is another good way which will work with IE5 - IE conditional comments. Why good? Well, may be you don’t know JavaScript or your user will turn it off )

Information about conditional comments can be found on internet, so, I will tell only about css attach method.

<!–[if IE 5]>
<link xhref=”styles/main_ie5.css” mce_href=”styles/main_ie5.css” rel=”stylesheet” type=”text/css” />
<![endif]–>
Where:
- <!–[if IE 5]> is conditional comment which will be ignored by all browsers except IE

Now, a small tip: You do not need to attach a completely different stylesheet file for IE. Better approach is to use ADDITIONAL “fix” file which will override and extend styles of main css file.

For example, this site uses one main.css stylesheet. This file describes all styles for all browsers. But, because of many css errors in IE5 and differences between Mozilla and IE6 I use ADDITIONAL css files which only override defined in main.css file styles.

So, in this situation you will need to attach the main css file before ADDITIONAL. Using conditional comments the example will be:

<link xhref=”styles/main.css” mce_href=”styles/main.css” rel=”stylesheet” type=”text/css” />
<!–[if IE 5]>
<link xhref=”styles/main_ie5.css” mce_href=”styles/main_ie5.css” rel=”stylesheet” type=”text/css” />
<![endif]–>

Where:
- first linked stylesheet will be used by all browsers. And commented one only by IE5.

Same can be done with JavaScript example.

Another note: If you have IE6 as main browser and IE5 as standalone (typical for web designers), then your IE5 will skip <!–[if IE 5]>> conditional comments. This is because your standalone version steel use some behaviour of your main IE6 browser. So, you can’t test this on computer with additional standalone IE5 (. Solution?: Well, use JavaScript way untill you deploy on server or use <!–[if IE 6]> conditional comments but don’t forget to remove them when you test on IE6 =)


4 Responses to “Separate CSS for IE5”

  1. good stuff Says:

    thanks

  2. Alexander Says:

    I need some help with the Asktheseguys wordpress theme..
    I can't figure out how to get the header and ad bar at the top to go all the way across the screen.. Or better yet, how I can place an ad box in the empty space at the top right.
    I can usually figure this stuff out easily, but can't find anything in the CSS that will make it work..
    Anyone have any ideas?

  3. serjik76 Says:

    Its sem garden fpock

  4. sudhir Says:

    thanks

Leave a Reply