Solved

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

Posted on 2015-01-20
5
299 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:mikesExpertExchange
5 Comments
 
LVL 38

Assisted Solution

by:Tom Beck
Tom Beck earned 125 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 250 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 125 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:mikesExpertExchange
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:mikesExpertExchange
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

Industry Leaders: 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

Browsers only know CSS so your awesome SASS code needs to be translated into normal CSS. Here I'll try to explain what you should aim for in order to take full advantage of SASS.
This article shows how to deploy dynamic backgrounds to computers depending on the aspect ratio of display
In this tutorial viewers will learn how to style different bullet points for unordered lists in CSS. Begin with a normal unordered list; the default bullet point is a solid circle: In the CSS, create a defined class of unordered list by typing "ul.S…
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…

733 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