I just worked on a Drupal website for over three hours on a problem that doesn’t exist.

If you’re using Zen Theme for Drupal 6 or 7 and your page is loading incorrectly in Internet Explorer IE6, IE7 or IE8 (namely, your page is loading without css), consider that Internet Explorer can load a maximum or 31 .css files. Boy that is interesting…wish I’d known it before.  Zen theme without any modules gets pretty close to this out of the box.  This is a very easy fix in a Drupal install, just turn on css aggregation in /admin/settings/performance (/admin/config/development/performance in Drupal 7).

I learned this after completely validating my css, ripping the guts out of my .tpl.php and template.php files, eating a sandwich and disabling 6 or 7 modules.

EDIT: A helpful post below by Diego points out that there are two existing Drupal projects that help you work around this issue without aggregating all of your css files: http://drupal.org/project/ie_css_optimizer and http://drupal.org/project/unlimited_css.


25 Responses to “Zen Theme breaking IE Internet Explorer CSS? It’s not your modules…”  

  1. 1 Lipu

    Hi,

    Thank you soooo much. It saved my day! I did everything I could think of to debug this problem. But after 2.5 hours struggle, I saw your post.

    Good work 🙂

    Lipu

  2. 2 Karen

    Holy crap! Thanks for posting this. I was pulling my hair out and pretty much ran through the same debugging as you. Thank you thank you thank you.

  3. 3 Sprk

    Thanks so much… I’ve just gone through the same process. You know, examining my css, validating it and ending with the same result, styles not being recognised by this bloody browser… I’m glad I found this.

    31 seems like a totally stupid number for a limit, by the way.

  4. 4 Tammo

    Also ran into problems with own created zen-subtheme. In IE7, IE8, Firefox everything looks OK, but in IE 6 the content is narrowed too much. Also tried your solution, but that does not work,

    http://abc.kleinestappen.nl/vo/voortgezet-onderwijs-vo (in IE6)

    all tips/help greatly appreciated!

    Tammo

  5. 5 John

    Tammo…welcome to IE6 CSS hell. I glanced at your link but you’re in site maintenance mode so I couldn’t see what you’re doing. Good luck!

  6. 6 Brandon

    Amazing! Thank you.

  7. 7 Colin

    You are a life saver… thanks so much for that info… it works

  8. 8 Jon

    Many thanks… I’m using the Mac to develop a site and wasn’t worrying about checking for IE compatibility yet; when the client got back to me to say the site looked awful I spent hours trying to figure it out… worked perfectly when I turned on CSS aggregation.

  9. 9 krs

    31 CSS terror! thanks

  10. 10 dspring

    Life saver!

  11. 11 thank you

    thank you!

  12. 12 Jake

    Thanks. This saved me a lot of time.

  13. 13 T

    Thank you so much for this post! Just got myself a ‘halleluja-moment’ thanks to you 🙂

  14. 14 guldi

    thx mate, you saved me! 😀

  15. 15 Annie

    Thank you SO MUCH! I was getting supremely annoyed withe broken css in IE and you SAVED ME!

    Thank you so much!

  16. 16 STaRMaN

    Thank You John!. I’m having this problem.. and i thought that is a problem with css in my zen theme… or the order in which css files are applied.. . I enabled that option, and all solved. Thanks a lot.

  17. 17 el nucli

    We love you, John!!!

  18. 18 Ashley

    Today I had a look at my website in IE6 and IE7, only to find that the layout had completely borked out on me. I looked for all sorts of solutions, and could not find a single thing that worked – apart from this one.

    Seriously, 31 CSS files? I know the nearest power of 2 is 32, so it’s not completely silly to choose 31 if, for some reason, IE is running a separate CSS sheet in the background, but still… Wow.

    Btw, thanks very much for the information, and now I don’t have to worry too much about my website and its compatibility with IE6 & 7!

  19. 19 Conrad

    Another thanks!

    Just had a nasty shock having not checked site in IE for a month or so. Glad it was only 30 mins before finding this.

  20. 20 alex

    Thanks!! I can’t believe it was just this!!!
    FYI make sure if you’re in Drupal 6…the path to go to the settings is Home › Administer › Site configuration ›Performance

  21. 21 dan

    you saved my ass. thanks.

  22. 22 Diego

    Good post.
    After hitting this post a further research let me discover another solution:
    Instead of aggregating css files (good for performances of course but annoying if you are still developing/editing some css files) consider also these 2 drupal modules:
    http://drupal.org/project/ie_css_optimizer
    and
    http://drupal.org/project/unlimited_css
    They allow to solve the 31 files problem without aggregating all the files
    Hope this helps 🙂
    Ciao

  23. 23 Eliot

    Dude! Thank you soooo much. I was pulling out my hair and cursing with this!

  24. 24 MZ

    Hi, its great!! but can anyone guide me, im hving problems with CSS when using zen sub-theme on Drupal 7 on IE8.

  25. 25 happy_lud

    AMAZING ! You’re a genious !
    Thank you so much !!!

Leave a Reply