Answered by:
Remove border-width:0px from asp:Image

Question
-
User294545519 posted
Hi,
Is there a way of removing the style which is automatically added to an asp:image when the control is rendered? Its interfereing with my CssClass.
Thanks.
Monday, January 21, 2008 4:51 AM
Answers
-
User-170319569 posted
You can override the style in page pre render. or you can specifically override the style info for a particular image in the .aspx page.
- Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
Monday, January 21, 2008 7:37 AM -
User-122480877 posted
This infact is a **bug** even if intentional when devloping the <asp:image> tag
There is a way around this.
- Use an <img> tag instead.
- Create your own image control
Now this is not something you need to refrence anywhere else and it will infact make every <asp:image> return with no border style attributes.
Create this Class
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
Make sure you modify your web config
<system.web> <pages> <tagMapping> <add tagType="System.Web.UI.WebControls.Image" mappedTagType="BorderlessImage"/> </tagMapping> </pages> </system.web
If you need more info let me know but this will solve the issue for anyone having Css clashing with an <asp:image> tag
.
- Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
Monday, January 21, 2008 8:44 AM
All replies
-
User-170319569 posted
You can override the style in page pre render. or you can specifically override the style info for a particular image in the .aspx page.
- Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
Monday, January 21, 2008 7:37 AM -
User-897878431 posted
I have never noticed this before... I try to override the style in the .aspx...
When i try this: <asp:Image ID="Image1" runat="server" ImageUrl="~/CurtWRC_2.jpg" style="border-width: 1px;" />
It renders in the browser like this: <img id="Image1" src="CurtWRC_2.jpg" style="border-width:0px;border-width: 1px;" />
and when i do this: <asp:Image ID="Image1" runat="server" ImageUrl="~/CurtWRC_2.jpg" style="border: solid 5px red" />
it still renders in the browser like this: <img id="Image1" src="CurtWRC_2.jpg" style="border-width:0px;border: solid 5px red" />
also when i do this: <asp:Image ID="Image1" runat="server" ImageUrl="~/CurtWRC_2.jpg" />
i still get this rendered to browser: <img id="Image1" src="CurtWRC_2.jpg" style="border-width:0px;" />
Why does ASP.NET alway render with border-width:0px?
I would also be interested to know the answer.Monday, January 21, 2008 7:47 AM -
User-122480877 posted
This infact is a **bug** even if intentional when devloping the <asp:image> tag
There is a way around this.
- Use an <img> tag instead.
- Create your own image control
Now this is not something you need to refrence anywhere else and it will infact make every <asp:image> return with no border style attributes.
Create this Class
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
Make sure you modify your web config
<system.web> <pages> <tagMapping> <add tagType="System.Web.UI.WebControls.Image" mappedTagType="BorderlessImage"/> </tagMapping> </pages> </system.web
If you need more info let me know but this will solve the issue for anyone having Css clashing with an <asp:image> tag
.
- Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
Monday, January 21, 2008 8:44 AM -
User-897878431 posted
Yes it does seem like a bug. I can understand why it has been done intentioanaly to get rid of the border but it does cause other troubles.
Monday, January 21, 2008 2:52 PM -
User294545519 posted
Ive now kind of fixed this problem using the following code. However I still feel like I shouldn't need to use this code. I can kind of understand why .NET would put the border-width:0px in by default as it removes the default border which sits on an image with a link. But if I wish to remove that I can do that myself quite easily in the .css file by putting .img{border-width:0px;} [:S]
This code isn't perfect either as Ive had to match the border-width:1px with that of the one in the .css file. Therefore theres an inconsistency. If the border width in the css is changed to 2px then the controls still only going to show one.
Has anyone else come up with any good fixes for this?
Protected Sub Page_PreRender(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.PreRender For Each item As RepeaterItem In productsrep.Items CType(item.FindControl("ProductImg"), System.Web.UI.WebControls.Image).Attributes.Add("style", "border-width:1px;") Next End Sub
Tuesday, January 22, 2008 4:59 AM -
User-122480877 posted
The code i provided is the better option.
I borrowed it with no intention of giving back from an asp .net mvp lol
All you need to do is create the class and reference it in your web config as shown and it will repair every single asp:image in your code at run time with out having to put a thing in your code behins or even the page its self (aspx)
There is a better way. You can re-write the code on the server. Good luck to that though lol
Tuesday, January 22, 2008 6:38 AM -
User294545519 posted
Thanks, thats a much better option! For the record, the ImageButton control also puts in this style so Ive edited your code to work for this too:
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
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<tagMapping>
<add tagType="System.Web.UI.WebControls.Image" mappedTagType="BorderlessImage"/>
<add tagType="System.Web.UI.WebControls.ImageButton" mappedTagType="BorderlessImageButton"/>
</tagMapping>Tuesday, January 22, 2008 7:19 AM -
User-122480877 posted
Excellent and thank you. I have publish this issue on my blog and will update every now and then.
Remove border-width:0px from asp:Image
Tuesday, January 22, 2008 8:26 AM -
User-237973918 posted
Thanks Spider Master! Your solution worked great! Below is the solution in C# .
Modify the Web.Config as follows:
<web>
<pages>
<tagMapping>
<add tagType="System.Web.UI.WebControls.Image" mappedTagType="BorderlessImage" />
<add tagType="System.Web.UI.WebControls.ImageButton" mappedTagType="BorderlessImageButton"/>
</pages>
</web>Add a class called "BorderlessImage" to your project:
/// <summary>
/// Removes auto-generated style="border-width:0px;" from Image so that a border can be applied through CSS
/// </summary>
public class BorderlessImage : System.Web.UI.WebControls.Image
{
public override Unit BorderWidth
{
get
{
if (base.BorderWidth.IsEmpty)
{
return Unit.Pixel(0);
}
else
{
return base.BorderWidth;
}
}
set
{
base.BorderWidth = value;
}
}
}
Add a class called "BorderlessImageButton" to your project:
/// <summary>
/// Removes auto-generated style="border-width:0px;" from ImageButton so that a border can be applied through CSS
/// </summary>
public class BorderlessImageButton : System.Web.UI.WebControls.ImageButton
{
public override Unit BorderWidth
{
get
{
if (base.BorderWidth.IsEmpty)
{
return Unit.Pixel(0);
}
else
{
return base.BorderWidth;
}
}
set
{
base.BorderWidth = value;
}
}
}
After doing the above, the following CSS rule will work on ASP:Image controls:
img {border: solid 1px black;}Saturday, September 27, 2008 7:53 AM -
User865450124 posted
I had gotten into the very, very bad habit of placing trailing semicolons in my inline styles as in <span style="font-family:tahoma;font-size:10pt;"> which was fine until I tried adding a DropDownList with its AutoPostBack property set to true. The DropDownList generated a client side error. I pulled out the rest of my hair trying to track down the problem which as it turned out was related to my bad habit. Evidently, semicolons are used to separate the elements and should never be used to at the end. Obviously, whoever hard coded the addition of the style did know this.
Tuesday, April 14, 2009 12:09 AM -
User2089495229 posted
spider_master, CurtWRC
thank you very much.
Thursday, April 16, 2009 12:29 PM -
User151516353 posted
Simply add !important into the .css
Monday, August 3, 2009 10:38 AM