Image Control Automatically Adding border-width:0px;

[Nathan Sokalski]

When a value is not specified for the Image control's BorderWidth property,
it automatically adds style="border-width:0px;" to the generated img tag.
This also occurs when the Hyperlink's ImageUrl property is used. I am not
sure what situations this may cause a problem in (maybe if it conflicts with
the CssClass property or something), but either way, it makes the file
larger, which is not exactly desirable. I am still using ASP.NET 2.0, so
maybe this is fixed in 3.5, does anybody know of a way to prevent ASP.NET
2.0 from generating undesired and unnecessary style attributes?

 

[Nathan Sokalski]

After doing some searches, I finally found someone who has found a nice
solution to this problem (well, at least the Image control part). A
wonderful solution is available at:

http://blog.josh420.com/archives/2007/10/aspnet-image-control-border-width-inline-style.aspx

Here is a copy of the code from this page:

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 System.Web.UI.WebControls.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

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


However, this solution does not solve the problem of HyperLinks that use
their ImageUrl property. The HyperLink is a little bit tougher (well, I
didn't write the code above, so I guess they're both tough) because the
BorderWidth property does not affect the attributes of the img tag, it
affects the attributes of the a tag. The only solution I can think of would
be to override something like CreateChildControls, Render, or whichever one
of the methods HyperLink uses when adding the border-width:0px; that we want
to get rid of. Any ideas?

Nathan Sokalski
(e-mail address removed)
http://www.nathansokalski.com/

 

[alexanderstreetpress_jw]

After doing some searches, I finally found someone who has found a nice
solution to this problem (well, at least the Image control part). A
wonderful solution is available at:

http://blog.josh420.com/archives/2007/10/aspnet-image-control-border-...

Here is a copy of the code from this page:

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 System.Web.UI.WebControls.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

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

However, this solution does not solve the problem of HyperLinks that use
their ImageUrl property. The HyperLink is a little bit tougher (well, I
didn't write the code above, so I guess they're both tough) because the
BorderWidth property does not affect the attributes of the img tag, it
affects the attributes of the a tag. The only solution I can think of would
be to override something like CreateChildControls, Render, or whichever one
of the methods HyperLink uses when adding the border-width:0px; that we want
to get rid of. Any ideas?

Nathan Sokalski
(e-mail address removed)://www.nathansokalski.com/

I had the same problem... wanted to make a border on an image that was
inside of a hyperlink control. The problem was the style attribute is
automatically added 'border-width:0px;'

The solution I found that works, and probably isn't the best way but
again works, is to just add the attribute since css renders the most
recent one.

x.Attributes.Add("style", "border:1px solid #000;")

works for me, hope it works for you.