The prankster that it is, Internet Explorer has thrown an issue at us recently that really had us scratching our head for a little bit. It turns out, IE 6/7/8 has a limit on the number of CSS files you can load. Anyone who's worked on a medium to large Drupal site knows that you can have a very large number of CSS files being loaded through the theme, since many modules load their own CSS file. It's a recipe for IE disaster.
Our scenario was this:
We were utilizing a conditional ie.css stylesheet for browser-specific CSS hacks. It was working fine and being properly loaded for a while, but one day something happened and it seemed like none of our IE CSS hacks were being used or loaded. So we thought, what has happened recently that affect things? A new module was turned on... and this led us down the road to discovering about IE's limit on CSS files. From their own mouths... they say 30, but I've seen various reports of 32 being the limit as well.
So, what can you do if you do run into this problem? A few things.
Turn on CSS aggregation
My preferred solution. If you go to the Performance section of Configuration admin (admin/settings/performance), you can turn on CSS optimization. This takes all the CSS files you would load on a page load and combines them into one large large CSS file that is then cached and called in place of your 30+ stylesheets that are making IE choke. Aside from making IE display your site correctly again, there are the added benefits of reduced HTTP requests, and is highly advisable on a high traffic site (which deserves it's own discussion).
Combine your theme's css files
Sometimes I'll break out the CSS for my project into a couple different files for organization's sake. I'll have a typography.css that contains only font sizes, font weights, etc... and I'll have a layout.css that only sets up widths, padding, margins, positioning stuff. I'll also have a color.css file that only has rules for background colors, borders, that kind of thing. So, if I have CSS files like these that could possibly be combined, I'll do that. Copy and paste it all from each of your separate files into a main style.css (or whatever you want to call it), and make sure you load it from your theme's .info file. Then do a good round of QA walkthroughs to make sure there's no problems that have arisen from putting it all into one file.
Use styleswitcher module to turn module CSS off
Hats off to jmburnz at adaptivethemes who reminded me about Stylestripper, the neat little module I learned about at DrupalCon during Morten's presentation. Check that out when you get a minute, pretty entertaining stuff.
Anyways, the Stylestripper module, once installed, will allow you to turn off various module-loaded CSS. If for some reason you don't go with CSS aggregation as your solution for this IE issue, then you can always turn off a bunch of module CSS this way and get your CSS file count down a few to where IE loads the site properly.
You have any other tricks?
You can also get around the limit with the theme layer.
Hi,
I've contributed a module for Drupal 6 that solves the problem, without CSS aggregation on. It's called "IE Unlimited CSS Loader", you can have a look at it here:
http://drupal.org/project/unlimited_css
I think you forgot f*ck IE.
Some day someone at M$ in Redmond will wake up and realize that IE was the worst exercise of judgement ever unleashed on the internet. Hate that shit.
It really is astounding how bad some of their stuff is.
If only that were a real-world solution, I'd be all over it. Unfortunately, you know the market share... I had read somewhere that IE8 is the last version they're doing. Somehow I doubt they'd so easily give up making our lives more difficult. There's a sick, sadistic group over there running the IE development team and they get their jollies releasing crap browsers.
You can also disable any CSS file by adding the file name to your theme's .info file.
For example:
stylesheets[all][] = system-menus.css
This prevents the system-menus.css file from loading. You do NOT need to have an actual system-menus.css file at all, just the line in the .info file will prevent the file from being loaded.
Ah - good one, thanks Nate. Totally forgot about that.
However you choose to get around the problem you should avoid using @import. Doing so prevents the browser from downloading more than one file at the same time (i.e. parallelization). This is a real big performance penalty when we're talking about 30+ CSS files.
Both Antonio & Marco's suggestions use @import, Nate's suggestion does not.