Improve company productivity with a Business Account.Sign Up

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 284
  • Last Modified:

CSS not working with ASP:Image

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
dyarosh
Asked:
dyarosh
  • 2
2 Solutions
 
ivan_vaguninCommented:
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
 
ivan_vaguninCommented:
You can use server <img> instead of <asp:Image>:
<img id="ImgPantry" class="borders_on" src="images/HomePagePics/Pantry.jpg" runat="server" />
0
 
Albert Van HalenAnalyst developerCommented:
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
 
dyaroshAuthor Commented:
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
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Get expert help—faster!

Need expert help—fast? Use the Help Bell for personalized assistance getting answers to your important questions.

  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now