Why does ASP.Net add border attribute to asp: Image
So I have an asp.net image tag:
<asp:Image runat="server" ImageUrl="~/Images/img.jpg" width="350px" height="250px" AlternateText="My Image" />
but it outputs this:
<img src="Images/img.jpg" height="250" width="350" border="0" />
... the XHTML validator thinks the "border" element shouldn't be there ... but he's ASP.Net adding it.
I'm sure this question has been asked many times before, but why does asp.net think it needs to add it, especially because it is not valid?
How can this be avoided so that he confirms?
source to share
This is the way ASP.NET Web Control works. Unfortunately, many of the built-in ASP.NET web controls are not standard complaints and will cause the page to not validate. CSS Friendly Control Adapters is a courageous attempt to "fix" accidentally invalid and less semantic HTML generated by inline web controls.
Your specific problem can be avoided by following the advice in the answer to How to create an ImageButton control adapter.
source to share
I would agree with Dan, the img tag will render with style instead of border = "0", but with a little research I did, border = 0 only disappears when you style the control with img {border: none} in an external stylesheet or on the same page how the magic happens is outside the scope of my research. However, I noticed that the validator still gets border = 0 in the markup, which means that asp.net renders differently depending on the type of browser (or browser agent I think) and for the solution for this I had to force asp to always render "clean" code as shown here.
http://blog.hmobius.com/post/2010/03/03/ASPNET-Part-9-Rendering-Cleaner-HTML.aspx
so in my case I added to my web.config file
<pages controlRenderingCompatibilityVersion="4.0" clientIDMode="AutoID">
one more point, i am using the html5 doctype, so make sure your page doctype is not an issue.
and my page is being checked.
source to share
This was not always invalid. In the old days, we all added border = "0" to avoid the default blue border when the image was linked. Unfortunately, the ASP.NET team did not find it worth updating the Image control with web standards.
Btw, the border attribute is far from the only non-compliant HTML that ASP.NET generates.
source to share
Are you using ASP.NET 1.1? Since in 2.0 and up, the image tag is rendered as:
<img src="/Images/img.jpg" alt="My Image"
style="height:250px;width:350px;border-width:0px;" />
I just tested this and above is what I got (using Opera 10) with the XHTML 1.0 Transitional doctrine. So I'm not sure why you are getting invalid HTML if ASP.NET somehow detects your browser as a "down-level".
- What browser are you using?
- What version of .net?
- What is your doctype?
source to share
border="0"
was required for Netscape 4, which did not support the usual CSS way of doing it right. Of course, ASP.NET won't work much with Netscape 4, so this attempt at backward compatibility is pretty pointless.
By the way, just like the ASP.NET control markup, which is hopeless, it actually still looks at the browser in this day and age: it will omit the associated but even more invalid "border =" 0 "on image buttons for browsers. which he thinks are "good: choosing browser whitelisting that does not include an HTML validator."
Browser-sniffing is not the right thing to do and most of us stopped doing it many years ago, but ASP.NET still does it by default unless you use the upstream clientTarget in your page declaration to stop it. Ugly stuff, MS.
source to share
If you don't want to mess up the web config (like me) because targeting a different rendering environment will affect your entire rendering of project items and for huge projects this is not an option, you can always use this "in-page" solution by pasting this line to the end of your form, before the body closing tag (jQuery required):
<script type="text/javascript">$('#yourImageId').removeAttr("border");</script>
Using this you will not pass HTML validation, the best way I have founded for validating a form is not using an asp control but a regular img tag making it accessible from the code behind with the runat = "server" property:
<img ID="myImage" src="Images/img.jpg" height="250" width="350" runat="server"/>
This solution will pass HTML validation and you will be able to change the image attributes from the code behind.
source to share