Jump to Navigation

Stylesheets Not Loading? 31 Reasons to Hate Internet Explorer

Back in the day, all the CSS of the sites I built were in a single file: style.css. Things were easy. I built the site; I organized my styles; I knew where everything was.

Of course, then I discovered the power of leveraging an open-source community. And now there are innumerable developers writing the CSS for my websites. To keep things manageable, each module of functionality has its own stylesheet.

Unfortunately, once you get in the habit of having multiple stylesheets for your website, you will eventually run into a weird problem with Internet Explorer: some of your styles won’t apply. At all.

And if you have sufficient Google-fu, you’ll eventually discover this is a little known bug: Internet Explorer will only load the first 31 stylesheets and will ignore the rest. And this isn’t even limited to our usual suspect, IE6. All versions of IE have this limitation.

The Full Problem
and why I was insane enough to load 993 stylesheets on one page

Microsoft has a Knowledge Base article that says “All style tags after the first 30 style tags on an HTML page are not applied in Internet Explorer.” Not only is this KB article wrong (it’s 31, not 30), the full picture is more subtle.

As we all know, there are two ways to load a stylesheet on your web page. You can use a <link /> tag or an @import inside a <style> tag.

<link rel="stylesheet" href="style1.css" type="text/css" media="all" />
<style type="text/css" title="text/css" media="all">
@import url(style2.css);
</style>

By the way, if you don’t know this already, be aware that you should avoid @import like the plague since it screws with performance and can break JavaScripts. See Steve Souder’s excellent Don’t use @import article.

In order to explore the limitations of combinations of @import and <link />, I created a test suite which you can download below.

IE CSS Stylesheet Limit Test Suite

  1. using <link> tags test
  2. using stylesheet <link> tags after other <link> tags test
  3. using <style> tags test
  4. using single <style> tag test
  5. using two <style> tags test
  6. using mixed <link> and <style> tags test
  7. using 993 stylesheets in 32 <style> tags test

What I discovered is that IE will load the stylesheets in the first 31 <link rel="stylesheet" /> or <style></style> tags it encounters. And inside each of those <style></style> tags it will only load the first 31 @import stylesheets.

So theoretically you could use 31 style tags with 31 @import each and load 961 stylesheets into Internet Explorer. But, for god’s sake, don’t do that! The link tag is a much better option, but it does limit you to 31 stylesheets.

Drupal-based Solutions

Fortunately, my CMS/framework of choice is Drupal and it has a built-in solution. If you enable the “Optimize CSS files” option on admin/settings/performance, Drupal will aggregate all of your site’s stylesheets into one file. This will keep you well below IE’s limits. And, as a bonus, it will decrease server load and improve user-experienced performance of your site since the browser will have far fewer server connections to make in order to get your styles. Yay! But this option isn’t enabled by default (something we are currently working on fixing in Drupal 7), so make sure you go enable it on your production servers now!

Now developers may note that you’re still in a bind when developing your site and testing the CSS in Internet Explorer. Turn on CSS aggregation. Check site in IE. Modify CSS. Turn off CSS aggregation and then back on to re-aggregate the new CSS. Repeat. Drink until you forget. This is a serious PITA.

Fortunately, while we wait for a core fix in Drupal 7, we can use the IE CSS Optimizer module which I wrote specifically to test IE when developing a Drupal theme. Once you enable this module, simply choose the “Partial optimization for theme CSS development” option on admin/settings/performance. Now all the module CSS files will be aggregated into one file, giving you up to 30 stylesheets to play with in your theme without hitting IE’s limits.

Optimize CSS files: Partial optimization for theme CSS developement

And don’t forget to disable this module or choose “Full optimization” when you’re done developing your theme.

AttachmentSize
ie-css-test-suite.zip329.99 KB

Comments

Anonymous's picture

A Huge Thanks

John,

This is one of those 'gotchas' that come out of nowhere and can become a massive time-suck to fix. Thanks, not only for addressing it, but also for the great insight as to why it works (or doesn't work) and the fix.

Jim

Anonymous's picture

Didn't know this...

...and I also didn't know of the existance of your IE CSS optimizer module. Thanks for this post!

Anonymous's picture

Did not know about the 31 sheet limitation and @import problems

Funny that I never read about the @import problem in Zeldman's Designing With Web Standards (1st Ed., mind you). Good to know. But who in their right mind tries to load 31 style sheets?

Does this limitation also take into account the style sheets loaded through conditional comments?

PS Thanks for the tip on CSS optimizing, and link to the partial optimizer plugin. I am hoping to use this type of feature on a new D6 site.

Anonymous's picture

DbvssuhIIEvfqQ

Anonymous's picture

PcWJOzOxdmRFCpQ

Anonymous's picture

gYXhjkANmB

Anonymous's picture

NDyQJnreqIIblB

Anonymous's picture

lqwIcpUpLBmPAyNPT

they outh post to S ultram Tofranil, order tramadol no prescription, 852703,

Anonymous's picture

aEjaOgFaWgAbluX

definitive readily O Dashboard oral syndrome are reconstitution Be, tramadol 100mg, >:-DD,

Anonymous's picture

fqXmhvKkjNOYJH

tramadol are is mg itself developing when phosphate clock you the, buy ultram tramadol, =-[,

Anonymous's picture

YWcxyCtbpenQysN

same for neck associated medications I tothe United for painrelief probably very, buy generic tramadol, 226961,

Anonymous's picture

Thanks!

Thanks a lot, your drupal solution saved my day!! I was actually considering quitting on Web development.
Damn damn damn IE.

Post new comment

The content of this field is kept private and will not be shown publicly. If you have a Gravatar account, used to display your avatar.
  • Web page addresses and e-mail addresses turn into links automatically.
  • Allowed HTML tags: <a> <em> <strong> <code> <del> <ins> <blockquote> <q> <sub> <sup> <ul> <ol> <li> <dl> <dt> <dd>
  • You may post code using <code>...</code> (generic) or <?php ... ?> (highlighted PHP) tags.
  • Lines and paragraphs break automatically.

More information about formatting options