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
Solved

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

Posted on 2008-06-09
16
1,654 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 75 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 175 total points
ID: 21746064
Try this,

    <link rel="stylesheet" type="text/css"
    href='<%= ResolveUrl("~/CSS_Sheets/Scribble.css") %>' />
0
Free Tool: Path Explorer

An intuitive utility to help find the CSS path to UI elements on a webpage. These paths are used frequently in a variety of front-end development and QA automation tasks.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

 
LVL 18

Assisted Solution

by:ChetOS82
ChetOS82 earned 75 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 175 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: Path Explorer

An intuitive utility to help find the CSS path to UI elements on a webpage. These paths are used frequently in a variety of front-end development and QA automation tasks.

One of a set of tools we're offering 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

This is a how to build your own CSS3 slideshow and when I say CSS3 I mean just CSS with no javascript in sight! There a few examples online of how to do this but most just show you an example without any explanation, others make it more complicat…
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 customize the background color and font color of highlighted text using the ::selection element in CSS Begin by defining the selected text as an element in CSS by typing "::selection": Style the ::selection…
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 …

856 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