?
Solved

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

Posted on 2015-01-20
5
Medium Priority
?
336 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

NEW Veeam Agent for Microsoft Windows

Backup and recover physical and cloud-based servers and workstations, as well as endpoint devices that belong to remote users. Avoid downtime and data loss quickly and easily for Windows-based physical or public cloud-based workloads!

Question has a verified solution.

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

As a result of several questions about how to use Bootstrap I thought it would be a good idea to write down the development aspect of creating a Bootstrapped website in as little time as possible. Part 1 of this article will only concentrate on g…
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
In this tutorial viewers will learn how to define a gradient in CSS. Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Gradient. Define the background as "linear-gradient(to right, #ee3668, black)". Ensure you …
In this Micro Tutorial viewers will learn how to create a CSS image sprite (In a later tutorial, viewers will learn how to use CSS and HTML to create a navigation menu using this sprite) Open a new Photoshop document with a width of (Icon width)x(N…
Suggested Courses

764 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