Image wont render on my aspx page after adding master page..if not changed ID ..what else could be the reason?

Question

used the following code to get rid of the system generated ID:-

Banner.ascx.cs

protected override void Render(System.Web.UI.HtmlTextWriter writer)
{
    StringWriter Html = new StringWriter();
    HtmlTextWriter Render = new HtmlTextWriter(Html);
    base.Render(Render);
    writer.Write(Html.ToString().Replace("id=\"ctl00_ContentPlaceHolder2_ctl00_Banner_", "id=\""));
}

using the above code its rendering the ID as the original one (ie "div1"..earlier it would render the div's ID as "ctl00_ContentPlaceHolder2_ctl00_Banner_div1"...so I thot changed ID is the reson its not displaying my image) only but still the image won't display...

testClass.aspx :-

<div id="div1" class="id0" style="background-image: url(<%=GetImage()%>);">
    <ul>
        <li>
        <li>
        .
        .
        .
    </ul>
</div>

testClass.aspx.cs

public partial class testClass : System.Web.UI.Page    
{
    Control userControlBanner;
    UserControl Banner;
    Content c1;

    protected void Page_PreInit(object sender, EventArgs e)
    {            
        this.MasterPageFile = (String)("~/master1.master");
        c1 = new Content();
        string uc = "~/usercontrols/Banner.ascx";
        userControlBanner = Page.LoadControl(uc);
        userControlBanner.ID = "Banner";
        c1.Controls.Add(userControlBanner);
        this.Master.FindControl("ContentPlaceHolder2").Controls.Add(c1);
    }
}

Banner.ascx

Now when the code above is rendered in the page source I see the complete image path as "http://localhost/myweb/images/myImage.jpg" and I can see the image when I type this address 'http://localhost/myweb/images/myImage.jpg" in browser why wont the image appear on my aspx page !? :((

I tried so hard to get rid of the system generated ID and still the image wont display! :((

Edit1:

ok I even gave the path(where the image actually is) of the image as this :- "F:\WS\myweb\images\myimage.jpg" ...it should at least show now!.. isn't it? Is the image getting hidden behind some other page element or what?

god I am stuck at this like anything :((

Edit2:

ok I tried what mxmissile said..added one div tag on my test page and assigned user control to that instead of "ContentPlaceHolder" (though I want the banner there only) ... now the image's still not appearing..everything else's fine..the list elements and all..just that image is not appearing...I removed everything from the usercontrol but the sprite image thinking may be the image's getting hidden or something behind that List of links..still no image :( somebody help please. Thanks!

Edit3:

When I opened Firebug..under "Style" section ...its showing the image path striked out..why is that ???

Edit4:

found out style was overridden..I gave background image in my css and same in the div tag with ID=id0..removed the background-image property from div tag..now image path's only in css...so no more striked out text..still the image's not appearing....path of the image's correct...in "Style" section in firebug..I can see the image when I hover over

.id0, .mySprite:hover div {
background-image:url("http://localhost/myWeb/images/myImage.jpg");

Why don't I see the banner image on my page?

Edit5:

changed this:

.id0, .mySprite:hover div
{
    background-image: url(../images/myImage.jpg);
    background-repeat: no-repeat;
}

to this:

.id0, .mySprite:hover div
{
    background-image: url(../images/myImage.jpg);
    background-repeat: no-repeat;
    width: 728px;
    height: 243px;
}

still nothing ! :((( If it's not even size issue, what is it ???

Edit6:

Image's being fetched now from a method... url(<%=GetImage()%>); this method's returning the path alright..just don't see no image on my page ..what's wrong ??

[EDIT 7]

Its only after adding master page that this Sprite got screwed up..was working great earlier..

coz the image's not getting displayed..I thot may be coz the div's ID is being changed..that's the reason the image's not getting displayed..what else is it ? — Serenity, Oct 20 '10 at 06:13
Soul - As your changes have confirmed, its definitely nothing to do with the auto generated id's. Re the image not loading, just to confirm, is the path you have specified the path relative to the CSS file or the page containing the CSS file? — Jagmag, Oct 20 '10 at 06:22
Soul - Also, do check out this thread http://stackoverflow.com/questions/89418/reference-app-relative-virtual-paths-in-css-file I do think this is similar to the issue you are facing — Jagmag, Oct 20 '10 at 06:24
In the css too path's showing like this when I view Page Source "background-image: url(http://localhost/myweb/images/myImage.jpg); " — Serenity, Oct 20 '10 at 06:28

score 1 · Answer 1 · answered Oct 22 '10 at 19:36

1

markup:

<div id="div1" class="c1" runat="server" ></div>

codebehind:

div1.Controls.Add(userControlBanner);

Dont set the image path to the F:ws... location use your original path "/images/myImage.jpg" or even better "~/images/myImage.jpg"

answered Oct 22 '10 at 19:36

mxmissile

11,464
3
53
79

I just added that F: location to test once..the image path actually comes from a method in code behind...Now in code behind I am already doing this .. "this.Master.FindControl("ContentPlaceHolder2").Controls.Add(c1);" ..ie adding this control in the ContentPlaceHolder of the master page..so I need to add this control twice ? one in that "ContentPlaceHolder" and 2ndly in that div ?? – Serenity Oct 22 '10 at 19:47

score 1 · Answer 2 · answered Oct 23 '10 at 08:35

1

testClass.aspx Page Source :-

<div id="div1" class="id0" background-image: url(<%=GetImage()%>);>

This is not HTML, not even valid XML. Use

<div id="div1" class="id0" style="background-image: url(<%=GetImage()%>);">

instead. (Ultimately, you should put the background-image declaration in a stylesheet, but that could be cached, which is one more headache while testing.)

Also, get rid of the negative z-indexes while you are testing.

answered Oct 23 '10 at 08:35

Tgr

27,442
12
81
118

it is that way only Tgr..I typed incorrectly here in hurry..its not working – Serenity Oct 23 '10 at 09:43
: ok I just removed both z-index properties in the 2 css classes..now the image is displaying on the screen but the List of Links is appearing behind the image...what values should I give to Z-index properties ? Also when I dont apply master page on an aspx page and simply drag this control in it..the sprite works pretty fine..why does it give me problem when i use master pages?? – Serenity Oct 23 '10 at 09:55
:guess I haven't mentioned but this sprite image is a background image of a div and inside that div are li tags containing my links...I want the links to appear over my image..so when user hovers over one link..part of the sprite image are displayed accordingly – Serenity Oct 23 '10 at 10:00
@Happy Soul: unless you are useing negative z-indexes or doing some other seriously weird thing, the content of a div should never be behind the background of that div, but it is hard to tell more without seeing the actual code (especially since I am unfamiliar with asp.net). Is it accessible somewhere? – Tgr Oct 23 '10 at 20:37

score 1 · Answer 3 · edited May 23 '17 at 10:33

In one of your comments you stated :

" In the css too path's showing like this when I view Page Source "background-image: url(localhost/myweb/images/myImage.jpg);"

In this case the browser will be looking for a relative folder named localhost/... up to the file myImage.jpg , you need to provide a valid url (absolute or relative)

Either:

background-image: url(http://localhost/myweb/images/myImage.jpg);

or

Assuming your test page path is http://localhost/myweb/testClass.aspx :

background-image: url(images/myImage.jpg);

Check getting base url of web site's root (absolute/relative url) and ASP.NET - Themes and Relative Referencing

score 0 · Answer 4 · answered Oct 23 '10 at 08:27

0

Have you tried viewing in a different browser?

answered Oct 23 '10 at 08:27

Toby Allen

10,997
11
73
124

Yes I did..dont see the image in any of the 3 browsers I got :( – Serenity Oct 23 '10 at 08:33

score 0 · Answer 5 · answered Oct 25 '10 at 08:33

0

Have you added the image to the Visual Studio solution?

I notice that sometimes images are not displayed when they are not added to the solution, as strange as it is.

answered Oct 25 '10 at 08:33

ovm

2,452
3
28
51

Image's there..the current problem with the image is this now http://stackoverflow.com/questions/4012139/problem-with-css-sprite-image-overlapping-list-of-links-want-the-links-over-the – Serenity Oct 25 '10 at 09:03
and this too http://stackoverflow.com/questions/4013669/divs-background-images-position-is-not-changing-when-links-are-hovered-over-wh – Serenity Oct 26 '10 at 08:03
Its only after adding master page that this Sprite got screwed up..was working great earlier..http://jsfiddle.net/xkRcN/8/ – Serenity Oct 26 '10 at 08:05

score 0 · Answer 6 · answered Oct 29 '10 at 08:01

0

Does your master page have css with <li> tag's background property set to something? Maybe that's causing the background of you div to be hidden.

answered Oct 29 '10 at 08:01

vamyip

1,161
1
10
35

but the sprite image's not in li's background..its a div's backgound – Serenity Oct 29 '10 at 08:13

Image wont render on my aspx page after adding master page..if not changed ID ..what else could be the reason?

6 Answers6

Linked