Drupal Optimize CSS Files Creates Problem With 

Author:
phil
Created:
Sunday, January 06th, 2013
Last Updated:
Wednesday, October 02nd, 2019

Disclaimer: Accessing the information on this page means you agree to the Sites Terms of Service


Well, I managed to run into a nasty little problem with a Drupal theme that was all caused by the funky characters: 

The problem happened when enabling Drupals "Optimize CSS Files" which basically kept the optimized css file from rendering anything in my style.css file. After scratching my head for a while and trying to do some searches on "Drupal " which led me no where, I decided to to a generic Google search for "" which led me to this very helpful stack overflow page.

As it turns out, the  characters is called the Byte Order Mark (BOM) which is something that is generated by certain text editors if it is set to UTF-8. UTF-16 and UTF-32 will show up as þÿ or ÿþ. By default, PHP isn't designed to interpret the BOM, so when it is inserted into the optimized CSS file, instead of being a white space (since PHP doesn't know any better), it spits out the UTF-* BOM. Or something like that... It's all over my head, go look it up on Wikipedia.

Point is, if you're running into a weird situation where your theme looks fine before you turn on the Optimized CSS Files, but looses all of the styling for your theme after, your text editor might be encoding the file as UTF-8 and inserting the funky BOM at the beginning.

The theme in question for me was Drixel for Drupal 6 and the solution I had to take was to download the css file in question to my local machine, open it in a generic text editor like notepad (or notepad++), copy the entire contents of the css file and paste it into a completely new file. I tried to just save over the existing info on the original file in notepad++ but it kept the BOM intact... You essentially have to sanitize the CSS file.

If you're a Linux guru, the stack overflow page I listed above has a link over to the awk command that can get rid of the UTF encoding for you.

If this solution managed to fix your problem, let us know in the comments!

Post Comment