I implemented the following code to remove 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=\""));
}
Despite using the code above, the ID still rendered as the original one (i.e., "div1"...previously it would render the div's ID as "ctl00_ContentPlaceHolder2_ctl00_Banner_div1" ... so I thought changing the ID was causing my image not to 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
When examining the page source with the code above, the complete image path appears as "http://localhost/myweb/images/myImage.jpg", and I can view the image when I enter this address 'http://localhost/myweb/images/myImage.jpg' in the browser. So, why doesn't the image appear on my aspx page!?
I have made multiple attempts to eliminate the system-generated ID, but the image still refuses to display!
Edit1:
Even after providing the actual image path as "F:\WS\myweb\images\myimage.jpg", the image should at least be visible by now! Isn't it? Could the image be hidden behind another page element or something else?
Edit2:
I followed mxmissile's suggestion and added a div tag on my test page, assigning the user control to that instead of "ContentPlaceHolder" (even though I prefer the banner there). However, the image still does not appear; everything else seems fine except for the image... I even stripped down everything from the user control except the sprite image, thinking maybe the image is being concealed behind the list of links... but still no image. Can someone please assist? Thank you!
Edit3:
Upon inspecting with Firebug under the "Style" section, the image path is crossed out. Why is that happening?
Edit4:
I discovered that the style was overridden. I specified the background image both in my CSS and in the div tag with ID=id0. I removed the background-image property from the div tag, leaving only the image path in the CSS. The striked-out text no longer appears, but the image still fails to show up. The image path is correct - in the "Style" section in Firebug, I can see the image when I hover over it.
.id0, .mySprite:hover div {
background-image:url("http://localhost/myWeb/images/myImage.jpg");
Why isn't the banner image displaying on my page?
Edit5:
I made the following change:
.id0, .mySprite:hover div
{
background-image: url(../images/myImage.jpg);
background-repeat: no-repeat;
}
And still nothing! If it's not a size issue, then what could it be?
Edit6:
The image is now being retrieved from a method... url(<%=GetImage()%>); This method returns the correct path, yet I still do not see any image on my page. What am I missing here?
[EDIT 7]
The Sprite got messed up only after adding the master page - it was working perfectly before.