?
Solved

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

Posted on 2008-06-09
16
Medium Priority
?
1,697 Views
Last Modified: 2011-10-19
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
0
Comment
Question by:allanmark
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 8
  • 5
  • 3
16 Comments
 
LVL 18

Assisted Solution

by:ChetOS82
ChetOS82 earned 300 total points
ID: 21745841
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
 

Author Comment

by:allanmark
ID: 21745987
Did this:        <img id="headerPic" src = "/Graphics/Book02.jpg" />  -- result = no image on default page.
0
 
LVL 33

Accepted Solution

by:
raterus earned 700 total points
ID: 21746064
Try this,

    <link rel="stylesheet" type="text/css"
    href='<%= ResolveUrl("~/CSS_Sheets/Scribble.css") %>' />
0
VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

 
LVL 18

Assisted Solution

by:ChetOS82
ChetOS82 earned 300 total points
ID: 21746072
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
 

Author Comment

by:allanmark
ID: 21746207
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
 

Author Comment

by:allanmark
ID: 21746219
Ooops ... finger trouble! See attached menu dump.
Menu.jpg
0
 
LVL 18

Expert Comment

by:ChetOS82
ID: 21746236
Not really sure about this.  Perhaps check the css for relative urls.
0
 
LVL 33

Expert Comment

by:raterus
ID: 21746255
When you tried my suggestion, can you post the HTML output the browser sees?
0
 

Author Comment

by:allanmark
ID: 21746447
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
 

Author Comment

by:allanmark
ID: 21746495
Sorry  ... SNippet 2 - wroiong posting  - the "../" were all changed to "/".
0
 
LVL 33

Expert Comment

by:raterus
ID: 21746536
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
 

Author Comment

by:allanmark
ID: 21746758
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
 
LVL 33

Expert Comment

by:raterus
ID: 21746815
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
 

Author Comment

by:allanmark
ID: 21746927
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
 
LVL 33

Assisted Solution

by:raterus
raterus earned 700 total points
ID: 21750563
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
 

Author Closing Comment

by:allanmark
ID: 31465519
Many thanks!!!
0

Featured Post

Free Tool: Site Down Detector

Helpful to verify reports of your own downtime, or to double check a downed website you are trying to access.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

When applying CSS to your HTML, there are many different ways to select which element(s) the CSS applies to.  Some of these selectors are more commonly known and used than others - Here are the more common ones: #X - Matches an ID of X .X - Matche…
Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
In this tutorial viewers will learn how to position items using CSS's three positioning types Create a new HTML document with an internal stylesheet.: Create another div in CSS and name it Absolute : Type "position:absolute;" and "top:10px; left:50p…
In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …
Suggested Courses

718 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question