Solved

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

Posted on 2015-01-20
5
281 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

Master Your Team's Linux and Cloud Stack

Come see why top tech companies like Mailchimp and Media Temple use Linux Academy to build their employee training programs.

Question has a verified solution.

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

SASS allows you to treat your CSS code in a more OOP way. Let's have a look on how you can structure your code in order for it to be easily maintained and reused.
The article shows the basic steps of integrating an HTML theme template into an ASP.NET MVC project
In this Micro Tutorial users will learn how to embed custom fonts into websites using @font-face in CSS Select a font: Ensure the EULA allows you to use @font-face: Download the font: Get the browser-compatible files you need: Edit your CSS       - Name …
In this tutorial viewers will learn how to position overlapping items using z-index in CSS. They will also learn the restrictions on the z-index property.  Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Red.…

777 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