homepage Welcome to WebmasterWorld Guest from 54.166.53.169
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Pubcon Platinum Sponsor 2014
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

    
Problems with conditional comments
driving me mad!
dillonstars

10+ Year Member



 
Msg#: 3545409 posted 11:15 pm on Jan 10, 2008 (gmt 0)

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?

 

swa66

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



 
Msg#: 3545409 posted 12:10 am on Jan 11, 2008 (gmt 0)

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

dillonstars

10+ Year Member



 
Msg#: 3545409 posted 12:23 am on Jan 11, 2008 (gmt 0)

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

Old_Honky

10+ Year Member



 
Msg#: 3545409 posted 10:42 am on Jan 11, 2008 (gmt 0)

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.

dillonstars

10+ Year Member



 
Msg#: 3545409 posted 10:58 am on Jan 11, 2008 (gmt 0)

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.

peiklk

5+ Year Member



 
Msg#: 3545409 posted 2:09 pm on Jan 11, 2008 (gmt 0)

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?

dillonstars

10+ Year Member



 
Msg#: 3545409 posted 3:32 pm on Jan 11, 2008 (gmt 0)

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.

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved