Solved

CSS not working with ASP:Image

Posted on 2011-09-06
4
276 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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: IP Lookup

Get more info about an IP address or domain name, such as organization, abuse contacts and geolocation.

One of a set of tools we are providing to everyone 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

Suggested Solutions

IntroductionWhile developing web applications, a single page might contain many regions and each region might contain many number of controls with the capability to perform  postback. Many times you might need to perform some action on an ASP.NET po…
User art_snob (http://www.experts-exchange.com/M_6114203.html) encountered strange behavior of Android Web browser on his Mobile Web site. It took a while to find the true cause. It happens so, that the Android Web browser (at least up to OS ver. 2.…
A short tutorial showing how to set up an email signature in Outlook on the Web (previously known as OWA). For free email signatures designs, visit https://www.mail-signatures.com/articles/signature-templates/?sts=6651 If you want to manage em…
In an interesting question (https://www.experts-exchange.com/questions/29008360/) here at Experts Exchange, a member asked how to split a single image into multiple images. The primary usage for this is to place many photographs on a flatbed scanner…

734 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