Go Premium for a chance to win a PS4. Enter to Win

x
?
Solved

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

Posted on 2008-06-09
16
Medium Priority
?
1,720 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
  • 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
Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
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

How to Use the Help Bell

Need to boost the visibility of your question for solutions? Use the Experts Exchange Help Bell to confirm priority levels and contact subject-matter experts for question attention.  Check out this how-to article for more information.

Question has a verified solution.

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

It was really hard time for me to get the understanding of Delegates in C#. I went through many websites and articles but I found them very clumsy. After going through those sites, I noted down the points in a easy way so here I am sharing that unde…
The article shows the basic steps of integrating an HTML theme template into an ASP.NET MVC project
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 …
In this tutorial viewers will learn how to embed custom externally-hosted Google Fonts using the Google Font API in CSS Go to the Google Fonts website at google.com/fonts: Browse or search based on font properties or name to find a suitable font for…
Suggested Courses

916 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