CSS and images on Master Page

Question

I have this quite popular problem, but have failed to find a solution that works.

Basicly, I am using a Master Page (/Masterpages/Default.master), that includes

<link href="../css/style.css" rel="stylesheet" type="text/css />

And it also includes some images with the same relative linking.

But when I apply the Master Page to content pages (in diffrent folderlevels) the css formating and images is lost.

Is there anyway to dynamicaly solve the folderlevel links to css and images to all content pages using the masterpage?

Thanks in advance

UPDATE:

There is an additional problem. It's tricky to get the output to render correctly in both the browser and in design view in Visual Studio.

I got it to work by using the asp:image solution for the images in the masterpage and by double linking the css in the masterpage, one to make it render in VS and one to make it render correctly browsing the site.

<link href="../css/style.css" rel="stylesheet" type="text/css" />
<link href="<%=ResolveUrl("~/css/style.css")%>" rel="stylesheet" type="text/css" />

Gear

Answer 1

best to use:

<link href="<%=ResolveUrl("~/css/style.css") %>" rel="stylesheet" type="text/css />

since this will cope with iis application roots unlike:

<link href="/css/style.css" rel="stylesheet" type="text/css />

Disafforest

Not if you use asp:Image component, but yes if you use <img /> html tags and specify the src attribute. – Disafforest

Answer 2

You can make your link runat="server" and use tilde mapping to make the CSS path relative to the site root.

<link runat="server" id="siteStyle"
      href="~/css/style.css"
      rel="stylesheet"
      type="text/css" />

The images referenced in the CSS should be relative to the location of the CSS file and should resolve normally once the CSS file itself is included properly. For images in tags on the page, you would need to use the ASP:Image control and, again, use the tilde mapping for a path relative to the root.

Pyelonephritis

Answer 3

Fairly sure this will work

<link href="/css/style.css" rel="stylesheet" type="text/css />

/ takes you to the root of your site

Writein

That works until you publish your app in a subfolder of the web site. – Pyelonephritis

Answer 4

You can use the tilde to get the link to work from anywhere. This will work in Images as well.

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

Thomasenathomasin

Answer 5

Images in CSS are relative to the file they are referenced from.

(An exception from this is the "filter" rule in Internet Explorer which is used for PNG fixes. The images in this case are relative to the HTML document.)

Superscribe

Answer 6

Yes, the problem is that the materpage is using a relative url to load the CSS:

"../css/style.css"

you need to change this to the site root (depending on the location of your css files) something like:

"/css/style.css"

than all the various folder levels can use the same url.

Discourage

Answer 7

Actually, master pages will rebase css files for you automatically, without you having to add runat="server". Be sure that your css file is located one directory down in the folder you specified.

You can use an absolute path to the css file, but visual studio doesn't seem to render the styles in design view when you do this. Also, sometime you won't know if you're going to be running in a virtual directory, so it's not always ideal to use the absolute path.

Also, use relative links to your image assests from the css file itself - which will work irrespective of how you link to your stylesheet.

Griffey

Answer 8

You might also be interested in looking into themes and skins.

ASP.NET Themes and Skins Overview

Religieuse