relative path in stylesheets within 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 of the area views are using a root shared _Layout view which is referencing a css file under the root content directory. The css file under the content folder is referencing images or other content with the same directory like 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 of this works fine when i access 'http://MyProject/controller/action', but when i go into an area 'http://root/area/controller/action' my css file is not able to find the path '../Content/PIE.htc'.

I don't know how to go about fixing this so i was wondering if anyone knew of a way to fix this.

Thanks!

Answer 1

If all the views in all the areas are using root shared _Layout (~/Views/Shared/_Layout.cshtml), make sure that _Layout.cshtml calls css file like 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 on this: css3pie in MVC, where to place the pie.htc file? and where do I put the PIE.htc file (for making IE work with CSS3) when I'm using cakephp, and the PIE site has a discussion about it too:

IE interprets the URL for the behavior property relative to the source HTML document, rather than relative to the CSS file like every other CSS property. This makes invoking the PIE behavior inconvenient, because the URL has to either be:

Absolute from the domain root — this makes the CSS not easily moveable between directories

Relative to the HTML document — this makes the CSS not easily reusable between different HTML files.

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