Drupal layout mysteriously broken on Internet Explorer?

Date: Thu Jan 14 2010 Drupal Themes »»»» Drupal Planet
On my Drupal-based forum site there was a problem - On Internet Explorer the page layout was horribly broken. The content, instead of laying out in a 2 or three column arrangement, had each section of the right/center/left columns one after another. It was as if some of the style sheets simply hadn't loaded. Fortunately you could still use the site meaning missing style sheets didn't interfere with usability except that the site was horrible to look at and probably turned off any Internet Explorer visitors. I looked at it and looked at it and couldn't make sense of the problem, even going so far as to install other themes whose authors claimed they were tested on Internet Explorer. Those too were broken.

A tangential problem is that the horrid page layout only occurred on specific pages. Rather than every page on the site having horrid layout, only the forum post pages had layout problems. Even many of the forum pages laid out correctly, and it was only forum post pages which laid out incorrectly. This led me down a tangent of studying the Advanced Forum module for problems. That turned out to make no difference and turned out to be a big red herring. So to was the theory of coding problems in the chosen theme.

Much as I'm tempted to dismiss Internet Explorer as the pathetic tool of Microsoft's pathetic attempt to dominate the Internet and force us all to use Windows, and despite the falling market share of Internet Explorer, users of that browser do represent 50% or more of Internet traffic. Interestingly that's down quite a ways from their monopolistic height, testament to the success of Firefox.

After some yahoogling I found the answer, however. Internet Explorer has a horrible stupid bug. It cannot load more than 30 or so style sheets.

With my site configuration only on forum post pages did the stylesheet count go above the 30 (or so) limit. Hence explaining why only forum posts had layout problems. Advanced Forum installs a couple more stylesheets on forum posts than for other pages, it's that simple.

This drupal.org issue had the solution: Stylesheets not loading for Internet Explorer 6, 7, and 8

Although the says it's compatible with IE and I can't find anyone with the same issue, it's not working for me. The page loads as just a plain white page with all the text, menus, content, everything along the left side. Anyone else having the same problem or know how to fix it?

The suggestions went from "try clearing your cache" (that didn't work) and various other tangents some of which I too looked into. These two comments contain the best solution and problem description: http://drupal.org/node/387962#comment-1476264 and http://drupal.org/node/387962#comment-1487670 .. referring to http://adaptivethemes.com/load-unlimited-stylesheets-in-ie7 and http://thebignoob.com/posts/ie-stylesheet-limit/ and http://blogs.nitobi.com/dave/2008/02/19/internet-explorer-stylesheet-quirks/

Starting with Drupal 6 each module is expected to export its own stylesheets. This means if you've got a lot of modules enabled there will be a lot of stylesheets.

One solution is to go into Admin / Performance and to click on "Optimize CSS files". This causes Drupal to aggregate all CSS files into one, which produces many benefits. For instance it causes fewer requests between browser and server which decreases page loading time. And in this case it causes Drupal to reference only one stylesheet no matter how many stylesheets are used by the modules you install.

However this won't work if your site is in development mode. During development it's more convenient to turn off Optimize CSS (and turn off page caching).

The adaptivethemes.com posting has a different solution that works with Optimize CSS turned off. It converts the stylesheet references into ones using

@import
 CSS statements instead.  This Internet Explorer workaround sidesteps the limit on stylesheet files.  The method is to add a 
function phptemplate_preprocess_page(&$vars)
 in the template.php for your theme.  This worked just fine for my site.</body></html>