Scenario: I deployed my mvc 3 application to IIS 6 (with NTLM authentication). While using Internet Explorer (IE) everything looked great. When I tested the site with other common browsers Chrome/FireFox/Safari none of the styles specified in the css sheet were used.
I first checked with FireFox/Firebug that the css was indeed found. The css sheet was found and returned to the client. I tried to view the css sheet within Firebug and I got the message "There are no rules. You can create a rule."....so the css is found however for some reason it is not being applied in non-Internet Explorer browsers.
The css is reference via the _layout.cshtml as shown...(my first attempts were to modify the path to the css sheet even though I could see the css was accessible to the browser)
I.e. <link href="@Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />
Next attempts used a couple different online css validation apps to ensure my css syntax was not causing an issue. All checked out ok.
After making a number of minor attempts at digging out additional clues…I checked the IIS 6 setup (everything worked fine locally with IIS 7 so I was narrowing my focus on IIS as being the problem).
Solution: The site is hosted on a Microsoft IIS 6 server and it was not sending the appropriate MIME type for CSS files. The fix to this problem was to add a custom MIME type associating .CSS files with the type "text/css". Obviously, IE was able to discern that the downloaded text file was to be used as a style sheet. Interestingly the other browsers did not have that default behavior and relies on the web server to identify the file of type text/css.
To resolve, open IIS console, navigate to the root application and add MIME Type text/css for documents with the extension .css