IE limits Drupal to 31 stylesheets total

most certainly a ZEN issue.

Oh, amd please read the FAQ on posting issues. " Critical " means critical for the module or theme. It is not meant to be used for your private priorities.

I enabled Tagadelic on my test system and there are no conflicts between Zen and tagadelic; tagadelic’s blocks display without issue.

And the only CSS classes tagadelic seems to use are tagadelic level1 level2 level3 … and Zen doesn't use any of those classes.

So, David, it must be due to some modification you made to your sub-theme. Do you use level1, etc as any of your class names?

Oh! that one!

http://msdn.microsoft.com/en-us/library/ms531194(VS.85).aspx

IE limits you to 31 stylesheets total.

Fortunately, you can enable CSS aggregation under admin / settings / performance

Thanks very much to all of you. I spent hours and hours on this issue. Thank god it works with CSS aggregation enabled!!!

I'd like to reopen this issue since it's very likely to hit this limit, now that zen is split up into so many files.
I've got 31+ stylesheets on my site at the moment, all created by modules, which means my subtheme_name.css file isn't loaded at all. And there's no indication of why!

Enabling the CCS optimization does work around this issue, but I could not find anything about it in the readme etc. This does make it much harder to make quick compares with IE when modifying styles, but I think a simple note about it somewhere will be enough for now.

I agree perhaps this should go into the Zen documentation as a user tip... I just spent 2+ hours working on this... i had aggregation off since I was developing, and never would have thought it would solve the problem. Man oh man. Time to take a break.

Its already in the ie.css, but that's not visible enough.

I'm going to +1 this feature request. I've just spent an entire day trying to figure out why my site's display was broken in IE.

Please try the hook_preprocess_page() code from http://drupal.org/node/228818#comment-1473586, I've used it in Zen v6.x-2.x-dev to great effect.

Actually could we get the code from that discussion added to Zen if I supply a patch? :)

Here's a patch for both the HEAD/v6.x-2.x and 6.x-1.x branches.

The code in http://drupal.org/node/228818#comment-1473586 is extremely buggy; it doesn't properly deal with overriding or removing module stylesheets at all.

Right now, I'm working on a solution for this problem as a module: http://drupal.org/project/ie_css_optimizer When I finish that up and release a 6.x.-1.0 version, I'll try to get a Zen-only solution.

A Zen-only solution would be great!

I just got bit by this one too (and I didn't notice the comment in ie.css until it was pointed out in this thread, so I agree that it's not visible enough). The Zen starterkit theme includes 17 stylesheets by default, many of which are empty. I think it would help if some of the more obscure and/or empty stylesheets were commented out by default in the .info file. I think the .info file should also include a prominent notice about the 31-stylesheet limit.

For example, views-styles.css and panels-styles.css have no content whatsoever--I see no reason for these to be enabled until the theme developer needs them. Similarly, page-backgrounds.css, fields.css, and blocks.css have some stub definitions but no actual styles defined (except for a lonely margin definition in blocks.css). Would it make sense to comment these out of the STARTERKIT.info.txt file? That'd at least help to delay the inevitable :-)

Why don't we just combine some of the starter kits CSS files. There is no real need to have so many separate CSS files, each one is very small.

I imagine they were broken up to make a nicely organized set of CSS files...keeping CSS tidy has always been a challenge for me and I dig the way Zen does it.

I do think, however, that a more evident warning about IE is necessary.

I also like the way the Zen CSS files are organized, but separating into separate files is not the only way to organize. The 31 limit will be present in IE9 so this is not going away any time soon. Zen adds 19 style sheets, Drupal 6 Core adds 5 style sheets, Views and CCK adds 3. With Drupal 6, Zen, Views and CCK the count is already up to 27 style sheets. Most people have a pre-defined list of modules they start with when setting up a new Drupal site. It is likely most Drupal sites with Zen will be over the 31 style sheets limit, my sites are.

Aggregating the CSS works great when the theme is in production and your environment does not require updates to the theme. When developing a Zen theme it is very cumbersome to activate CSS aggregation to test in IE, then clear the cache each time you make a edit.

I think documentation on the IE style sheet limit is important because this issue will remain relevant, but I think documentation is not the only improvement needed. Zen should be easy to develop with, should not require additional modules (just to develop) and using separate CSS files is not the only way to organize content. Commenting out empty style sheets, as suggested by wapcaplet, and combining like style sheets can reduce the count to almost half!

I propose to combine style sheets, organize with comment blocks and name files to match the ordered layout in the file.
blocks.css = blocks.css & block-editing.css
pages.css = pages.css & page-backgrounds.css (All classes in page-background are empty in pages.css)
forms-fields-comments.css = forms.css, fields.css & comments.css
messages-tabs.css = messages.css & tabs.css

Comment out...
views-styles.css & panels-styles.css
wireframes.css

The above changes would reduce the style count by almost half and still provide organized CSS.

In comparison the fusion theme only has a couple style sheets.

I have attached three patches to help people evaluate the proposed changes.
zen-reduce-stylesheets-info.patch update the STARTERKIT.info.txt file
zen-reduce-combine-css.patch is a patch on the css directory using "-upN"
zen-compare-css-dir.patch is to provide a readable view of how file names change.

Looking into how Drupal 7 is including CSS I can see why some would want to classify this as a documentation issue only. Drupal 7 uses the @import method and groups style sheets with @import. This allows a very high style sheet count in IE. When aggregation is turned on in Drupal 7 style sheets are then switched to using the import method. This does not help with Drupal 6, but probably leads to some wanting to stick with the current style sheet layout.

If there is no backing to reduce the style sheet count for Drupal 6 maybe the following patch will help.

Just my input...I can dig on the methods you suggest in #21 and #22 sky

IMHO lumping comments in with the fields & forms CSS is the only move made in #21 that isn't intuitive, but the rest of the suggestions are right on

Try the IE CSS Optimizer: http://drupal.org/project/ie_css_optimizer

I had a similar issue with tinyMCE only on IE and this cured the problem.

Posting the documentation patch from http://drupal.org/node/936580#comment-3775100

I don't notice that anyone has noted that if the server requires private download set up (e.g., one is using Ubercart to sell products), then the optimization cannot be enabled. Note that we have this text in the performance area: "These options are disabled if you have not set up your files directory, or if your download method is set to private."

Yeah, you are completely hosed if the private download method is enabled. There's no known workaround.

Ok. I've added docs to several of the READMEs so that, hopefully, no one misses it.

Fixed. http://drupal.org/cvs?commit=503598