MasterPage images not picked up by subfolder pages in ASP.Net application

Greetings all

I have a master page (in root directory) that references a CSS file, in a subfolder, and an image (also in a subfolder), and is called by pages in various subfolders (see attached file for folder structure).

As my source (attached snippet) stands, the default page displays the image correctly, but all others display a blank.

Any thoughts?
SNIPPET 1:  MASTER SOURCE
 
<%@ Master Language="C#" AutoEventWireup="true" CodeFile="Scribble_Master_01.master.cs" Inherits="Scribble_Master_01" %>
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 
<html xmlns="http://www.w3.org/1999/xhtml" >
<head id="Head1" runat="server">
    <title>Scribbler Master 01</title>
    
    <link rel="stylesheet" type="text/css" 
    href="CSS_Sheets/Scribble.css" />
    
</head>
 
<body id="MasterBody" runat="server">
 
<form id="form1" runat="server" style="height: 100%;">
     
<div id="container">
<!-- Container div - everything must be inside here. -->
 
	<div id="header">
		<!-- Header start -->
			 <h1>Scribblers</h1>
			 <img id="headerPic" src = "Graphics/Book02.jpg" />
          <center>
             <ul id='menu'>            
                <li ><a href='<%=ResolveUrl("Default.aspx")%>' id='menuHome' >Home</a></li>
                <li ><a href='<%=ResolveUrl("~/Pages_Story_Script/Stories.aspx")%>' id='menuStories' >Stories</a></li>
                <li ><a href='<%=ResolveUrl("~/Pages_Story_Script/Scripts.aspx")%>' id='menuScripts' >Scripts</a></li>
                <li ><a href='<%=ResolveUrl("~/Pages_Competition/Competitions.aspx")%>' id='menuCompetitions'  >Competitions</a></li>
                <li ><a href='<%=ResolveUrl("~/Pages_Member/Members.aspx")%>' id='menuMembers' >Members</a></li>
                <li ><a href='<%=ResolveUrl("~/Pages_General/Contact.aspx")%>' id='menuContacts' >Contact</a></li>
                <li ><a href='<%=ResolveUrl("~/Pages_General/Links.aspx")%>' id='menuLinks' >Links</a></li>       
                                      
             </ul>
          </center>
          
	<!-- Header end -->
	</div>
	<div id="body">
    <!-- Body start -->
	    <div id="dummy" style="position:relative; height: 135px"></div>
		
		
		<asp:contentplaceholder id="ContentPlaceHolder1" runat="server">
        </asp:contentplaceholder>
 
        
        <!-- Give a little space -->
        <div style="height:10px"></div>
        
    <!-- Body end -->
	</div>
	
	<div id="footer">
		<!-- Footer start -->
		  <hr align="center" color="Black" width="75%" />
          <label class="smallerFontSize">Copyright Scribblers @ 2008</label>                          
 
		<!-- Footer end -->
	</div>
 
<!-- End of Container div. -->	
</div>    
   
</form>
 
</body>
</html>

Open in new window

FolderStruct.jpg
allanmarkAsked:
Who is Participating?
 
raterusCommented:
Try this,

    <link rel="stylesheet" type="text/css"
    href='<%= ResolveUrl("~/CSS_Sheets/Scribble.css") %>' />
0
 
ChetOS82Commented:
Since it is the web browser that resolves the image location, not the master page on the server, those images are being resolved from the sub folder.  The easiest way to fix this is to make the images relative to the root always (by putting a forward slash in front of the path).
0
 
allanmarkAuthor Commented:
Did this:        <img id="headerPic" src = "/Graphics/Book02.jpg" />  -- result = no image on default page.
0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

 
ChetOS82Commented:
Ok, I bet when you debug through VS the URL of the page is not http://localhost:1234/default.aspx, but rather http://localhost:1234/Scribbles/default.aspx.  If you were to go to the site outside VS, it would work.  You need to tell VS not to build your site in a subdirectory.  To do this, simply click on your website project in the Solution Explorer, "D:\\...\Scribbles\" in your image above.  Then press F4.  You should see a "Virtual Directory" option, just set it to a forward slash.
0
 
allanmarkAuthor Commented:
raterus  -- tried it  -- seemed to loose all the background and image formatting.

ChetOS82: --  Changed (see attached VPath). Image now appears, but menu is split over 2 lines (see attached Menu).
VPath.jpg
0
 
allanmarkAuthor Commented:
Ooops ... finger trouble! See attached menu dump.
Menu.jpg
0
 
ChetOS82Commented:
Not really sure about this.  Perhaps check the css for relative urls.
0
 
raterusCommented:
When you tried my suggestion, can you post the HTML output the browser sees?
0
 
allanmarkAuthor Commented:
raterus  -- please snippet1

