Remove border-width:0px from asp:Image or asp:ImageButton

First off hello all and here is my first code post and bug fix

This in fact is a **bug** even if intentional when developing the <asp:Image /> and also the <asp:ImageButton /> tags

The issue that has been brought up in many forums recently and discussions are popping up all over the place regarding the asp image control and now also the image button has the same issue.

Let me explain. Have you ever run through your HTML source view in your browser to check on how things are being compiled and distributed to the browser in HTML. If you run a standard asp:image tag you will find it has given itself a style attribute border-width:0px

Now this is ok unless you wanted to apply a cssClass or used an attached css to give the image another border. When the clash comes about you can end up with no styling and in some cases no image.

There is a way around this.

 

       1.   Use an <img> tag instead.

or

       2.   Create your own image control over-ride (class)

 

Now this is not something you need to reference anywhere else and it will in fact make every <asp:image> return with no border style attributes.


C# Code - For the Pros


Borderless Image Class

 

using System;

using System.Web.UI.WebControls;

public class BorderlessImage : Image

{

public override Unit BorderWidth

{

get

{

if (base.BorderWidth.IsEmpty)
return Unit.Pixel(0);

else

return base.BorderWidth;

}

set

{

base.BorderWidth = value;

}

}

}


Borderless Image Button Class

using System;

using System.Web.UI.WebControls;

public class BorderlessImageButton : ImageButton

{

public override Unit BorderWidth

{

get

{

if (base.BorderWidth.IsEmpty)
return Unit.Pixel(0);

else

return base.BorderWidth;

}

set

{

base.BorderWidth = value;

}

}

}


VB Code - For Rookies


Borderless Image Class

 

Imports Microsoft.VisualBasic

Public Class BorderlessImage

Inherits System.Web.UI.WebControls.Image

Public Overrides Property BorderWidth() As System.Web.UI.WebControls.Unit

Get

If MyBase.BorderWidth.IsEmpty Then
Return Unit.Pixel(0)
Else : Return
MyBase.BorderWidth()

End If

End Get

Set(ByVal value As System.Web.UI.WebControls.Unit)

MyBase.BorderWidth = value
End Set

End Property

End Class


Borderless Image Button Class

 

Imports Microsoft.VisualBasic

Public Class BorderlessImageButton

Inherits System.Web.UI.WebControls.ImageButton

Public Overrides Property BorderWidth() As System.Web.UI.WebControls.Unit

Get

If MyBase.BorderWidth.IsEmpty Then
Return Unit.Pixel(0)
Else : Return
MyBase.BorderWidth()

End If

End Get

Set(ByVal value As System.Web.UI.WebControls.Unit)

MyBase.BorderWidth = value
End Set

End Property

End Class


Ad tag refrencess to web config- If not added then your code is useless (you can do this in page also)

 

<system.web>
<pages>
<tagMapping>
<add tagType="System.Web.UI.WebControls.Image" mappedTagType="BorderlessImage"/>
<add tagType="System.Web.UI.WebControls.ImageButton" mappedTagType="BorderlessImageButton"/>

</tagMapping>

</pages>

</system.web>

 

......

Recieved by X-Post from = http://www.spidermaster.org/blogs/spidermaster
Published Tuesday, January 22, 2008 6:02 AM by Spider Master
Filed under: , , , , , , ,

Comments

# re: Remove border-width:0px from asp:Image or asp:ImageButton

Monday, December 1, 2008 12:29 AM by Jason

Thank you very much!

# re: Remove border-width:0px from asp:Image or asp:ImageButton

Friday, May 15, 2009 3:22 AM by juri

in Delphi Prism:

...

var  value : System.Web.UI.WebControls.Unit;

...

TextBox1.BorderWidth:=value;

# re: Remove border-width:0px from asp:Image or asp:ImageButton

Friday, July 10, 2009 9:24 AM by Luiz Gustavo

Great great solution!

You save me!

Thanks a lot!

# re: Remove border-width:0px from asp:Image or asp:ImageButton

Wednesday, October 20, 2010 1:48 PM by Sayman

Unfortunately when I execute, I get:

Could not load type 'BorderlessImage'.

# re: Remove border-width:0px from asp:Image or asp:ImageButton

Wednesday, October 20, 2010 8:00 PM by Spider Master

@Sayman be sure to include your namespace in your tag mapping.

mappedTagType="*yourNamespacePath*BorderlessImageButton"/>