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?

Goran Obradovic · Accepted Answer · 2013-01-21T09:40:01.320

5

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.

edited Jan 21 '13 at 09:40

answered Jan 20 '13 at 23:00

Goran Obradovic

8,951
9
50
79

2

That doesn't look right at all. Also, the background image in your example would go to `~/Content/flags/stylesheets/flags/images/flags16.png` I can use your example (with the image in the right place) and it works fine, so I don't think it is his problem. Seems like if it was, the whole concept of bundling in debug mode would be broken. – MikeSmithDev Jan 21 '13 at 00:22
Then, the whole bundling concept IS broken :) What is not clear to you? You have bundled css file in '~/Content' and relative path to flag. If file is not bundled, the background image is going to point to location you are telling, but not in release. If you don't know how the bundling works, you can freely checkout this application https://github.com/goranobradovic/WorkOrders from where this sample was taken and test it in debug and release mode. Bundle is great to "bundle" css files in a single folder, then there are no problems like this. – Goran Obradovic Jan 21 '13 at 06:26
Here, same app, release: http://kombajn.goranobradovic.com/asm and debug: http://kombajn.goranobradovic.com/WorkOrders.Web/ – Goran Obradovic Jan 21 '13 at 06:27
No, the application is actually MVC3, with no bundling. It just has a bunch of regular links... – user1929393 Jan 21 '13 at 09:27
Then this is not solution for your problem, but your question was tagged with mvc4. Can you provide public link to your application? I'm expanding answer to include one more possible cause of problem. – Goran Obradovic Jan 21 '13 at 09:36
Since, the application is loading as HTTPS, I went to project properties>web tab> and added http://localhost/myproject to the Use Local Web Server area, and added a local certificate to use to port 433 for HTTPS for IIS. It created the virtual directory, and the site loads, but no CSS rendering properly. The path for this is Https://localhost/myproject. However, when I create a separate website as Https://localhost:444, everything comes up. When I check the source files for Https://localhost/myproject, I see href="/myproject/Content/Style/Home/guest_styles.css". – user1929393 Jan 21 '13 at 09:37
Can you see with firebug/fiddler/chrome web developer tools if your css is loaded? Select element where picture needs to be, and then see the path to picture in the right, you can right click path to pic and select "open in new tab", then post exact address where is trying to get a picture. – Goran Obradovic Jan 21 '13 at 09:41
FireBug Element:
LOGIN
CSS Output: element.style { height: 30px; padding-top: 4px; text-align: center; } .search-content-submit { background: url("/Content/Images/guest_button_sprite_short.png") no-repeat scroll 0 -2px transparent; border: 0 none; color: #FFFFFF; cursor: pointer; font-size: 15px; height: 34px; text-transform: uppercase; width: 123px; } – user1929393 Jan 21 '13 at 09:56
so the problem is in this: .search-content-submit { background: url("/Content/Images/guest_button_sprite_short.png") Check if this is defined in css file or in some cshtml. If it is in cshtml, use @Url.Content and add ~ to the beginning, else, if it is in css, change it to relative (if css is in style/home/default.css, then you need to put ../../../Images/guest_button_sprite_short.png, change your css then check if you need to change number of '../' – Goran Obradovic Jan 21 '13 at 10:07
Additional Data Firebug (Computed Tab) Failed to load: background-image url("{https://localhost/...tton_sprite_short.png}") .search-content-submit url("Content/Images/gue...tton_sprite_short.png") guest_styles.css (line 354) – user1929393 Jan 21 '13 at 10:08
This works: url('../../../Content/Images/guest_button_sprite_short.png')... Is there a better way to set it up in visual studio, so I do not have to change all the links. If I change all the links, won't I have to change it back once I put it on the production server? – user1929393 Jan 21 '13 at 10:29
Why does both of this work on the server? 1) background: url('../../../Content/Images/guest_button_sprite_short.png') 2)background: url('/Content/Images/guest_button_sprite_short.png') ...but, only background: url('../../../Content/Images/guest_button_sprite_short.png') works on visual studio debug preview? It seems the server is able to find the image without problems, but not visual studio? – user1929393 Jan 21 '13 at 10:48
No, '/' means "root", like www.google.com, or www.microsoft.com, and if you put your app under i.e. www.google.com/mail, you will break paths to images because the css looks for them from /. That is why the relative way should always be used. You could move your .css file to Content folder, and then just use url('Images/guest_button_sprite_short.png'), without need to go up through folders. – Goran Obradovic Jan 21 '13 at 14:03

score 5 · Answer 2 · answered Jul 31 '15 at 15:42

5

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.

answered Jul 31 '15 at 15:42

user3717478

863
1
8
15

This was the same issue for me however the mime was for JSON. – David Hirst Feb 02 '17 at 13:07
You sir are a genius. – MindLoggedOut Oct 31 '18 at 18:57

score 1 · Answer 3 · answered Jan 21 '13 at 09:49

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.

score 0 · Answer 4 · answered Dec 04 '15 at 16:08

When I had this problem I found that all of my CSS and Script files were encountering a HTTP 500 error when they were being downloaded in the browser (Firefox 33.0.2).

Killing the instance of my browser in the Task Manager and then starting afresh fixed the issue for me.

MVC CSS not rendering in Visual Studio When debugging

4 Answers4

Linked