ChetOS82:  Checkjed it out (attached SNippet 2) -- couldn't see anything odd (that is, nothing jumped out as obviously wrong - at least, to me)
SNIPPET 1:
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 
<html xmlns="http://www.w3.org/1999/xhtml" >
<head id="ctl00_Head1"><title>
	Scribblers Home Page
</title><link rel="stylesheet" type="text/css" href="&lt;%= ResolveUrl(&quot;~/CSS_Sheets/Scribble.css&quot;) %>" /></head>
 
<body id="ctl00_MasterBody" class="home">
 
<form name="aspnetForm" method="post" action="Default.aspx" id="aspnetForm" style="height: 100%;">
<div>
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwULLTEwMDUyNjYzMjgPZBYCZg9kFgICAw8WAh4FY2xhc3MFBGhvbWVkZI0TAl0iTWsqC24ml3kDIXvtON2k" />
</div>
 
     
<div id="container">
 
<!-- Container div - everything must be inside here. -->
 
	<div id="header">
		<!-- Header start -->
			 <h1>Scribblers</h1>
			 <img id="headerPic" src = "/Graphics/Book02.jpg" />
          <center>
             <ul id='menu'>            
                <li ><a href='/Default.aspx' id='menuHome' >Home</a></li>
 
                <li ><a href='/Pages_Story_Script/Stories.aspx' id='menuStories' >Stories</a></li>
                <li ><a href='/Pages_Story_Script/Scripts.aspx' id='menuScripts' >Scripts</a></li>
                <li ><a href='/Pages_Competition/Competitions.aspx' id='menuCompetitions'  >Competitions</a></li>
                <li ><a href='/Pages_Member/Members.aspx' id='menuMembers' >Members</a></li>
                <li ><a href='/Pages_General/Contact.aspx' id='menuContacts' >Contact</a></li>
                <li ><a href='/Pages_General/Links.aspx' id='menuLinks' >Links</a></li>       
                                      
             </ul>
 
          </center>
          
	<!-- Header end -->
	</div>
	<div id="body">
    <!-- Body start -->
	    <div id="dummy" style="position:relative; height: 135px"></div>
		
		
		
    
 
 
        
        <!-- Give a little space -->
        <div style="height:10px"></div>
        
    <!-- Body end -->
 
	</div>
	
	<div id="footer">
		<!-- Footer start -->
		  <hr align="center" color="Black" width="75%" />
          <label class="smallerFontSize">Copyright Scribblers @ 2008</label>                          
 
		<!-- Footer end -->
	</div>
 
<!-- End of Container div. -->	
</div>    
   
 
</form>
 
</body>
</html>
 
 
 
SNIPPET 2:
 
html
{
margin:0;
padding:0;
height:100%;
}
 
body
{    
margin:0;
padding :0;
height:100%;
background: url(../Graphics/paper.gif); 
font: Verdana, "Minion Web", Helvetica, sans-serif;     
}
 
.home
{
}
 
.stories
{
}
 
.scriptss
{
}
 
.competitions
{
}
 
.memberss
{
}
 
.contacts
{
}
 
.linkss
{
}
 
#container 
{
min-height:100%;
position:relative;
}
 
#header
{        
    padding: 0px;
    width:100%;
    height:125px;    
    background-image: url(../Graphics/blspeck.jpg);
    left: 0px;
    top: 0px;
    position:fixed;        
    color:White;
    text-align:center;
    z-index:9;
}
 
#header h1
{
	margin:0;
	padding:5px 0 0 10px;
}
 
 
#MasterBody {
padding:5px;
padding-bottom:35px;
}
 
#default 
{width: 60%; margin-left:auto; margin-right:auto; position: relative;
 padding:4px; border: 2px solid black; 
}
 
#footer {
position:absolute;
bottom:0;
width:100%;
height:35px;			/* Height of the footer */
}
 
.smallerFontSize
{
   font-size: smaller;  
}
 
.labels
{font: smallerFontSize;
 position: absolute;
}
 
.TextBoxes
{
    font: smallerFontSize;
    background-color: LightGrey;
}
 
#headerPic 
{
position: absolute; top: 28px; left: 900px;
height: 75px;
width: 95px;
border-width: 5px;    
} 
 
#content1 
{width: 60%; margin-left:auto; margin-right:auto; position:relative; top: 200px;
 border:2px solid black; padding:10px; 
}
 
ul#menu { top: -30px; width: 40%; height: 38px; background: #FFF url(../Graphics/menu-bg.gif) top left repeat-x; font-size: 0.8em; font-family: "Lucida Grande", Verdana, sans-serif; font-weight: bold; list-style-type: none; margin: 0; padding: 0;}
ul#menu li { display: block; float: left; margin: 0 0 0 5px; }
ul#menu li a { height: 38px; color: black; text-decoration: none; display: block; float: left; line-height: 200%; padding: 8px 15px 0; }
ul#menu li a:hover { color: red; background-color:Silver }
ul#menu li a.current{ color: Black; background: gray url(../Graphics/current-bg.gif) top left repeat-x; padding: 5px 15px 0; }
 
