locked
Remove border-width:0px from asp:Image RRS feed

  • 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.

    1. Use an <img> tag instead.
    2. 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.

    1. Use an <img> tag instead.
    2. 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