Want to win a PS4? Go Premium and enter to win our High-Tech Treats giveaway. Enter to Win

x
?
Solved

Why does my child page's style not override my master page's style?

Posted on 2015-01-20
5
Medium Priority
?
351 Views
Last Modified: 2015-01-22
I have a style page with the following style:

.loginDisplay
{
    background: url('../images/WebHeader960x150.jpg');
    background-repeat: no-repeat;
    background-attachment: scroll;
    background-position: repeat-x;
    width: 100%;
    height: 130px;
    margin: 0 0 0 0;
}

In my master page I have a div:

            <div class="loginDisplay"></div>

In a child page of said master page, I have the following:

    <style type="text/css">
        .page
        {
            width: 1150px;
            height: 100%;
        }        
        .header
        {
            background: #FFF;
            width: 100%;
        }        
        .loginDisplay
        {
            background: url('../images/WebHeader1150x150.jpg');
        }
    </style>

my child page image is not showing at all for some reason. To be more specific, it CAN'T FIND the other image. I know this, because when I select the div /class/style on my child page using firebug, it gives me a:

     "Failed to load the given Url"

message. The image is there and does exist. Why is my child page's css not overriding my master page's css? Help please?
0
Comment
Question by:Michael Sterling
[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
5 Comments
 
LVL 38

Assisted Solution

by:Tom Beck
Tom Beck earned 500 total points
ID: 40560311
Things you undoubtably already checked:

1.) Spelling and file type.
2.) WebHeader1150x150.jpg and WebHeader960x150.jpg are really in the same images folder.
3.) You can bring up WebHeader1150x150.jpg by typing the full path in the browser?
4.) File permissions are the same for both images.
5.) In the source of the rendered page, the css paths to background images have not been altered by asp.net.
6.) In the source of the rendered page, the overriding css for .loginDisplay appears on the page AFTER the original css for .loginDisplay.
0
 
LVL 14

Accepted Solution

by:
CtrlAltDl earned 1000 total points
ID: 40560835
Is it possible that the root directory is at a different level than the master page?

Try this:
background: url('<%=ResolveUrl("~/images/WebHeader1150x150.jpg") %>');

Open in new window

0
 
LVL 19

Assisted Solution

by:Manoj Patil
Manoj Patil earned 500 total points
ID: 40561360
This will happen if,
Your Master Page is in a different folder within the root directory.

As you have checked the Firebug which shows   "Failed to load the given Url"
At the same time you can check the Path of that image which was failed to load.

In the Style section (right side) of  firebug check your css class
In that class find your background property and just right click on that property and select Copy Image Location
And paste it in new tab of browser. You will find the images path (may be right or wrong). And you can resolve it easily.
0
 
LVL 1

Author Comment

by:Michael Sterling
ID: 40563107
@Tom, Ctrl, & Manoj: I will try these things and get back to you. Thank you in advance.
0
 
LVL 1

Author Closing Comment

by:Michael Sterling
ID: 40564925
Thank you to you all. I gave more weight to Ctrl's response, because ultimately that solved my problem. I gave the other points for inspirational research / provocation of thought.
0

Featured Post

Free Tool: IP Lookup

Get more info about an IP address or domain name, such as organization, abuse contacts and geolocation.

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

Why do we like using grid based layouts in website design? Let's look at the live examples of websites and compare them to grid based WordPress themes.
International Data Corporation (IDC) prognosticates that before the current the year gets over disbursing on IT framework products to be sent in cloud environs will be $37.1B.
In this tutorial viewers will learn how to style rounded corners for elements in CSS using the border-radius property Begin with a normal styled element such as a div: To style all four corners of the div to be the same degree of roundness, use the …
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

636 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