Image Border ASP.NET

Controlling Image Border

[dmce]

Hi folks

A quick question regarding border control on images in ASP.NET

To create the image on the page i use:

<asp:Image ID="imgImage" runat="server" ImageUrl="image.jpg" alt="image" CssClass="mainimage" />

The CSS for mainimage sets a 1px border but it doesnt show when rendered on the page, which i pressume is due to the style attribute that is added to the HTML:

<img id="ctl00_contentHolder_imgImage" class="mainimage" src="image.jpg" style="border-width:0px;" />

How do i make use of CSS to control the border that is display?

[pageoneresults]

Welcome to WebmasterWorld dmce!

Try adding this to your style sheet...

img{
border:1px solid #000;
}

The above will give you a 1 pixel solid black line around your image.

How do i make use of CSS to control the border that is display?

img id="ctl00_contentHolder_imgImage" class="mainimage" src="image.jpg" style="border-width:0px;" />

What you have above is an inline style. You are using CSS, just using it in an "inline method". If you add the above CSS (that I provided), you can remove the style="border-width:0px; portion of the img element.

CssClass="mainimage"

Hmmm, looks like you have two things going on above. There is a "mainimage" class that is defining something for that image. Then you have an inline style defining border. You may be able to just define that border in the "mainimage" class.

[dmce]

Thanks for the response pageoneresults.

The thing is i am not adding that inline style. Its not in my markup and seems to get added as part of asp.net.

I have the css for the border in the style sheet in a class called mainimage. That inline style (or how it got there) is whats confusing me.

[Jimmy Turnip]

You could remove the .net added border by resetting the style in the codebehind:

imgImage.ControlStyle.Reset();

or you could use an html image, but make it runat="server":

<img id="imgImage" runat="server" src="image.jpg" alt="image" class="mainimage" />

Either way should create you an image with none of the extra markup so your main styles will behave properly.

(Alternatively you could add an!important tag to your style sheet)

[edited by: Jimmy_Turnip at 10:20 am (utc) on June 11, 2007]

[dmce]

Thanks for the response Jimmy Turnip

That code in the code behind seems to remove the CssClass and therefore the class attribute from the image but the inline style is still there.

Im more curious now as to this behavior and how to stop the style being applied.

[Jimmy Turnip]

Hmm, I thought the reset would get rid of the inline style. When you use the reset, you would need to add the attributes again with imgImage.Attributes.Add.

Having a quick try, none of the other attribute removing methods get rid of it either.

It's silly but whoever in Microsoft wrote the render method of that control decided to put a style="border-width:0px;" as a default.

Did you try the runat method on a html image? That works. Also, the css for overriding the inline style would be:

img{
border:1px solid #000!important;
}

I think the only way of removing it properly would be to write your own version, inherit the image class and override one of the render methods.

[dmce]

Yes the normal <img /> tag works. Thanks.

Just seems annoying that they decided to do this. Writing my own version is way beyond my level at the moment :)