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.