Recently, I have been experiencing some difficulty applying CSS correctly to some of the OOTB (out-of-the-box) ASP.NET controls. Earlier today, I was trying to apply a CSS image border using the ASP.NET image control, but couldn't get it to render correctly. In the end, I had to use a regular HTML img tag.
CSS for Image Border
font: 75%/1.5em Verdana, Helvetica, Geneva, "Helvetica Neue", sans-serif;
border: 1px solid #c3cfd3;
ASP.NET Image Control
ASP.NET Image Control:
<asp:Image ID="Image1" ImageUrl="~/Images/fender.jpg"
CssClass="imageStyle" runat="server" />
<div style="clear:both;">Incorrectly Rendered</div>
HTML Image Tag
HTML img tag:
<img src="~/Images/fender.jpg" id="Image2" alt="Correctly Rendered"
class="imageStyle" runat="server" />
<div style="clear:both;">Correctly Rendered</div>
Feedback from anyone experiencing similar issues would be welcome. One of the projects on my to-do list this year is to create a custom CSS framework for use with ASP.NET sites, and this is something I'd like to get a handle on in advance. If I come across any other issues like this one, I will post them here.