Welcome to WebmasterWorld Guest from 54.167.185.18

Forum Moderators: not2easy

Message Too Old, No Replies

Problems with conditional comments

driving me mad!

   
11:15 pm on Jan 10, 2008 (gmt 0)

10+ Year Member



I am having terrible problems trying to get conditional comments to work on a site.

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?

12:10 am on Jan 11, 2008 (gmt 0)

WebmasterWorld Senior Member swa66 is a WebmasterWorld Top Contributor of All Time 10+ Year Member



Actual code that's working just fine for me:
 <!--[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]-->
12:23 am on Jan 11, 2008 (gmt 0)

10+ Year Member



Copied your code directly (just changed ie.css to ie6.css and it still doesn't work.

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

10:42 am on Jan 11, 2008 (gmt 0)

10+ Year Member



This is what I use successfully

<!--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.

10:58 am on Jan 11, 2008 (gmt 0)

10+ Year Member



Thanks for your help. I found the problem and it was my fault.

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.

2:09 pm on Jan 11, 2008 (gmt 0)

5+ Year Member



So then... would this be the proper way to load a stylesheet for each browser?

<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?

3:32 pm on Jan 11, 2008 (gmt 0)

10+ Year Member



peiklk > exactly

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.