[Solved] Making "CSS as document" work with IE

One of the things I just LOVE using MODx is the ability to handle the CSS dynamically, by defining a new document in MODx as text/css. I have become quite used to split my stylesheets into nice chunks which then make the editing and maintenance process a real breeze

I am not even mentionning the ability to use snippets in those stylesheets, since few are available at the moment (for instance, it seems to me a random background is floating around).

Anyway, to the point : So far I have dropped using CSS as document stuff because I end up with IE no rendering style... you have to reload the page to get the stylesheet to load...

I had a similar problem with Expression Engine, and EE’s KB has this answer to the problem :
http://www.pmachine.com/ee/knowledgeblog/ie_blank_page_works_after_refreshing/

While Internet Explorer does support gzip compression, it has a bug that leads to a problem if the compressed file is smaller than 4k in size; something that can often happen. In a case like this you can try turning the “Enable GZIP Output?” option off.

I don’t know about you, but most of my css files are around 8-12kb, I imagine some could get below the 4kb treshold and cause trouble like it did for me. And my host had gzip enabled.

Of course, turning off gzip is not a nice option, since it can save bandwith... unless you can selectively turn off gzip only for CSS.

So I did a little more research and found a nice article from 54eleven :
The Definitive Post on Gzipping your CSS

Didn’t solve it for me so I dug deeper and found this code for httpd.conf in the vBulletin forum :



Beware about the code above : for some reason I can’t write $ and " without space, it turns out as "\.css%body%quot; on the board, so I had to put spaces before and after the quotes.

You also can find some more info here on Webhostingtalk :
Gzipped or Not ?

I still have to test it, just found this out. I’ll confirm later that it works (would be a blessing !).

(Of course it means you edit manually your clean url suffix to .css for your css documents, since default is .html ! A trick from Ryan but can’t find the reference... just add .css after your alias name, it will override the default suffix - Ryan correct me if I am wrong !)

Thought I would share

Edit : doesn’t work, because of the default suffix is still applied to the CSS document... (in my case, html)

Great tip, David! Extremely useful, thanks for sharing

Thanks Garry

I still have to confirm though... Did you meet the same problem with IE or not ?

I’ve had the problem in the past and never really looked into it, so I’ll definitely give this fix a blast. Be great if it works!

Indeed it would !

I have been so upset by this, it’s so flexible to have those CSS as MODx document (especially when you move your website, but also for easier maintenance...).

I won’t have time to test this before leaving for the week-end, but I’ll keep you all updated !

Okay, it’s more complicated than I thought.

The override suffix I thought I read somewhere (adding .css to your suffix) doesn’t work. I just have css_name.css.html and the file is gzipped not matter what specific directive I put for .css

I could turn off gZip for all content with a simple directive in .htaccess (mod_gzip_on Off) but it seems a big price to pay to be able to use CSS as document in MODx.

Of course I could call it a day and just put a conditionnal CSS for IE and benefit from dynamic stylesheets, but that’s not satisfying... don’t you think ?

Following up on this, after some more testing and tips from the team. A few guidelines (Thanks Susan for those !) :

• don’t use the [~xx~] syntax in your template =>use the alias name directly, not the MODx tag syntax
• don’t use the link method, but the @import method

It means you have to call it like this :



It then works perfectly fine in IE That is, if you have no problem with your antivirus protection. Let me explain : when I first tried this method, the first page loaded just fine, but then any link I would click hangs IE, and then results in a blank page. After some hair pulling, I finally had a stroke of genius and disabled Kapersky’s real-time protection and bam! it worked perfectly.

I have asked on another thread about a site I am launching to test it with IE and their antivirus. So far, only Kyle has suffered the same problem.

Hi, all.

I’m using 6 CSS files as MODx documents with XAMPP 1.5.2.
With IE6 and my environment, the problem mentioned above does not happen.
Test the following methods.

Please uncomment of last four lines in the .htaccess that is included MODx.
BrowserMatch "MSIE" brokenvary=1
BrowserMatch "Mozilla/4.[0-9]{2}" brokenvary=1
BrowserMatch "Opera" !brokenvary
SetEnvIf brokenvary 1 force-no-vary

this requires "AllowOverride FileInfo" and "mod_setenvif".

Thanks Eastbind, I’ll try that tomorrow morning !

I hope it works !!!

IT DOES WORK !

Thanks A LOT Eastbind !