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>

 

ASP.NET Image Control Anomaly

 

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.

kick it on DotNetKicks.com

Tags: ,

ASP.NET | CSS



Comments (13) -

Lee Dumond
Lee Dumond United States
2/20/2009 5:06:21 AM #

Here's a blog post you might find helpful:

leedumond.com/.../

agrace
agrace United States
2/20/2009 6:03:17 AM #

Lee,

That's a really cool explanation an solution you provided. I wasn't familiar with tag mapping. At least now I can create a library of customized controls and use this technique to apply them...

Anthony Smile  

Lee Dumond
Lee Dumond United States
2/21/2009 4:43:51 AM #

I would be interested in seeing what you come up with for a custom CSS framework. I was thinking of taking on something similar once 4.0 came out, as there are some significant upgrades planned for Webforms which will affect the application of ID selectors. Maybe we can join forces on it, or perhaps you will consider open-sourcing it.

Mike Sharp
Mike Sharp United States
2/21/2009 7:06:45 AM #

I think the issue you were seeing is because the asp:Image control turns off the border by default.  When you view source, you'll see it as an attribute of the image, which overrides your CSS class.  If you modify your CSS class like:

.imageStyle
{
   padding: 3px;
   background-color: #525252;
   border: 1px solid #c3cfd3 !important;
}

it should override the tag attribute.

Regards,
Mike Sharp

agrace
agrace United States
2/21/2009 9:46:46 AM #

Lee,

As soon as I finish the SharePoint project I'm on, I'm going to finish reading "Pro CSS and HTML Design Patterns" by Michael Bowers. I'm thinking more of patterns than an actual framework - the ones I've seen so far are pretty restrictive. Ultimately, I want to create a CMS system with something akin to SharePoint page layouts - maybe have serialized objects without a reliance on XSLT. Let's stay in touch!

Anthony Smile

agrace
agrace United States
2/21/2009 9:47:14 AM #

Mike,

That's slick!!

Thanks,
Anthony Smile

Lee Dumond
Lee Dumond United States
2/21/2009 10:02:36 AM #

@Mike:
Yes, that was already mentioned in a comment to my post, and I am well aware of the !important declaration. But as I responded to the commenter, !important is just another workaround. The actual goal should be to fix the underlying issue when possible. Overriding default behavior with a custom type, and applying tag mapping using that type, accomplishes that.

Mike Sharp
Mike Sharp United States
2/21/2009 11:18:06 AM #

Sorry, I didn't notice a previous comment on that.

The thing is, I don't look at the asp:image tag implementation as having a bug; there are many properties associated with this server control, and Microsoft chose the default value in this case that fits the most common use case.

Changing the default behavior of all asp:image tags is a drastic measure in many cases, especially if you're working with something like SharePoint or a CMS where there are countless controls already in your framework; too many side effects to worry about.

Deriving a new server control with custom properties is fine, especially if there was some functional change, but I would probably avoid the tag mapping here, because now you'll have to go back and address all the places where images suddenly sprout blue borders.  Instead, create your own implementation and declare the control directly.

As for the !important declaration...that's not a workaround, it's an override, and no different from:

public override Unit BorderWidth

except that it's done in the CSS, where such overrides belong, this being a style issue, after all.

Regards,
Mike Sharp

Lee Dumond
Lee Dumond United States
2/22/2009 1:34:20 AM #

@Mike,

Afraid you lost me on this one:

>>because now you'll have to go back and address all the places where images suddenly sprout blue borders.<<

With all due respect, I'm not sure how this would happen. We aren't adding blue borders to all images by using tag mapping at all. We're merely stripping away the extraneous style attribute, and letting the border be applied by the .imageStyle CSS class as intended. How would images that do NOT specify the .imageStyle class suddenly "sprout blue borders"?

As far as the asp:Image implementation being "helpful" or not, I'd say that's a matter of opinion. As I've pointed out in other posts, Webform server controls are designed to be "newbie-friendly", and I suppose that in this case you could argue that it is. But I would submit that for more advanced developers, these "helpful" features often just get in the way, as happened to Anthony in this case.

Mike Sharp
Mike Sharp United States
2/23/2009 5:26:48 AM #

Your tag mapping affects all image tags, not just the one you added with the CssStyle attribute.  

So, in the context of an existing ASP.NET application, or SharePoint or another CMS where the UI is already peppered with image tags that are used for links (and I'm not saying that images used as links are a good idea), it's possible, even likely, that the existing CSS doesn't address borders.  This is because the *default behavior* suppresses the border.  Now you'll have to check every page type (including every variation), every dialog, every admin screen...etc, just to make sure.  Not only that, but anyone in the future will have to ensure they handle borders in image links.  

So, as I said, using !important overrides the CSS style, just as your C# code overrides the server control, but it's only 10 characters with little or no testing needed (assuming you understand the scope of your CSS Class), as opposed to making changes to default behavior (which might be tricky for another developer down the road to figure out), and having to visit every page looking for image links.  

I don't think the default behavior has anything to do with "newbie friendly".  It's by far the most common use case.  The vast majority of images I put on web pages do not have a border, and I sure don't think inheriting the border on the image because it's a child of a hyperlink is useful.  

In the rare case where I want a border on the image (and not on it's container), it's simple enough to override, and it's really the more appropriate solution, since this is a style issue, not a functional one.  Tag mapping, cool though it is, seems to me more like using a hammer to crack an egg.  

Tag mapping is great if you want to override behavior, add new properties, etc.  But as developers, we should always be wary of making breaking changes, especially when there's an obvious solution that is backwards compatible.

Regards,
Mike Sharp  

Brian
Brian Ireland
2/27/2009 1:49:18 PM #

The fact is that you DO NOT want an inline style attribute in your html. Not these days. I can simply say img {border:none} for all images in my css and then style anything specifically as desired. I thought we were long past accepting style attributes inline. I think alot of asp.net developers have learnt to put up  with this kind of thing. Controls wrapping content in a table for no reason, gridview not outputting thead/th etc., auto-pagin g using script links instead of querystring links, dreadful obtrusive javascript from the asp.net ajax stuff.

Joshua Folkerts
Joshua Folkerts United States
3/8/2010 12:56:01 PM #

I am not sure if this helps anyone but if you actually use the css "!important" all your troubles with be resolved witht he border issue.  border: solid 1px red !important;

Web Developer
Web Developer United States
4/8/2013 10:51:09 PM #

I'm curious to see what you have found a custom CSS framework. I thought about doing something like that in version 4.0, because there are significant improvements planned for WebForms, affecting the application ID selectors. Maybe we can work together on it, or considered open source software.

http://hitechito.com

Pingbacks and trackbacks (4)+

Add comment




  Country flag
biuquote
  • Comment
  • Preview
Loading