Forum Moderators: not2easy
I am using:
<!--[if IE 6]>
<link rel="stylesheet" type="text/css" href="../css/ie6.css" media="all">
<![endif]-->
<!--[if IE 7]>
<link href="../css/ie7.css" rel="stylesheet" type="text/css" media="all">
<![endif]-->
If I remove the conditional comments tags the stylesheets load ok and if use the same conditional comments in the <body> with some test text they work fine.
But when used as above in the head and after the normal stylesheet in the code, they dont work.
I am testing them by only putting:
body {
background-color: #000000;
}
in the ie6 and ie7 stylesheets.
Any ideas what could be causing them not to work?
<!--[if IE 6]>
<link rel="stylesheet" type="text/css" href="/css/ie.css" />
<![endif]-->
<!--[if IE 7]>
<link rel="stylesheet" type="text/css" href="/css/ie7.css" />
<![endif]-->
I've used the same code on other sites before and it worked fine.
It seems to only be in the head that it doesnt work - when i test it in the body with some random text inside the IF then that works fine...
Very wierd
<!--Will only be read by IE versions less then IE7-->
<!--[if lte IE 6 ]>
<link rel="stylesheet" type="text/css" href="styles/lte-ie6-styles.css" />
<![endif]-->
<!--Will only be read by IE 7-->
<!--[if IE 7 ]>
<link rel="stylesheet" type="text/css" href="styles/sc-ie7-styles.css" />
<![endif]-->
The main difference with your code is the space after the 6 and 7. I had problems a while ago when I first used CCs and was told (on another forum)that was the problem - it was the space.
I am using dreamweaver templates and the root of the site is in a subfolder (for testing).
So i linked the ie6 and ie7 css files to my template, but when i wrapped the conditions around them, they were no longer recognised by the template and so would not update to the correct path.
SO I put the full absolute URI to the css file in and bang it worked.
<link rel="stylesheet" type="text/css" href="styles/styles.css" />
<!--Will only be read by IE versions less then IE7-->
<!--[if lte IE 6 ]>
<link rel="stylesheet" type="text/css" href="styles/lte-ie6-styles.css" />
<![endif]-->
<!--Will only be read by IE 7-->
<!--[if IE 7 ]>
<link rel="stylesheet" type="text/css" href="styles/sc-ie7-styles.css" />
<![endif]--> THe first line would load for all browsers and then if LT IE6, it would load a secondary sheet and IE7 would load the other sheet... and then any css in the IE6 or IE7 would either override or augment the styles in the main stylesheet?
IOW, would the IE6/IE7 stylesheet only need to contain the "hacks" per se?
In my opinion this is the best way to do it precisely because it avoids using any 'hacks'.
It also keeps it nicely organised and very easy to manage.