body.home a#menuHome,
body.stories a#menuStories,
body.scriptss a#menuScripts,
body.competitions a#menuCompetitions,
body.memberss a#menuMembers,
body.contacts a#menuContacts,
body.linkss a#menuLinks             
{
color: #fff;
background: #930;
}
 
 
SNIPPET 2
 
html
{
margin:0;
padding:0;
height:100%;
}
 
body
{    
margin:0;
padding :0;
height:100%;
background: url(Graphics/paper.gif); 
font: Verdana, "Minion Web", Helvetica, sans-serif;     
}
 
.home
{
}
 
.stories
{
}
 
.scriptss
{
}
 
.competitions
{
}
 
.memberss
{
}
 
.contacts
{
}
 
.linkss
{
}
 
#container 
{
min-height:100%;
position:relative;
}
 
#header
{        
    padding: 0px;
    width:100%;
    height:125px;    
    background-image: url(Graphics/blspeck.jpg);
    left: 0px;
    top: 0px;
    position:fixed;        
    color:White;
    text-align:center;
    z-index:9;
}
 
#header h1
{
	margin:0;
	padding:5px 0 0 10px;
}
 
 
#MasterBody {
padding:5px;
padding-bottom:35px;
}
 
#default 
{width: 60%; margin-left:auto; margin-right:auto; position: relative;
 padding:4px; border: 2px solid black; 
}
 
#footer {
position:absolute;
bottom:0;
width:100%;
height:35px;			/* Height of the footer */
}
 
.smallerFontSize
{
   font-size: smaller;  
}
 
.labels
{font: smallerFontSize;
 position: absolute;
}
 
.TextBoxes
{
    font: smallerFontSize;
    background-color: LightGrey;
}
 
#headerPic 
{
position: absolute; top: 28px; left: 900px;
height: 75px;
width: 95px;
border-width: 5px;    
} 
 
#content1 
{width: 60%; margin-left:auto; margin-right:auto; position:relative; top: 200px;
 border:2px solid black; padding:10px; 
}
 
ul#menu { top: -30px; width: 75%; height: 38px; background: #FFF url(Graphics/menu-bg.gif) top left repeat-x; font-size: 0.8em; font-family: "Lucida Grande", Verdana, sans-serif; font-weight: bold; list-style-type: none; margin: 0; padding: 0;}
ul#menu li { display: block; float: left; margin: 0 0 0 5px; }
ul#menu li a { height: 38px; color: black; text-decoration: none; display: block; float: left; line-height: 200%; padding: 8px 15px 0; }
ul#menu li a:hover { color: red; background-color:Silver }
ul#menu li a.current{ color: Black; background: gray url(Graphics/current-bg.gif) top left repeat-x; padding: 5px 15px 0; }
 
body.home a#menuHome,
body.stories a#menuStories,
body.scriptss a#menuScripts,
body.competitions a#menuCompetitions,
body.memberss a#menuMembers,
body.contacts a#menuContacts,
body.linkss a#menuLinks             
{
color: #fff;
background: #930;
}

Open in new window

0
 
allanmarkAuthor Commented:
Sorry  ... SNippet 2 - wroiong posting  - the "../" were all changed to "/".
0
 
raterusCommented:
allanmark,

can you post the code you used in your aspx page?,

In my sample I used a single-quote after the href= but you have a double quote here.  You need a single quote.

it should look like this

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

Believe me, if you can get this working it will work, because I use it all the time.
0
 
allanmarkAuthor Commented:
Source attached. At the moment I am running with Virtual Dir set to "/" - changed from "/Scribble".


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 
<html xmlns="http://www.w3.org/1999/xhtml" >
<head id="ctl00_Head1"><title>
	Scribblers Home Page
</title><link rel="stylesheet" type="text/css" href="CSS_Sheets/Scribble.css" /></head>
 
<body id="ctl00_MasterBody" class="home">
 
<form name="aspnetForm" method="post" action="Default.aspx" id="aspnetForm" style="height: 100%;">
<div>
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwULLTEwMDUyNjYzMjgPZBYCZg9kFgICAw8WAh4FY2xhc3MFBGhvbWVkZI0TAl0iTWsqC24ml3kDIXvtON2k" />
</div>
 
     
<div id="container">
 
