Css merge does not work

If you enable css merge and you find that your site does not look the same or the styles are wrong then the reason behind it might be the css @import.
Remove the @import sections and add the imported css files in page.xml or in any other xml on under the default section the following way:

<reference name="head">
            <action method="addItem"><type>skin_css</type><name>my-css-folder/my-file1.css</name></action>
            <action method="addItem"><type>skin_css</type><name>my-css-folder/my-file2.css</name></action>
...
</reference>

Also other simple causes can be that your css files are given in the wrong order in the xml head block or simply your css contains parser errors (curly brace { is not closed, contains invalid strings like html comments instead of the valid css comments and so on)
I advice you to check your css for errors with a validator like the one from W3
Removing css errors made merge to display the site correctly in many cases for me.

This entry was posted in Errors and tagged , , . Bookmark the permalink.

Leave a Reply

Your email address will not be published. Required fields are marked *


7 × = seven

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>