Solved

master page doesn't regonize background in css

Posted on 2012-04-13
11
302 Views
Last Modified: 2012-04-13
why doesn't my master page see this style sheet. this style sheet is declared in app_themse folder. if i just hard code the line below in master page, it will work fine but as soon as i put that line of code in css file, it stop working. please help

body {font-family:Arial; font-size:14px;background:url(images/navigations/test.png);}
0
Comment
Question by:StewSupport
[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
  • 6
  • 4
11 Comments
 
LVL 14

Expert Comment

by:nishant joshi
ID: 37844387
might your font will be good but you are facing with an issue with image,an i right?
0
 

Author Comment

by:StewSupport
ID: 37844392
yes. the image just doesn't work.
0
 
LVL 38

Expert Comment

by:PaulHews
ID: 37844409
In your CSS file, the images folder must be figured relative to the app_themes folder, rather than where whatever page you are on resides.  
Try this:
body {
    font-family:Arial; font-size:14px;background:url('../images/navigations/test.png');
}

Open in new window


The .. brings you one level up, where hopefully you will find the images folder.  If not, then you have to figure where the path is relative to the folder that the CSS file lives.
0
PeopleSoft Has Never Been Easier

PeopleSoft Adoption Made Smooth & Simple!

On-The-Job Training Is made Intuitive & Easy With WalkMe's On-Screen Guidance Tool.  Claim Your Free WalkMe Account Now

 

Author Comment

by:StewSupport
ID: 37844421
well the master is at the root then i have
mastert
images folder
......navi folder
.............image files


i added the ../ still doesn't work.
0
 

Author Comment

by:StewSupport
ID: 37844516
code below will work fine if its just html file. but when copy and paste css to css file in apptheme folder in asp.net it stop working. ofcourse the path of the image is changed to correspond with the path of the asp.net web app

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
    <style type="text/css">
    .links {
    font-family:Verdana, Arial, Helvetica, sans-serif;
	display:block;
    background:url(test.png) center top no-repeat;
    height:98px;
    width:176px; 
    text-align:center;
    font-size:10pt;
    text-decoration:none;
    }
    .links:hover {
    background:url(test2.png) center top no-repeat;
    }
    </style>
</head>

<body>
<a href="#" class="links"></a>
</body>
</html>

Open in new window

0
 

Author Comment

by:StewSupport
ID: 37844604
ok i pasted in http://localhost/images/test.png and it works fine so what would be the correct path for the image. i tried ../images/test.jpg and /images/test.jpg and images/test.jpg  and it just doesn't work
0
 
LVL 38

Expert Comment

by:PaulHews
ID: 37844625
StewSupport,
well the master is at the root then i have
mastert
images folder
......navi folder
.............image files


i added the ../ still doesn't work.

Where exactly is the CSS file located?
0
 

Author Comment

by:StewSupport
ID: 37844633
mastert
images folder
......navi folder
.............image files
app_themes
......nav
.............nav.css
0
 
LVL 38

Expert Comment

by:PaulHews
ID: 37844650
So you see from nav.css you have to go up two levels to get to the root...  So use:

body {
    font-family:Arial; font-size:14px;background:url('../../images/navigations/test.png');
}
0
 

Author Comment

by:StewSupport
ID: 37844655
really wow? wouldn't the ../ does the trick? or ~/ tells it to go to root?
0
 
LVL 38

Accepted Solution

by:
PaulHews earned 500 total points
ID: 37844677
See:
Absolute and Relative Paths
http://brugbart.com/Articles/paths

wouldn't the ../ does the trick? or ~/ tells it to go to root?

You can't use tilde (~) which is mapped using page behind code.  CSS does not recognize or run this code.  

You can specify a root with a preceding /  

background:url('/images/navigations/test.png');

Open in new window


 ... But it might not be a good idea to if you ever plan to run the code in a virtual directory, so you would be limiting how you can deploy the application.  The relative path mentioned is probably the safest and most portable option.
0

Featured Post

Free Tool: ZipGrep

ZipGrep is a utility that can list and search zip (.war, .ear, .jar, etc) archives for text patterns, without the need to extract the archive's contents.

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

In .NET 2.0, Microsoft introduced the Web Site.  This was the default way to create a web Project in Visual Studio 2005.  In Visual Studio 2008, the Web Application has been restored as the default web Project in Visual Studio/.NET 3.x The Web Si…
Calculating holidays and working days is a function that is often needed yet it is not one found within the Framework. This article presents one approach to building a working-day calculator for use in .NET.
Nobody understands Phishing better than an anti-spam company. That’s why we are providing Phishing Awareness Training to our customers. According to a report by Verizon, only 3% of targeted users report malicious emails to management. With compan…

751 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