IE won't load styles

Today I faced the strangest problem, suddenly and without any reason most styles did not appear on internet explorer 6, 7 or 8. I'm not saying they appeared incorrectly, but didn't appear at all. It took me hours and hours of work and everything stopped making sense.

At first my thought was an incorrectly written style sheet that was preventing ie from reading the rest of the css files. Using ie 8's inspector I honed in on the style sheet that was last loaded and figured it must be the culprit, taking a quick look at it showed me there's no evident syntax errors. So eventually I decided to empty it and see if the following style sheet is loaded. To my astonishment emptying the file did no good! It was still the last file loaded.

My next step was to delete the css file. What I noticed then is that some more styles showed up on the page although I couldn't make sense out of it. It took me a day or two to find the real reason, ie has an upper limit of 31 style sheets per page! You don't get an error, a warning or anything to tell you this fact except all styles above the 31 threshold simply don't load! It's amazing what peculiarities I manage to find in ie when I've thought I figured it out. My advice to all, switch to firefox.

So what can you do if you're in this position? In general, the only thing you can do is merge your css files. In Drupal you can do this by choosing the option to "Optimize css files" under performance which will merge all files into one css, only downside is that this will make the life of developers a little hard. If you are a developer, you can still go around this by using this module:

http://drupal.org/project/ie_css_optimizer

Let's hope firefox picks up quickly enough and we're no longer faced with such obscure errors to waste time solving.