Have you seen this?
http://www.facebook.com/note.php?note_id=98645646192&ref=mf
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?
