Solved

adding an image to an image button using css

Posted on 2008-10-02
12
365 Views
Last Modified: 2012-05-05
I have the following css class:
.POWMoreInfo
{
   background: url("../images/btn_info_org.png") top left no-repeat;
}

I then have the image button:
<asp:ImageButton ID="btnMoreInfo" runat="server" PostBackUrl="../Advertising.aspx" AlternateText="More Information" />            

in my code behind i set the css class of the button to use the class i have shown here.

This works but i also get an error image because i have not set imageurl for the button.

Is there a way around this?

I have attached a screenshot just to show what i mean.
example.jpg
0
Comment
Question by:scm0sml
  • 6
  • 4
  • 2
12 Comments
 
LVL 23

Expert Comment

by:adilkhan
Comment Utility
Try..

.POWMoreInfo
{
   background: url("<%=ResolveUrl("~")%>images/btn_info_org.png") top left no-repeat;
}
0
 

Author Comment

by:scm0sml
Comment Utility
its not a problem with the css. the image is showing from the css.

its the image button thats moaning
0
 
LVL 23

Expert Comment

by:adilkhan
Comment Utility
I dont see a "src/source" attribute for your image button.
0
 

Author Comment

by:scm0sml
Comment Utility
the question says it happens in the code behind.

this is the code to do it:
btnMoreInfo.CssClass = "POWMoreInfo"
0
 
LVL 22

Expert Comment

by:prairiedog
Comment Utility
Don't think you can do it with ImageButton. Try LinkButton instead.
If you do decide to use LinkButton, make sure you add display:block in your CSS.
0
 

Author Comment

by:scm0sml
Comment Utility
couldnt get it working.

cant believe how much time ive spent trying to do something so simple :(
0
Maximize Your Threat Intelligence Reporting

Reporting is one of the most important and least talked about aspects of a world-class threat intelligence program. Here’s how to do it right.

 
LVL 22

Expert Comment

by:prairiedog
Comment Utility
You mean LInkButton does not work for you?
0
 

Author Comment

by:scm0sml
Comment Utility
nope
0
 
LVL 22

Accepted Solution

by:
prairiedog earned 500 total points
Comment Utility
How about adding width and height in your CSS?
width:32px;
height:32px;
Change the numbers to match your actual image size. Remember, you will also need to add display:block; in your css.

.POWMoreInfo

{

	background:url("("../images/btn_info_org.png") top left no-repeat;

	display:block; 

	width:32px;

	height:32px;

}

Open in new window

0
 

Author Comment

by:scm0sml
Comment Utility
yeah ok that is now showing the image.

while u r on a roll can u see what is wrong with this?

.POWMoreInfo
{  
 background:url("../images/btn_info_org.png") top left no-repeat;
      display:block;
      width:98px;
      height:25px;

}

.POWMoreInfo a:hover
{  
    background:url("../images/btn_info_org2.png") top left no-repeat;
      display:block;
      width:98px;
      height:25px;
}

i have just changed the image name wanting it to show a different image when u hover over the button
0
 
LVL 22

Expert Comment

by:prairiedog
Comment Utility
Change .POWMoreInfo a:hover
To:
 .POWMoreInfo:hover
0
 

Author Closing Comment

by:scm0sml
Comment Utility
top man!
0

Featured Post

How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

Join & Write a Comment

Just a quick little trick I learned recently.  Now that I'm using jQuery with abandon in my asp.net applications, I have grown tired of the following syntax:      (CODE) I suppose it just offends my sense of decency to put inline VBScript on a…
It’s quite interesting for me as I worked with Excel using vb.net for some time. Here are some topics which I know want to share with others whom this might help. First of all if you are working with Excel then you need to Download the Following …
This video gives you a great overview about bandwidth monitoring with SNMP and WMI with our network monitoring solution PRTG Network Monitor (https://www.paessler.com/prtg). If you're looking for how to monitor bandwidth using netflow or packet s…
This demo shows you how to set up the containerized NetScaler CPX with NetScaler Management and Analytics System in a non-routable Mesos/Marathon environment for use with Micro-Services applications.

772 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

Need Help in Real-Time?

Connect with top rated Experts

14 Experts available now in Live!

Get 1:1 Help Now