<!-- Container div - everything must be inside here. -->
 
	<div id="header">
		<!-- Header start -->
			 <h1>Scribblers</h1>
			 <img id="headerPic" src = "/Graphics/Book02.jpg" />
          <center>
             <ul id='menu'>            
                <li ><a href='/Default.aspx' id='menuHome' >Home</a></li>
 
                <li ><a href='/Pages_Story_Script/Stories.aspx' id='menuStories' >Stories</a></li>
                <li ><a href='/Pages_Story_Script/Scripts.aspx' id='menuScripts' >Scripts</a></li>
                <li ><a href='/Pages_Competition/Competitions.aspx' id='menuCompetitions'  >Competitions</a></li>
                <li ><a href='/Pages_Member/Members.aspx' id='menuMembers' >Members</a></li>
                <li ><a href='/Pages_General/Contact.aspx' id='menuContacts' >Contact</a></li>
                <li ><a href='/Pages_General/Links.aspx' id='menuLinks' >Links</a></li>       
                                      
             </ul>
 
          </center>
          
	<!-- Header end -->
	</div>
	<div id="body">
    <!-- Body start -->
	    <div id="dummy" style="position:relative; height: 135px"></div>
		
		
		
    
 
 
        
        <!-- Give a little space -->
        <div style="height:10px"></div>
        
    <!-- Body end -->
 
	</div>
	
	<div id="footer">
		<!-- Footer start -->
		  <hr align="center" color="Black" width="75%" />
          <label class="smallerFontSize">Copyright Scribblers @ 2008</label>                          
 
		<!-- Footer end -->
	</div>
 
<!-- End of Container div. -->	
</div>    
   
 
</form>
 
</body>
</html>

Open in new window

0
 
raterusCommented:
Why did you change the Virtual Dir?.  No matter, my suggestion should still work, have you tried it?  It should not render like the "view source" sample you sent me, so I really wanted to see your code of what you tried.
0
 
allanmarkAuthor Commented:
Attached MPage source - hoep this siw aht you're looking for - I'm getting myself knotted. With the code like this, it appears not to be picking up the CSS file - no formatting.
SNIPPET 1:
 
<%@ Master Language="C#" AutoEventWireup="true" CodeFile="Scribble_Master_01.master.cs" Inherits="Scribble_Master_01" %>
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 
<html xmlns="http://www.w3.org/1999/xhtml" >
<head id="Head1" runat="server">
    <title>Scribbler Master 01</title>
       
     <link rel="stylesheet" type="text/css"
    href='<%= ResolveUrl("~/CSS_Sheets/Scribble.css") %>' />
 
    
</head>
 
<body id="MasterBody" runat="server">
 
<form id="form1" runat="server" style="height: 100%;">
     
<div id="container">
<!-- Container div - everything must be inside here. -->
 
	<div id="header">
		<!-- Header start -->
			 <h1>Scribblers</h1>
			 <img id="headerPic" src = "Graphics/Book02.jpg" />
          <center>
             <ul id='menu'>            
                <li ><a href='<%=ResolveUrl("Default.aspx")%>' id='menuHome' >Home</a></li>
                <li ><a href='<%=ResolveUrl("~/Pages_Story_Script/Stories.aspx")%>' id='menuStories' >Stories</a></li>
                <li ><a href='<%=ResolveUrl("~/Pages_Story_Script/Scripts.aspx")%>' id='menuScripts' >Scripts</a></li>
                <li ><a href='<%=ResolveUrl("~/Pages_Competition/Competitions.aspx")%>' id='menuCompetitions'  >Competitions</a></li>
                <li ><a href='<%=ResolveUrl("~/Pages_Member/Members.aspx")%>' id='menuMembers' >Members</a></li>
                <li ><a href='<%=ResolveUrl("~/Pages_General/Contact.aspx")%>' id='menuContacts' >Contact</a></li>
                <li ><a href='<%=ResolveUrl("~/Pages_General/Links.aspx")%>' id='menuLinks' >Links</a></li>       
                                      
             </ul>
          </center>
          
	<!-- Header end -->
	</div>
	<div id="body">
    <!-- Body start -->
	    <div id="dummy" style="position:relative; height: 135px"></div>
		
		
		<asp:contentplaceholder id="ContentPlaceHolder1" runat="server">
        </asp:contentplaceholder>
 
        
        <!-- Give a little space -->
        <div style="height:10px"></div>
        
    <!-- Body end -->
	</div>
	
	<div id="footer">
		<!-- Footer start -->
		  <hr align="center" color="Black" width="75%" />
          <label class="smallerFontSize">Copyright Scribblers @ 2008</label>                          
 
		<!-- Footer end -->
	</div>
 
<!-- End of Container div. -->	
</div>    
   
</form>
 
</body>
</html>

Open in new window

0
 
raterusCommented:
Well if you just want to get it working, remove what you currently have in the <head> tag and add this to Page_Load of the MasterPage

        Me.Header.Controls.Add(New LiteralControl("<link rel='stylesheet' type='text/css' href='" & ResolveUrl("~/CSS_Sheets/Scribble.css") & "' />"))
0
 
allanmarkAuthor Commented:
Many thanks!!!
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.