Conditional Stylesheets Set-up: Using the Module

Question

Problem

I'm trying to set-up conditional stylesheets. I've followed the instructions but it's still not registering. What have I done wrong?

Set-Up

I installed and enabled the conditional stylesheets module. I'm running a Tao sub-theme.

I then added the following lines to my theme.info file:

//these are my original stylesheets
stylesheets[all][] = reset.css
stylesheets[all][] = typography.css

//these are my conditional stylesheets
conditional-stylesheet [IE][all][] = styleie7.css
conditional-stylesheets [if !IE][all][] = style.css

I then cleared my cache and no style sheets were loaded.

At the moment I'm just trying to have one stylesheet for IE and one for everything else.

I took the syntax from the [link] in the conditional css directory.1

NOTE:

It's not clear whether you should put

conditional-stylesheet OR stylesheet-conditional

The documentation says one, a lot of posts suggest the other. However I can't get either of them to work.

Answer 1

Assuming you are using the conditional style module the format would be

; Set the conditional stylesheets that are processed by IE.
stylesheets-conditional[lt IE 7][all][] = ie6-and-below.css
stylesheets-conditional[IE 9][all][] = ie9.css
stylesheets-conditional[IE][print][] = ie-print.css
stylesheets-conditional[(gte IE 9)|(gt IEMobile 7)|(!IE)][all][] = modern-browsers.css

And there should be no space between the conditional-stylesheet and [IE].

If that doesn't work then you should make sure that the stylesheet it is referencing can be loaded. The stylesheet lines don't show up if the stylesheet doesn't exist or cannot be opened.

Answer 2

My final code in my .info file is:

stylesheets-conditional[!IE 6][all][] = typography.css
stylesheets-conditional[IE 6][all][] = typographyie6.css

stylesheets-conditional[IE 6][all][] = styleie6.css
stylesheets-conditional[IE 7][all][] = styleie7.css

I had three problems. First I had an extra space. Second I was putting [if] into the conditional statements i.e.

stylesheets-conditional[if IE 6][all][] = styleie6.css

The module already adds an [if] so it was printing out:

<!--[if if IE 7]>
 <style type="text/css" media="all">@import url("http://localhost/drupalie/sites/all/themes/mytheme/styleie7.css?mutp08");</style>
<![endif]-->

Lastly I couldn't get it work at all on my Windows 7 machine, but switching to XP worked fine.

IE6 & 7 don't work very well on Windows 7 (hacks needed...) so might be worth setting up an XP test machine as you wouldn't need them to work on 7 anyway.