This might be a beginner IIS question, but my application is having trouble loading a css file.

I made a test page named iisstart2.htm with three links to see where it would go to get references

<!-- language: lang-html -->
<link type='text/css' rel='stylesheet' href='~/site1.css' />
<link type='text/css' rel='stylesheet' href='/site2.css' />
<link type='text/css' rel='stylesheet' href='site3.css' />

I made two copies and put them here:

  • C:\inetpub\wwwroot
  • C:\inetpub\wwwroot\ParentLevel

In the Edit Site settings, I have the physical path set to C:\inetpub\wwwroot\ParentLevel

When I browse to the first one (http://localhost/iisstart2.htm), here’s where it looks for css files:

enter image description here

When I browse to the nested one (http://localhost/ParentLevel/iisstart2.htm), it looks here

enter image description here

When a link starts with /, then it's going all the way back to the root, but what I would have imagined it should have done is look for site2.css at http://localhost/ParentLevel/site2.css

Question

Where can I go to change the default root directory?

<s>The ~ is the one you want, the "application root operator". It can only be used in server controls, though. Simply adding runat="server" might work:</s>

<s><link runat="server" type='text/css' rel='stylesheet' href='~/site1.css' /></s>

Edit: Apparently the above does not work for link or script tags -- I don't know why. But you could use MapPath, which is equivalent:

<link type='text/css' rel='stylesheet' 
    href='<%= HttpContext.Current.Server.MapPath("~/site1.css") %>' />
<hr/>

Alternately, you could use a helper method, which has the advantage of allowing you to shift all references easily. Something like:

<link type='text/css' rel='stylesheet' href='<%= Application.GetCssPath("site1.css") %>' /> 

Where

public namespace GlobalUtil
{
    public class Application
    {
        public static string GetCssPath(string relPath)
        { 
            return System.Web.Configuration.ConfigurationManager.AppSettings["CssPath"] + relPath;
        }
    }
}

For this you'd also want the GlobalUtil namespace registered in web.config; along with the CssPath setting for no-recompile changes:

<appSettings>
  <add key="CssPath" value="/ParentLevel/" />
<appSettings>

<system.web>

    <pages>       <namespaces>         <add namespace="GlobalUtil"/>       </namespaces> </pages> </system.web>