Optimize CSS & JS breaks IE & FireFox (All Themes)

Question

Problem
Theme is not showing properly on my production server for individuals using Internet Explorer & Firefox after setting the CSS & JS Optimization options to enabled. I initially thought the theme was broken for IE, however upon further review I realize the reason IE didn't work while CSS/JS optimization was disabled is because of Internet Explorer not handling more than 31 CSS files.

To Help with troubleshooting I used the Site Documentation module to get all the info on the site, modules, etc. Here is the link to it.

Drupal Core: 6.22
Theme: 0 Point, Zen, Tao, PixtureReloaded

• It is not a multi-site installation
  
• It is on the same web hosting account as 3 other drupal installations, the 3 other drupal installs do not exhibit the same issue.

I used the Backup & Migrate module to copy the MySQL DB and used FileZilla to download the site/default/files/* folder(s) & files, site/all/modules, libraries, & themes files. I restored the DB & sites/default/files folder to a test server. Setting "Optimize CSS & JS" to enabled fixes the 31 css files problem for Internet Explorer and both FireFox and Internet Explorer are able to view the website theme as normal.

The absolute strange quandry here, is when I enable CSS/JS Optimization on the production server it breaks the theme for both IE and FireFox. Chrome and mobile devices (android & iPhone) are unaffected. I have not checked any other web browsers for issues.

I have listed the themes that I have specifically checked. Where do I continue troubleshooting this from here? I thought maybe changing the theme would fix it, however it has not.

Troubleshooting
Enabled the Optimize CSS/JS Files options by

• Making setting the File System >> Public option.
• Setting the Performance >> Optimize CSS/JS options to enabled.
• Clearing the Cache and Rebuilding the Theme Registry.

Switched the Theme to PixtureReloaded (an adaptive theme) and repeated the steps above.

Switched to Zen and repeated the steps above.

Checked the file system permissions for sites/default/files to make sure there was read/write access and there is for owner/group/other

It seems that regardless of the theme I switch it to it does not fix the IE issue, and when I optimize the css/js files it breaks the website for FireFox users as well.

-- Edit 11/1/2011 1:30AM UTC -- As per suggested I re-encoded all the files in the theme from ANSI to UTF-8 without BOM.
Backed up the original theme folder, after taking the site offline
Uploaded via ftp the re-encoded theme
Ran update.php, cleared the caches, rebuilt the theme registry
Issue persists.

-- Edit 11/1/2011 4:57 PM UTC --
I also tried using the Garland, Mannilli, and Bluemarine themes with the same results (I tested this last night when I took the site offline).

-- Edit 11/1/2011 6:53 PM UTC --
I took the site offline, changed the settings to "Optimize CSS: Enabled"
Viewed Source for Chrome, FireFox, & IE9
I am able to click on the links for the CSS files and browse them, each css file is the same, and I did a DIFF/Compare of the tag content and except for a session ID that ubercart uses for the shopping cart each head section is the same.

Answer 1

One possibility is that one or more CSS files have a Unicode BOM at the beginning. The CSS optimizer that Drupal uses (at least the one in 6) doesn't work properly with these. IIRC, the first rule gets mangled if it is the very first line in the file.

Switching the encoding with Notepad++ is the easiest way to fix this in you are on a PC.

Answer 2

Resolution:

• Backup the contents of the sites/default/files folder excluding the css, ctools, & js folder (I am assuming if you have another module or code creating css files that it should also be excluded from the back up)
• Delete the sites/default/files folder (to remove the css, ctools, & js folders), YES I had to delete the entire files folder or this does not work and the issue persists.
• Allow drupal to recreate the css, ctools, & js folders.
• restore the contents of the sites/default/files folder (EXCLUDING the css, ctools, & js folder)

Notes:

• It does not matter if the CSS & JS optimization is set before or after the above steps the results are the same. The site theme will work again for both FireFox & Internet Explorer
  

• Restoring the css, ctools, & js folders/files will break the site again.

I do not know enough about drupal or php to trace this issue to it's root cause, if someone would like to offer to do this I am happy to supply the necessary files/folders to do so just contact me through here.