Solved

master page doesn't regonize background in css

Posted on 2012-04-13
11
304 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
Salesforce Made Easy to Use

On-screen guidance at the moment of need enables you & your employees to focus on the core, you can now boost your adoption rates swiftly and simply with one easy tool.

 

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

Independent Software Vendors: 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!

Question has a verified solution.

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

Parsing a CSV file is a task that we are confronted with regularly, and although there are a vast number of means to do this, as a newbie, the field can be confusing and the tools can seem complex. A simple solution to parsing a customized CSV fi…
If you need to start windows update installation remotely or as a scheduled task you will find this very helpful.
This tutorial will teach you the special effect of super speed similar to the fictional character Wally West aka "The Flash" After Shake : http://www.videocopilot.net/presets/after_shake/ All lightning effects with instructions : http://www.mediaf…
Sometimes it takes a new vantage point, apart from our everyday security practices, to truly see our Active Directory (AD) vulnerabilities. We get used to implementing the same techniques and checking the same areas for a breach. This pattern can re…

630 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