Internet explorer drops stylesheets

It's one of those bugs that you can spend ages chasing and kick yourself for not knowing. Internet explorer limits the number of external stylesheets linked to a page. Once it hits its limit, it ignores the rest. The first sign of a problem is that your site appears to have missing stylesheets - but only in IE. Fortunately there are workarounds.

I came across this recently while developing a drupal website. Drupal (especially combined with the Zen base template) tends to go heavy on the attached stylesheets so if you start adding your own in as well, its easy to blow the 32 stylesheet limit without realising. JQuery plugins will also often add their own CSS files into the mix and are worth bearing in mind. As is any external content.

Fortunately, as a performance option, Drupal offers the option of optimising your stylesheets and delivering them as a single file. Even if you still code in your own and they don't get included in the optimisation process, enabling this option decreases the load from Drupal enough that everything should work. Its a quick and easy fix.

Alternatively, you could try disabling any unecessary stylesheets or consolidate yours into one or two master files. In Drupal, you should be able to comment out any unused stylesheets in your theme.info file.

An alternate fix - which i haven't tried, but which has been suggested on a few boards - is to create a master CSS file that then imports the others. Technically, that could reduce the load to one or two stylesheets in the main document that can then call as many as you need.

Article posted Monday 23rd August 2010

Search