• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 364
  • Last Modified:

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

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
Michael Sterling
Asked:
Michael Sterling
3 Solutions
 
Tom BeckCommented:
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
 
CtrlAltDlCommented:
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
 
Manoj PatilSr. Software EngineerCommented:
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
 
Michael SterlingWeb Applications DeveloperAuthor Commented:
@Tom, Ctrl, & Manoj: I will try these things and get back to you. Thank you in advance.
0
 
Michael SterlingWeb Applications DeveloperAuthor Commented:
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

Upgrade your Question Security!

Add Premium security features to your question to ensure its privacy or anonymity. Learn more about your ability to control Question Security today.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now