Enabling CSS aggregation messes up the CSS in Safari

I think this is not unique to the zen theme nor to safari.

I am encountering something similar (Drupal 5.1, PHP 4.4.5) using the aberdeen-liquid theme (from aberdeen 5.x-1.7) (with slight local mods) and viewing with either Opera 9.10 or Firefox 1.5.0.7. Both browsers reveal the same problem.

Enabling "Aggregate and compress CSS files" causes the output to become different. (And both Opera and Firefox show the same thing.) With the CSS aggregation enabled, the site map generated by Drupal's site map module contains both browser-generated bullets and css-specified images, superimposed, in the bulleted list of the site map. Also the spacing to the left of the menu items near the left of the screen changes.

Please see screenshots at;

http://www.rahul.net/dhesi/drupal-css-aggregation/shot-no-css-aggregatio...
http://www.rahul.net/dhesi/drupal-css-aggregation/shot-with-css-aggregat...

Since the difference in behavior looks exactly the same in both browsers, I doubt that it's caused by a browser issue.

Both screens validate as valid XHTML 1.0 strict and CSS 2.1, as tested at with validator.w3.org.

I also tried the native aberdeen-liquid theme without my local mods. The placement of the bullets and graphics in the site map list is difference, but both still occur when CSS file aggregation is in effect. So I don't think it's my local mods that caused the problem.

- Rahul

P.S. I tried to upload both screenshots via this Drupal form, but it will take only one unique upload(?). So I put both screenshots on a web site as given above.

Hi,

I'm working on a zen-derived theme, and I encounter a similar situation. The

I committed a fix, and a new release will come out as soon as we fix some other bugs.

dmitrig01's change doesn't fix the issue.

The real issue is that all @import instructions in css files are moved to the top of the final aggregated css file, and this causes a side effect issue on safari.

Which one ? I don't know, but the only known solution is to edit style.css file and replace the line @import "icons.css"; with the content of icons.css file.

This fixes the two issues I had on Safari:
- font size very big
- bad display of icons in 'recent blog posts' block.

As far as I know, dmitrig01's proposed fix was that one: http://cvs.drupal.org/viewcvs/drupal/contributions/themes/zen/layout.css...

We're having the same problem with sites that use our own CSSCK (CSS Construction Kit) CSS framework. Enabling "Aggregate CSS" breaks several aspects of the site's design in Safari. I've attached a screenshot to illustrate.

Live site is here: http://www.kraftriket.se

i'm having the same problem. the zen theme in this version doesn't use the imports in the style.css that are described in the problem or the fix suggested above. ???

the culprit seems to be the charset declarations which end up in the middle of the file after compression and stop safari from interpreting the rest (because by standards they can only appear at the begining of the file).

http://drupal.org/node/150759 has details on the issue and a patch for common.inc to filter out the problems.

Also have a look at this issue:
http://drupal.org/node/172830

Basically CSS aggregation will break URLs starting with /

It may or may not be part of your problem.

This is a bug in Drupal core, not in Zen. And it has been fixed in http://drupal.org/node/150759 and will be released with Drupal 5.3.

In the interim, the work-around is to remove the @CHARSET "UTF-8"; declarations from the top of the CSS files. My understanding is that some buggy editors (like Eclipse) won’t properly read a UTF-8 encoded CSS file.

However, since Zen’s CSS files don’t have any UTF-8 characters, we don’t really need the @CHARSET declarations.

Any objections to me committing a change that removes the @CHARSET declarations?