Like most web developers, I do most of my development work in one browser (in my case, Firefox) and then do cross browser checks after I’ve finished my work. One issue that I recently saw crop up was IE ignoring cerrtain stylesheets for no apparent reason.

After a little digging, I uncovered the issue: Internet Explorer only supports 30 stylesheets. The 31st stylesheet, and any after that, will be ignored. This issue affects all stylesheets included using the “link” tag.

So how do you work around the issue? It depends..

If you’re using Drupal
Enable “Optimize CSS Files” under the “Performance” page. This will aggregate all your CSS files into one single file. Even if you’re not having issues with IE, you should do this anyways. It saves bandwidth and leads to faster load times. In Drupal 6, you can’t optimize the CSS if you’re using a private filesystem. In that case, you should look at another solution: http://drupal.org/project/ie_css_optimizer

If you’re using a custom CMS or standard HTML
There’s a lot more flexibility if you can control all the CSS files and where they’re included. If you can, reduce the number of CSS files you have by combining them into one file. If you absolutely must have separate CSS files, try using “@import” to include in the additional CSS files. It’s not the best performance wise but it’ll get you past the IE issue.

While @import is not an ideal solution, there does not appear to be any limit to the number of CSS files you can include in IE.