Internet Explorer’s annoying 30 CSS limit bug Internet Explorer is a lousy browser family, and it has some of the most annoying bugs possible.

Took me a while to figure out why websites were breaking in some pages, till I was finally able to figure out that Internet Explorer has a bug where it can handle only pages with under 30 CSS files. Anything above that and the page would go dead.

Don’t believe me? check Microsoft’s “All style tags after the first 30 style tags on an HTML page are not applied in Internet Explorer

All style tags after the first 30 style tags on an HTML page are not applied. Occasionally, you may also receive the following error message:

The page you are looking for might have been moved or had its name changed.

If you use a network monitor tool to capture network traffic, you may notice that a TCP reset occurs when Internet Explorer is receiving the page. Internet Explorer then generates another POST request if the original request was a POST request. Or, Internet Explorer may send a GET request instead.

You’d think that Microsoft would fix such a bug, but looking at the Internet Explorer versions that are affected, the list starts back at version 4.0 and goes up all the way to the most recent version as of today – Internet Explorer 8. Brilliant.

 

If you’re developing Drupal based websites, 30 CSS files are nothing, especially with the more advanced themes and modules. It’s enough that you include the theme, views and panels to easily top this limit.

But, there are a few things that might help.

For one, the IE Unlimited CSS module saved me with the Drupal 6 installations.

In some cases, though not all, the built-in Drupal CSS aggregation/optimization may help (if it’s aggregated already, that is).

How to enable Drupal CSS file aggregation

  1. Log in as your Drupal site’s administrator.
  2. Go to the Administer » Site configuration » Performance page.
  3. Check the Enabled checkbox for Optimize CSS .
  4. Click the Save configuration button.

 

Another option, if you’re not in Drupal is using a CSS optimizer solution. Here’s from Nadeau Software’s list, and although they claim it won’t speed up by much, it might save you from IE.

CSS optimizers

Hand-editing CSS to make it more optimal is tedious. Instead, use a CSS optimizer application. Here’s a few of the many available:

 

It never ceases to amaze me how a serious company as big as Microsoft, with all the resources available to it, keeps getting the whole browser thing wrong. What’s even more remarkable, is that there are those among us who still use that thing.

Tagged with:
 

5 Responses to Internet Explorer’s annoying 30 CSS files limit bug

  1. Helix says:

    Thanks for this hint!

    I was going crazy before read this. 🙂

  2. Vladimir says:

    Youre a lousy web dev if you have 30 css files…

    • Fili says:

      Vladimir – not with Drupal. It’s enough that you run 3-4 high profile modules like views, panels etc. to get you close to that limit, especially on some pages like the homepage. This doesn’t mean they load all the time, only on the pages with the views, but this does create a problem.

    • David Arthur says:

      It’s not a good thing to have in live but having seperated css files for development is actually a good thing. Imagine having all of your source files combined into 1.

  3. Nalisa says:

    Thanks for a great article and for the solution! We build a complicated Drupal site with Ubercart and many modules. Just only system’s CSS, we have already gone beyond 30 files. The theme CSS could not even be loaded!

    Thank you very much for the suggested solutions. You are the angel!

    xoxoxo

Leave a Reply

Your email address will not be published. Required fields are marked *

Set your Twitter account name in your settings to use the TwitterBar Section.