Apply IE overrides after local.css

gmclelland,

The local.css file is intended to be empty except for anything added by the person using the theme. We don't add any defaults to the file.

The general idea is that local.css allows the person using the theme to have the final say in overriding anything, including anything in the IE fixes.css files.

Are you saying that you've added some css to your local.css file that is overriding the effects of some css in the IE fixes.css files? One alternative would be to use IE-specific "hacks" in your local.css file to prevent overriding the IE fixes.css files.

gmclelland,

Since the IE fixes.css files are added using conditional comments that only each version of IE sees, the fixes in them don't need hacks to hide them from other browsers.

The IE fixes.css files in general don't get much editing by users. They tend to just contain the fixes we've added. That said, if you add a IE fixes.css file to your custom Fusion subtheme, it'll get added after the IE fixes.css files from Fusion Core.

The positioning of local.css was based on the assumption that a user is more likely to edit local.css than one of the IE fixes.css files and that their css changes should always have the final say.

I'm open to arguments from you and others for placing the local.css file before the IE fixes.css files. Though even if I decided to change the position it would have to wait until the D7 version of Fusion in order to not break any themes that depended on the current order.

If your situation requires the position to change now, let me know and I'll show you how to hack Fusion Core's template.php.

Yes if someone could please explain how to override this so that I can put the IE specific styles after local.css, I would really appreciate it.

Use case: You make a class in local.css that doesn't look right in IE. therefore you need an IE specific fix to what you specified in local.css, needs to appear after local.css

@photoshop_nerd, you can specify IE specific CSS in your local.css with the use of selectors.

For example, here is an IE7 specific selector:

body {
  *background: red;
}

And then an IE6 specific selector:

body {
  _background: red;
}

So you can essentially do this and get all three elements working at once with the main one for all browsers then one for IE7 and one for IE6.

body {
  background: orange;
  *background: green;
  _background: red;
}

That should give you an orange background for all browsers then a green background for IE7 and a red background for IE6. Hope that helps!

Thanks, but why does "*" work only for ie6 and "_" only for ie7, and what about ie8? Is it a drupal thing or a fusion thing, or a css thing I've never heard of?

Also if anyone knows the answer to the question of how you change the order of the stylesheets, I'd like to know. thanks

Those are actually IE specific CSS selectors so it works for all CSS files you write. Nothing Drupal or Fusion specific there, just IE's way of doing it. There aren't any IE8 specific selectors that I've come across so not sure about that one.

I give my +1 for the conditional IE to appear after the local.css.

I don't like to junk up my CSS with IE hacks. I prefer to place them in the IE specific CSS, except where I feel it's important to keep them near the original CSS. For example if IE wants padding: 20px; where the normal CSS specifies padding: 15px; then I will place !padding: 20px; /* IE hack */ (or the * or _ hack) in the local.css. This is so that in the event it is necessary to change that value in the future, whoever is doing so will realize that it is also necessary to change the IE hack.

The way that I have addressed this is to customize the page.tpl.php in my sub-theme by moving the <?php print $local_styles; ?> before the conditional section.

I heartily +1 this. For a true themer, hundreds of lines of CSS will be added into local.css, as Fusion (and even Fusion + Skinr) can't even come close to finishing the styling for an entire site...

And some of that CSS will need IE overrides. I think this should be the default use case.

I agree, it would be ideal to have the local.css file load first and then the IE specific CSS files. I understand that we would have to manually backup the IE specific CSS files should we make changes to then and then update our theme but for those using Fusion Core and developing custom sub-themes this isn't an issue since the theme won't be something available for download like Acquia Marina or Acquia Prosper.

So if Fusion Core was set to load the local.css files then the IE specific CSS that would allow us to keep hacks out of our local.css or any other files like that.

This is in the dev release (which currently has the wrong date displaying but is the correct, updated files).

gmclelland, alas there are a few reasons that make this less feasible in Fusion. It's a slick approach though :)