The Blog of Josh Stodola

I've been running a fine-toothed comb through the rendered markup of this blog lately in search for anything that could use a good cleaning.  While doing that, I noticed that a lot of the images in code had an inline style attribute, setting the border-width to 0px.  I couldn't figure out how in the heck this was happening.  I ended up at this WebmasterWorld forum thread.  Apparently ASP.NET does this by design, I am not sure why.  The inline style serves no purpose, in my opinion.  And I made it a rule of thumb to not use inline styles on this blog, so I had to do something about it.

In the forum thread it says you can change your image controls to standard <img> tags with the runat="server" attribute and it will correct the problem.  That is definitely an option, but who really wants to have to locate all the image controls in your entire application and change the markup and code-behind accordingly?  Not me.  So, I decided to whip up my own Image control that inherits the base Image and properly sets the border-width...

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

This gave me the perfect opportunity to excercise a feature of ASP.NET called tag mapping, which I learned from a post by Mads Kristensen.  Just modify your web.config as illustrated below to override all existing Image controls with the BorderlessImage...

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