MVC CSS not rendering in Visual Studio When debugging

Question

I have an issue where the CSS is not rendering properly when I compile the MVC project and view it on [https://localhost/MyApp.] The buttons, and background image are not showing up. It worked one time, then for some reason it stop working. Something with the pages not caching? I used firebug to check to see if the pages were missing, and no errors were found. Something in Visual Studio 2010 settings need changing or IIS?

However, when I publish it to an individual website, instead of in the (default web site) area, using [https://localhost:444] website I setup in IIS 7.5, the css seem to render fine.

What is the problem?

Answer 1

It looks like your web site is configured to use SSL. Except that when running locally you probably do not have a valid SSL certificate which is trusted by a certification authority and the client browser is refusing to download the static resources. One way to fix that is to add the address as trusted. So copy paste the url to some of your CSS files in your browser address bar:

https://localhost/MyApp/Content/Main.css

and you will see a warning about the invalid certificate that you could ignore by adding an exception to your browser. Hit Ctrl+F5 to force a refresh once the exception is added and your application should start working properly.

Answer 2

One common problem that occurs on MVC 4 websites is difference between release and debug when you have css bundles. It does not have to be your case, but you have the symptoms.

I will explain on an example.

If you have bundle which looks like this:

var styles = new StyleBundle("~/Content/css").Include(
            "~/Content/toastr.css",
            "~/Content/flags/stylesheets/flags16.css",
            "~/Content/flags/stylesheets/flags32.css",
            "~/Content/Site.css")

And in flags16.css you have:

background:url('flags/images/flags16.png');

Which uses file in ~Content/flags/images/flags16.png

That will work in release mode (compilation debug="false" in web.config), because all of your css files in bundle will be served as 1 file located at ~/Content/css with relative path 'flags/images/flags16.png' pointing at correct file. However, in debug mode, ASP.NET MVC will disable minification, and if you used @Styles.Render("~/Content/css") inside your view, it will render link to every one of your files contained in a bundle, so there will be a:

<link href="/WorkOrders.Web/Content/flags/stylesheets/flags16.css" rel="stylesheet">

And from that path, relative path to image is not ok, so images in flags16.png will not be rendered.

One way to solve this, you need to move your .css file which contains references to images to the location where bundle is pointing (~/Content in this case), so it will have same path when it is served minified and raw.

UPDATE As your app is not mvc4, and you have problems when your app is not in the root of your web site (i.e. when it is in localhost/myapp) then you need to check paths in references to your pictures. It is possible that you referenced them absolutely ('/somepath/mypic.png'), and when your app is in localhost/MyApp, path needs to be localhost/MyApp/somepath/mypic.png. You can solve that by replacing path with @Url.Content(~/somepath/mypic.png), if you are using it from cshtml. If path is in css, then you need to put relative path to your pictures.

Answer 3

I have just been battling with the same problem - images, scripts and css not being found or rendered. (Visual Studio 2013, Windows 8.1. Project moved across from Visual Studio 2010.)

The problem was caused by a line in Web.config:

<mimeMap fileExtension=".mp4" mimeType="video/mp4" />

It seems that because the IIS Express application.host file already contained this mimeMap definition, IIS Express couldn't cope with it being defined again.

Removing this line from Web.config completely solved the problem.