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

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.