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!

`.htc`? Wasn't that some IE specific crap that had a bug in it and instead of relative to the current location of the CSS path it used relative to the current url? — Darin Dimitrov, Oct 04 '11 at 20:25
Did you try it without "../". If your css-File is in the Content-Folder you should not use "../". — Tobias, Oct 05 '11 at 06:58

score 2 · Answer 1 · answered Oct 05 '11 at 13:36

2

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.

answered Oct 05 '11 at 13:36

Tohid

6,175
7
51
80

it's the file path being referenced within the css that's the problem. I can get the path to the css file correctly. – zSynopsis Oct 05 '11 at 16:00

score 1 · Answer 2 · edited May 23 '17 at 12:30

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.

relative path in stylesheets within asp.net mvc areas

2 Answers2

Linked