Solved

CSS not working with ASP:Image

Posted on 2011-09-06
4
275 Views
Last Modified: 2012-06-21
I have an image on my ASP.Net page defined as follows:

                      <asp:Image ID="ImgPantry" runat="server" BorderStyle="None"
                          CssClass="borders_on" ImageUrl="~/images/HomePagePics/Pantry.jpg" />

which renders as this:

<img id="ImgPantry" class="borders_on" src="images/HomePagePics/Pantry.jpg" style="border-style:None;border-width:0px;" />

The borders_on is defined as follows in styles.css which is attached to the ASP.NET page:

.borders_on
{
      border:3px solid #000000;
    height:100px;
    width:200px;
}

Not sure what I'm doing wrong but the border is not being displayed around the picture.  The Height and Width are set but the border is not.  Any idea what I'm doing wrong?
0
Comment
Question by:dyarosh
  • 2
4 Comments
 
LVL 18

Expert Comment

by:ivan_vagunin
ID: 36487916
Hi! It is a kind of bug - framework adds style="border-style:None;border-width:0px;" to <img> which overrides class attributes.
Try this solution:
http://forums.asp.net/p/1208356/2124354.aspx
0
 
LVL 18

Assisted Solution

by:ivan_vagunin
ivan_vagunin earned 100 total points
ID: 36487927
You can use server <img> instead of <asp:Image>:
<img id="ImgPantry" class="borders_on" src="images/HomePagePics/Pantry.jpg" runat="server" />
0
 
LVL 19

Accepted Solution

by:
Albert Van Halen earned 400 total points
ID: 36487984
Alternatively you can use !important in your style rule like this :
.borders_on
{
    border: 3px solid #000000 !important;
    height: 100px;
    width: 200px;
}

Open in new window


Another option is to remove BorderStyle attribute (which will render the inline style of the element) of the asp:Image
0
 

Author Closing Comment

by:dyarosh
ID: 36488325
I awarded points to both responders but awarded more points to AblertVanHalen because his solution was easier to implement given the way I am doing things.  Thank you for your help.
0

Featured Post

Free Tool: Path Explorer

An intuitive utility to help find the CSS path to UI elements on a webpage. These paths are used frequently in a variety of front-end development and QA automation tasks.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

One of the pain points with developing AJAX, JavaScript, JQuery, and other client-side behaviors is that JavaScript doesn’t allow for cross domain request for pulling content. For example, JavaScript code on www.johnchapman.name could not pull conte…
In .NET 2.0, Microsoft introduced the Web Site.  This was the default way to create a web Project in Visual Studio 2005.  In Visual Studio 2008, the Web Application has been restored as the default web Project in Visual Studio/.NET 3.x The Web Si…

830 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question