I've encountered a style issue with my custom web control. I am in the process of creating a stylish button control to be used in my upcoming projects.
Starting off, I created an HTML file with the following HTML code:
<a class="button">Home</a>Accompanied by the CSS:
.button:before{
...
}
The HTML file worked perfectly, the CSS was applied correctly, and thanks to the :before pseudo element in my CSS, I achieved a neat additional box around my button.
Once confident in the styling, I attempted to create a web control in ASP.Net. Here is a snippet of the code:
protected override void RenderContents(HtmlTextWriter output)
{
output.AddAttribute(HtmlTextWriterAttribute.Id, this.ID);
output.AddAttribute(HtmlTextWriterAttribute.Class, String.IsNullOrEmpty(this.CssClass) ? "button" : this.CssClass);
if (this.Style.Count>0)
output.AddAttribute(HtmlTextWriterAttribute.Style, this.Style.ToString());
if(this.Width != default(Unit))
output.AddAttribute(HtmlTextWriterAttribute.Width, this.Width.ToString());
if (this.Height != default(Unit))
output.AddAttribute(HtmlTextWriterAttribute.Height, this.Height.ToString());
output.RenderBeginTag("a");
if (!String.IsNullOrEmpty(ImageSrc))
{
output.AddAttribute(HtmlTextWriterAttribute.Style, String.Format("background: url('{0}') no-repeat {1}px {2}px;",ImageSrc,ImageXPos, ImageYPos));
output.RenderBeginTag("div");
output.RenderEndTag();
}
output.Write(Text);
output.RenderEndTag();
}
While the generated HTML matched that of my test file, the :before CSS wasn't being applied for some unknown reason. If anyone can assist me in resolving this issue, it would be greatly appreciated.
It's worth noting that my test file consisted of pure HTML, yet when incorporating the same code into my ASP.net site, the :before style also failed to apply.
To provide further insight, here is a small Fiddle example where the error isn't visible due to it not being ASP.net related: example
SOLVED: It appears that the issue lies with the z-index. Currently set at -2, it causes the element to appear behind all other content on the page. A simple oversight on my part.