Walkaround for multiple CSS files

[Rob Barclay]

Having spent the last week trying to get multiple CSS files to work on the site I am building without any success i found a walk around which might become useful to others.

The problem being that using the current javascript of:

<script language="javascript">
document.write("\<\!--\[if IE\]\>");
</script>
<link rel="stylesheet" type="text/css" href="/acatalog/styles_ie.css" />
<script language="javascript">
document.write("\<\!\[endif\]\-\-\>");
</script>

Does not work if you need more than one instance (Dev team have been looking at this for last week with so far no success) so to have this for only one CSS file is fine but if you want to cover more than one CSS file you have problems.

I renamed all of my catalog files to be .php files and then placed an include in my header which basically was:

<?php include("style-file.php"); ?>

so that the header of each page called to the style-file.php

and inside of the style-file.php i included my comments to the broswers:

<!--[if IE]>
<link rel="stylesheet" type="text/css" href="styles_ie.css" />
<![endif]-->
<!--[if IE 6]>
<link rel="stylesheet" type="text/css" href="styles_ie6.css" />
<![endif]-->
<!--[if IE 5.5]>
<link rel="stylesheet" type="text/css" href="styles_ie5.css" />
<![endif]-->

This has resolved my problems, hope it can help you too if you are having the same problem.