Tip #2: ASP.NET ImageButton and the famous style="border-width:0px;"

# re: Tip #2: ASP.NET ImageButton and the famous style="border-width:0px;"

Excellent post. You have a page rank of 1 for the search "asp.net imagebutton style". I am happy you do as your solution works flawlessly! 9/16/2007 3:31 PM | ahsteele

# re: Tip #2: ASP.NET ImageButton and the famous style="border-width:0px;"

how to set the borderwidth in textbox , but not support mozilla browser , how to solve the problem
5/19/2008 6:58 AM | ganesaselvam

# re: Tip #2: ASP.NET ImageButton and the famous style="border-width:0px;"

good chunk!

tweaking the control adapter may be appropriate too...
... regards from germany!

<browsers>
<browser refID="Default">
<controlAdapters>
<adapter
controlType="System.Web.UI.WebControls.Image"
adapterType="MyAdapters.ImageAdapter"
/>
</controlAdapters>
</browser>
</browsers>

App_Code/MyControlAdapters.cs with the text

using System;
using System.IO;
using System.Web;
using System.Web.UI;

namespace MyAdapters
{
System.Web.UI.WebControls.Adapters.WebControlAdapter
{
protected override void RenderBeginTag(HtmlTextWriter writer)
{
StringWriter sw = new StringWriter();
HtmlTextWriter hw = new HtmlTextWriter(sw);
base.RenderBeginTag(hw);
hw.Flush();
hw.Close();
string origTag = sw.ToString();
string newTag = origTag.Replace("border-width:0px;", "");
writer.Write(newTag);
}

protected override void RenderEndTag(HtmlTextWriter writer)
{
}

protected override void RenderContents(HtmlTextWriter writer)
{
}
}
}
7/24/2008 5:44 AM | velbert

# re: Tip #2: ASP.NET ImageButton and the famous style="border-width:0px;"

Alternatively give it a background and padding if you only want a solid border 10/15/2008 10:00 AM | Wingle

# re: Tip #2: ASP.NET ImageButton and the famous style="border-width:0px;"

Or you could just use a standard html input tag and make it runat="server" and type="image", this gives you more control over the rendering and most of the time there isnt any any functionality imagebutton has that this doesnt.

Also have to change the server side event to ServerClick rather than Click. 1/15/2009 11:45 AM | Simon Crowell

# re: Tip #2: ASP.NET ImageButton and the famous style="border-width:0px;"

Here's my C# version of your solution:



using System;
using System.Data;
using System.Configuration;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;

/// <summary>
/// Summary description for ImageButtonNoBorder
/// </summary>
public class ImageButtonNoBorder : ImageButton
{
public override Unit BorderWidth
{
get
{
base.BorderWidth = Unit.Pixel(0);
return base.BorderWidth;
}
set
{
}
}

}
3/1/2009 8:38 PM | Chris

# re: Tip #2: ASP.NET ImageButton and the famous style="border-width:0px;"

Personally, I don't have a problem with the style being added. My issue is that I'm having to deal with this bug because whoever hardcoded it hardcoded it with a damn semicolon on the end. From everything that I've read, semicolons should only be used to separate inline styles, not to terminate them. Hence, I'm having to hack this bug because the ending semicolon is causing a client side error that keeps all of the client side scripts from running.

If AIG weren't such a bigger issued, I say we should tar and feather who ever put that semicolon in. 4/18/2009 12:46 PM | David

# re: Tip #2: ASP.NET ImageButton and the famous style="border-width:0px;"

I just came across this, I have a CSS Class I'm applying to an Span surrounding an Image but the ASP inserted style data is over-riding it as it is a local style attribute. I found two other ways around this which be suitable for you depending on your requirements.

1) Use a Repeater control and in the ItemTemplate you can use regular HTML image tags like this (My data is XML, hence the XPath statements):

<ItemTemplate>
<span class="BoxCover">
<a href="/detaill.aspx?game=<%# XPath("ShortName")%>"><img src="<%# XPath("Media/RootFolder")%>/thumbs/<%# XPath("Media/ImageName")%>" />
</span>
</ItemTemplate>

2) If generating the controls in code, use a LiteralControl instead of an Image control like this:

string thisThumbnailImageTag = "<img src='" + strRootImagePath + ".jpg' />";
Label thisLabel = new Label();
thisLabel.CssClass = "BoxCover";
thisLabel.Controls.Add(new LiteralControl(thisThumbnailImageTag));
9/9/2009 12:53 PM | Daniel

# re: Tip #2: ASP.NET ImageButton and the famous style="border-width:0px;"

This could also be accomplished with a an ImageButton skin. Use a "default" skin if you want all ImageButton controls in your application to be consistent; or, use a "named" control skin if you want to apply this selectively. 11/9/2009 11:55 AM | Lee C.