Merged CSS Fails In Firefox

Question

In order to dramatically reduce the number of HTTP requests on my ASP.NET MVC website, I am programmatically merging the files.

Essentially, I have an MVC URL http://localhost/Optimisation/JavaScript/ that calls my controller. The controller reads the javascript files in a certain order, merges them into a single output and renders it on a view.

This works fine.

I am implementing the same concept for the CSS now, using http://localhost/Optimisation/CSS/ - this merges a number of CSS files in a particular order and renders it onto the view.

This works in internet explorer, but in FireFox the styles are all absent. When I "inspect" the CSS file using FireBug it says that the file is empty. The same technique works perfectly in Internet Explorer, so the code behind is working - and if I browse to http://localhost/Optimisation/CSS/ using FireFox, it shows me the raw CSS that I've merged.

I'm referencing the optimised CSS like this:

<link href="http://localhost/Optimisation/CSS/" type="text/css" rel="Stylesheet" />

Answer 1

Make sure the server is sending it with a content-type of text/css.

I think Firefox will put a warning in the error console if it's not (or you can just look at the headers with your tool of choice).