Software Engineering with Sean Eby
opinions, trips, tricks and tools for Software Engineering and .NET

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

Thursday, September 13, 2007 4:14 PM

Today, I had the pleasure of trying to use CSS to style some ASP.NET ImageButtons.  One aspect of the style that we wanted was a border around the button on a mouse hover.  However, no matter what I tried, I could not set a border on the button with CSS.  After a bit more digging, I found out that ASP.NET is trying to help us by inserting an Inline style of border-width:0px if we haven't defined a border-width for the ImageButton (which, of course, we have not, as we're using CSS!).  So, I went to faithful Google, to find an answer. 

The best solution I was able to come up with was to make my own CustomButton that inherited from ImageButton.  In the CustomButton, I override the BorderWidth property, as seen below:

   1:  Public Overrides Property BorderWidth() As System.Web.UI.WebControls.Unit
   2:       Get
   3:            If MyBase.BorderWidth.IsEmpty = True Then
   4:                 MyBase.BorderWidth = Unit.Pixel(0)
   5:            End If
   6:            Return MyBase.BorderWidth
   7:       End Get
   8:       Set(ByVal value As System.Web.UI.WebControls.Unit)
   9:            MyBase.BorderWidth = value
  10:       End Set
  11:  End Property

The key here, is to set the BorderWidth to zero if it's not set, to prevent ASP.NET from setting the inline style for us.


Feedback

# 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

Post a comment





 

Please add 7 and 4 and type the answer here: