On one of our development sites the CSS Optimization feature breaks the image PATH's to some of the image files in our theme. When CSS optimization is turned off the theme works. Upon investigation I found that turning CSS Optimization on turns all relative path names to absolute path names. but the resulting absolute path names are not all valid. Here's why:

The CSS files in our theme exist in two places sites/all/themes/themename/css and sites/all/themes/themename/css/subdir. The images in our theme exist at sites/all/themes/themename/images. Each of the files in /themename/css/subdir are imported by css files in /themename/css.

When CSS Optimization is OFF
Image file path names in /themename/css are of the convention: url(../images/foobar.jpg)
Image file path names in /themename/css/subdir are of the convention: url(../../images/foobar.jpg)

When CSS Optimization is ON
Image file path names in /themename/css are of the convention: url(sites/all/themes/themename/images/foobar.jpg)
Image file path names in /themename/css/subdir are of the convention: url(sites/all/themes/images/foobar.jpg)

Herein lies the problem, all image paths in themename/css/subdir are now pointing at the wrong PATH. This may just be a problem with the order of operations. If the image PATHs are not resolved into absolute paths BEFORE combining the css files into one file. Then the absolute paths will not be valid PATHs.

Our temporary solution is to move all css files into one directory (i.e. themename/css)

Comments

mattyoung’s picture

mattyoung commented

.

rct240’s picture

rct240 commented

Some more context to the issue:

Files:
sites/all/themes/themename/css/foo.css
sites/all/themes/themename/css/subdir/bar.css
sites/all/themes/themename/images/foobar.jpg

line 1 of sites/all/themes/themename/css/foo.css: @import "subdir/bar.css"

line 17 of sites/all/themes/themename/css/subdir/bar.css: background-image: url(../../images/foobar.jpg)

webel’s picture

webel commented

Drupal 6.22

I'm encountering this too.

I have an override of jquerymenu.css to force it to use the same icons that are used elsewhere in Drupal for open/close symbols on menu branches.

.../sites/default/themes/ourtheme/stylesheets/jquerymenu.css

Where the main ourtheme.css has (amongst other imports):

@import "./stylesheets/jquerymenu.css";

With CSS optimisation off I have:

ul.jquerymenu li.parent span.closed {
    background-image: url("../../../../../misc/menu-collapsed.png");
    list-style-image: url("../../../../../misc/menu-collapsed.png");
}

With CSS optimisation on Firebug reveals this becomes:

ul.jquerymenu li.parent span.closed {
    background-image: url("/sites/misc/menu-collapsed.png");
    list-style-image: url("/sites/misc/menu-collapsed.png");
}

The fix suggested above (thanks @rct240) worked for me, I moved my overriding jquerymenu.css back up one level (to main directory of theme)
and after adjusting my relative paths and (important) flushing the page requisites I got it to work ok with CSS optimisation on.

But it's definitely a bug that should be fixed.

Status: Active » Closed (outdated)

Automatically closed because Drupal 6 is no longer supported. If the issue verifiably applies to later versions, please reopen with details and update the version.