Posted by Branjawn on November 10, 2009 at 7:34pm
While theming and developing today I switched from Firefox to Internet Explorer and found that my site had no styles! Ahhh! To save you from possible headaches, here's my finding: IE limits Drupal to 31 stylesheets total. The work-around for the bug is to enable CSS aggregation.
Many modules have their own stylesheets, so when you get to a certain number of modules, plus have your own custom theme, you reach a point like I did today where you pass the threshold. Hope this helps someone!!
Comments
Or use Unlimited_CSS module
You can also use the IE Unlimited CSS Loader module ( http://drupal.org/project/unlimited_css ) to achieve the same thing.
Good idea
That's a cool module, but it's not working for me. As in, it's not breaking up the CSS list into groups of 15 like it says it does. I didn't really see any help in the queue, except that a module could be causing it.
So, I guess I'll just leave IE looking lame for now and at a certain point I'll turn CSS aggregation back on. Thanks for the tip, just isn't working for me :\
Did you almost crap yourself? We did.
We were just so enraged to learn that IE imposes this limit (with that said, the number of modules on this site we were working on (we inherited it) coupled with a copied Zen theme is a LOT of CSS anyway). I believe we filed this under "rant" in our blog.
http://www.redfinsolutions.com/redfin-blog/ie-7-and-ie-8-impose-31-css-f...
I didn't know unlimited_css existed, but I'm curious that it doesn't work. We just turn on compression as well, to solve it, and turn it off temporarily while debugging stuff (since the site's not live yet).
.cw.
http://www.redfinsolutions.com
@import
AFAIR it uses @import to pull all the stylesheets into one.
The MSFT internet explorer is
The MSFT internet explorer is part of the OS, therefore just more overhead for the Browser.
Firefox, is a separate application.
Unlimited_CSS module not working for me and I need HELP!!
I'm having the same problem with my site. My site (http://www.cincyliberians.com/) has not css styles when viewing in IE browser but works fine in Firefox. Some of the pages have css styles in IE but the front/home page does not css styles applied. I'm using the picture reloaded theme and when I switch to the default theme (Garland) it still does not have css styles. Please help me!!. I installed the Unlimited_CSS module and nothing work for me. How do I enable the CSS aggregation mentioned above? Any help will be appreciated.
Performance settings page
Go to Administer > Site configuration > Performance and enable the option to 'compress CSS files'. This is a good idea anyway regardless of the 31 file limit in IE. Just remember if you modify your site's CSS files with compression enabled, you may have to disable and then re-enable it for your changes to take effect.
any tips on knowing how many css files drupal is using?
any tips on knowing how many css files drupal is using (max) and whether this is an issue for a particular site?
Theme dependent
That is theme-dependent; not a drupal issue. Firebug is awesome for figuring these things out, as is the theme's *.info file.
I don't see what it has to do
I don't see what it has to do with the theme.
1) Internet Explorer limits to 31 stlyesheets.
2) Drupal modules bring their own stylesheets to the table causing the css overload.
I think a good module idea would be a list of stylesheets in checkbox format where you could uncheck causing them to not load.
Themes, continued
Themes allow you to specify *.css files which contributes to active css links; it's a direct relationship. Please be specific if I'm wrong so I can learn.
However, modules DO add to the load; good point.
But all of which is in addition to core drupal. A pedantic but relevant point to the original question.
Here it is...
Get ready to scroll!!!!! :)
<link type="text/css" rel="stylesheet" media="all" href="/sites/all/modules/views/css/views.css?i" /><link type="text/css" rel="stylesheet" media="all" href="/sites/all/themes/ninesixty/styles/framework/reset.css?i" />
<link type="text/css" rel="stylesheet" media="all" href="/sites/all/themes/ninesixty/styles/framework/text.css?i" />
<link type="text/css" rel="stylesheet" media="all" href="/sites/all/themes/ninesixty/styles/framework/960.css?i" />
<link type="text/css" rel="stylesheet" media="all" href="/sites/all/themes/ninesixty/styles/framework/debug.css?i" />
<link type="text/css" rel="stylesheet" media="all" href="/modules/node/node.css?i" />
<link type="text/css" rel="stylesheet" media="all" href="/modules/poll/poll.css?i" />
<link type="text/css" rel="stylesheet" media="all" href="/modules/system/defaults.css?i" />
<link type="text/css" rel="stylesheet" media="all" href="/modules/system/system.css?i" />
<link type="text/css" rel="stylesheet" media="all" href="/modules/system/system-menus.css?i" />
<link type="text/css" rel="stylesheet" media="all" href="/modules/user/user.css?i" />
<link type="text/css" rel="stylesheet" media="all" href="/sites/all/modules/cck/theme/content-module.css?i" />
<link type="text/css" rel="stylesheet" media="all" href="/sites/all/modules/ctools/css/ctools.css?i" />
<link type="text/css" rel="stylesheet" media="all" href="/sites/all/modules/date/date.css?i" />
<link type="text/css" rel="stylesheet" media="all" href="/sites/all/modules/date/date_popup/themes/datepicker.css?i" />
<link type="text/css" rel="stylesheet" media="all" href="/sites/all/modules/date/date_popup/themes/timeentry.css?i" />
<link type="text/css" rel="stylesheet" media="all" href="/sites/all/modules/ed_classified/ed_classified.css?i" />
<link type="text/css" rel="stylesheet" media="all" href="/sites/all/modules/filefield/filefield.css?i" />
<link type="text/css" rel="stylesheet" media="all" href="/sites/all/modules/jquerymenu/jquerymenu.css?i" />
<link type="text/css" rel="stylesheet" media="all" href="/sites/all/modules/logintoboggan/logintoboggan.css?i" />
<link type="text/css" rel="stylesheet" media="all" href="/sites/all/modules/nice_menus/nice_menus.css?i" />
<link type="text/css" rel="stylesheet" media="all" href="/sites/all/modules/nice_menus/nice_menus_default.css?i" />
<link type="text/css" rel="stylesheet" media="all" href="/sites/all/modules/tagadelic/tagadelic.css?i" />
<link type="text/css" rel="stylesheet" media="all" href="/modules/forum/forum.css?i" />
<link type="text/css" rel="stylesheet" media="all" href="/sites/all/modules/calendar/calendar.css?i" />
<link type="text/css" rel="stylesheet" media="all" href="/misc/farbtastic/farbtastic.css?i" />
<link type="text/css" rel="stylesheet" media="all" href="/sites/all/modules/cck/modules/fieldgroup/fieldgroup.css?i" />
<link type="text/css" rel="stylesheet" media="all" href="/sites/all/modules/cck/modules/content_multigroup/content_multigroup.css?i" />
<link type="text/css" rel="stylesheet" media="all" href="/sites/all/modules/views_slideshow/contrib/views_slideshow_singleframe/views_slideshow.css?i" />
<link type="text/css" rel="stylesheet" media="all" href="/sites/all/modules/agenda/agenda.css?i" />
<link type="text/css" rel="stylesheet" media="all" href="/sites/all/themes/ninesixty/styles/styles.css?i" />
<link type="text/css" rel="stylesheet" media="all" href="/sites/all/themes/focninesixty/focninesixty.css?i" />
Ugly
That is frankly a ridiculous amount of stylesheets, without regards to IE's limitations.
32 stylesheets total:
3 are drupal core stylesheets
6 are related to themes,
23 are related to modules
It's a good argument to load as few modules as possible, isn't it?
Always something to learn.
It would be nice if there
It would be nice if there were a way to compress groups of stylesheets (e.g. all css of a theme, or system related, or of a particular module). I've whittled away all modules I am not using or are not needed and can't get lower than this in regards to individual stylesheets.
on my earlier question of
on my earlier question of finding out what css files are loaded, if themes, core and modules can all load their own, presumably we need to check around our sites to various pages where different functions are used to see what is really loaded where...
... or are they all loaded for all pages for a particular theme? I wouldn't think so but I'm new to drupal...
other than firebug I don't suppose there is any nice way to see a summary of what is used for what or what the max is?
Even aside from the IE max css files issue, this many css files certainly opens up great potential for confusions if you don't keep them mutually exclusive, or have very careful overriding... the possible combinations add up.
jeff
I think a good module idea
http://drupal.org/project/stylestripper
With all the searching on
With all the searching on this I never came across this module... that would be a good tutorial at a meetup. Module searching. Thanks for the lead!
Have you used this module? It
Have you used this module? It looks unmaintained to my untrained eye.
Only one release, on 2009-Jan-20. And the last update was a few hours later on 2009-Jan-20.
Will install and check it out, maybe it works fine... but why is it still a 'dev' release after 11 months? Maybe I don't understand how this stuff works. :\
Depends on the module. This
Depends on the module. This particular one probably doesn't do much of anything, so not too much harm in trying it (except for the fact that you are developing on a live server, but that's a problem no matter what).
In addition, if you wanted to get dirty in code, you can add a bit to the theme_page_preprocess function in your template.php file. - http://snipplr.com/view/12182/remove-unwanted-stylesheets-from-drupal-6/
Compress CSS
If you combine CSS in the performance tab, it will be like 2 files.
Ken Winters
That is not good for
That is not good for development environment though.
Bam, Your solution has been
Bam,
Your solution has been provided I believe. Develop in a developer friendly browser; proof check in the more error prone browser.
Best of luck!
Yeah, that works. It's just
Yeah, that works. It's just that I am developing a live site. So people are seeing a fugly IE version sometimes. Oh well.
In any case I believe that
In any case I believe that any documents you might have read regarding best practices for building or maintaining Drupal websites would advocate utilizing two separate environments. One for development and testing, one for the live data.
touche!
touche!
Put your dev web site in your production web site
I inherited a site where the development site is set up as a directory within the production site structure. The domain manager has a subdomain defined that points to the folder. Drupal seems happy to have a site within a site. I develop in the dev site, then move changes to the production site as approved.
I smell what your cookin. Not
I smell what your cookin. Not a bad idea.
http://drupal.org/project/sf_
http://drupal.org/project/sf_cache
Seen this goody?
Snipped from the page
Ive not used it yet but it seems more logical then just aggregating all css to just two files...
My method is to never touch IE until absolute last, and do as little as possible to cater to its lameness, I only support ie7 & up too 6 is just too much crap to worry about, frankly I think IE users are used to viewing a crappy web so it doesn't bother them much.
I'll never forget the first time this happened to me, nearly went postal until I discovered the css file limitation BS, it was an WSOD with no apparent reason for it, WTF I had thought I understood the full crapyness of IE this was a new one for me. lol
sf_cache looks awesome
I really like the idea of sf_cache because, if used intelligently, it should really improve your site's performance. But does the -dev version work for Drupal 6? I now that NowPublic (the maintainers) are still on Drupal 5.
- John (JohnAlbin)
unlimited css module is buggy
yeah, the unlimited css module is pretty buggy.
I wrote a module that helps out with IE testing during development. http://drupal.org/project/ie_css_optimizer And no reported bugs!
It can be used to aggregate all your module's CSS files into one file while leaving your theme CSS un-aggregated. That should get your number of stylesheets below the 31 limit of IE.
[edit: I forgot to mention I wrote an article about the IE 31 stylesheet limit: http://john.albin.net/css/ie-stylesheets-not-loading ]
- John (JohnAlbin)