Nested Masterpages and CSS files

Question

Hello,

I have two masterpages. A main.Master and a search.Master.

The search.Master is a nested masterpage, which is "inside" the main.Master. To get my CSS files work with masterpages, I had to place the runat="server" atribute. Like this:

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

And is working wonderfull in the masterpage. However, this nested masterpage has her own styles, so I tried to do the runat="server" trick again. I made sure that my asp:content was inside the and typed:

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

However, when I checked the source code of my website, the path shown there was:

~/mp/css/master.search.css

Insetead of the

../../mp/css/master.search.css

Anyone know why this is happening? And how to solve this?

PS: I do not want to use the <%= ResolveClientUrl("bla bla bla") %>, because it is messing arround with the mastrepage/theme relationship. And I would prefer not to insert the CSS stylesheets in the header from the ServerSide code.

Answer 1

The reason it is happening is because the ASPX processor converts it to a GenericControl unless it is in the head region, then it converts it to a HtmlLink control.

For the generic controls it sets the href as an attribute. The HtmlLink has a Href property that is used and will resolve the url.

The only solutions I can think of off the top of my head are:

1. <%=ResolveUrl("blah")%> or <%=ResolveClientUrl("blah")%>

2. Create a custom control that renders the link and resolves the url using one of the above methods.

Answer 2

I see the issue you're having. The only workaround I could come up with was to create a System.Web.UI.HtmlControls.HtmlLink object in the code behind, set the Href property and the rel attribute (and any other attributes you want) and add it to the controls for the head ContentPlaceHolder.

Answer 3

If all your CSS declarations are inside of the head tag (either directly or through a ContentPlaceHolder control) then all you should have to do it specify your CSS links relative to the location of the master page. The URLs should get rebased automatically to the correct locations. You don't need the runat attribute, nor do you need to add ~. In my case this is the code I have in my master pages:

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