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
*
{
margin: 0;
padding: 0;
}
body
{
background-color:#827575;
color: #c6d3d5;
font: 75%/1.5em Verdana, Helvetica, Geneva, "Helvetica Neue", sans-serif;
}
.test
{
margin-left: 300px;
padding-top:50px;
width: 156px;
}
.imageStyle
{
padding: 3px;
background-color: #525252;
border: 1px solid #c3cfd3;
}
ASP.NET Image Control
<div class="test">
ASP.NET Image Control:
<asp:Image ID="Image1" ImageUrl="~/Images/fender.jpg"
CssClass="imageStyle" runat="server" />
<div style="clear:both;">Incorrectly Rendered</div>
</div>
HTML Image Tag
<div class="test">
HTML img tag:
<img src="~/Images/fender.jpg" id="Image2" alt="Correctly Rendered"
class="imageStyle" runat="server" />
<div style="clear:both;">Correctly Rendered</div>
</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.
