Drupal: CSS compression breaks layout if we use @import url

21 03 2010

Recently we faced a unique issue in one of the drupal project. The layout used to break completly in IE. But it used to work well in firefox. Later we figured out that IE is unable to load more than 31 css files. If the css files exceed 31 files it does not load after 31 files.

If we compress the css this number of css files problem does not occur. So we enabled css compression for the performance settings page. Then the layout was completly breaking.

When we compress css, layout breaking means there are some css syntax errors which are causing css to render properly. We started fixing all the W3c css validation errors. One of the error which we are seeing is for one of the selector the background property was causing the issue. The original css is like this

#header div.drigg input-sumbit {
backgroud: transparent url('../img/image1.png');
color: #333;

After compress the css became

#header div.drigg input-submit {backgroung: transparent url(css/color:#333)}

The above statement telling that when we compress the url was changed. When I digg further why this is happening only this selector, then I realised that this css was written in a another css file and this was imported in style.css using @import url.

Then removed this @import statements and added these file paths in my theme .info file. Then when I compress css, layout did not break. Now it was working well in IE and other browsers.

Finally I realised that we should not use @import url, instead we can load all css files by placing them in the theme .info file.




3 responses

17 07 2010

but the file .css imported was in one other directory respect at style.css?

17 07 2010

where are stored the .css compress?

you use drup 6 ?
when activate compression (really is optimize = aggregation + compression),
haved problem with a blank page drupal ?
i make some test in localhost but have problems

18 07 2010

Yes, I use drupal 6. I did not get blank page but the page layout got disturbed because not loading of css files. The compressed css files will store in the files directory.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: