Relative path in stylesheets in asp.net mvc areas

Question

I have a project with the current structure

My Project /Content /Controller /View /Model /Areas /Area1 /View /Controller /Model /Area2 /View /Controller /Model 

All region views use the _Layout root general view, which refers to a css file in the root of the content. The css file in the content folder refers to images or other content with the same directory as below:

 .box-shadow { -webkit-box-shadow: 0px 5px 80px #505050; -moz-box-shadow: 0px 5px 80px #505050; box-shadow: 0px 5px 80px #505050; behavior: url('../Content/PIE.htc'); } 

All this works fine when I go to "http: // MyProject / controller / action", but when I go to the area "http: // root / area / controller / action", my css file cannot find the path ". ./Content/PIE.htc ".

I don’t know how to fix it, so I was wondering if anyone knew about this in order to fix it.

Thanks!

Answer 1

If all views in all areas use root shared _Layout (~ / Views / Shared / _Layout.cshtml), make sure _Layout.cshtml calls the css file as the following code:

 <link href="@Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" /> 

I tested it with MVC 3 and it works.

Answer 2

There are two useful SO posts about this: css3pie in MVC, where to put the pie.htc file? and where I put the PIE.htc file (to create IE with CSS3) when I use cakephp and the PIE site has a discussion about this :

IE interprets the URL of the behavior property relative to the original HTML document, and not relative to the CSS file, like all other CSS properties. This causes inconvenience for PIE behavior, as the URL should be:

Absolute from the root of the domain - this makes CSS not easy to navigate between directories

Regarding an HTML document - this makes CSS not easy to reuse between different HTML files.

My best idea so far is to have one css directory where you put the PIE.htc file and use an absolute reference to it. Not great, but not scary.