Solved

adding an image to an image button using css

Posted on 2008-10-02
12
368 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:Saqib Khan
ID: 22627042
Try..

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

Author Comment

by:scm0sml
ID: 22627058
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:Saqib Khan
ID: 22627068
I dont see a "src/source" attribute for your image button.
0
Live: Real-Time Solutions, Start Here

Receive instant 1:1 support from technology experts, using our real-time conversation and whiteboard interface. Your first 5 minutes are always free.

 

Author Comment

by:scm0sml
ID: 22627370
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
ID: 22627872
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
ID: 22628082
couldnt get it working.

cant believe how much time ive spent trying to do something so simple :(
0
 
LVL 22

Expert Comment

by:prairiedog
ID: 22628121
You mean LInkButton does not work for you?
0
 

Author Comment

by:scm0sml
ID: 22628131
nope
0
 
LVL 22

Accepted Solution

by:
prairiedog earned 500 total points
ID: 22628169
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
ID: 22628241
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
ID: 22628411
Change .POWMoreInfo a:hover
To:
 .POWMoreInfo:hover
0
 

Author Closing Comment

by:scm0sml
ID: 31502488
top man!
0

Featured Post

Courses: Start Training Online With Pros, Today

Brush up on the basics or master the advanced techniques required to earn essential industry certifications, with Courses. Enroll in a course and start learning today. Training topics range from Android App Dev to the Xen Virtualization Platform.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
how to convert MM/dd/YYYY hh:mm:ss AM to YYYY-MM-dd datetime format by linq? 4 48
VB.Net - KeyPress Event 4 36
https://github.com/willowsystems/jSignature 11 46
VB.NET 1 21
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…
The article shows the basic steps of integrating an HTML theme template into an ASP.NET MVC project
In a recent question (https://www.experts-exchange.com/questions/28997919/Pagination-in-Adobe-Acrobat.html) here at Experts Exchange, a member asked how to add page numbers to a PDF file using Adobe Acrobat XI Pro. This short video Micro Tutorial sh…
With Secure Portal Encryption, the recipient is sent a link to their email address directing them to the email laundry delivery page. From there, the recipient will be required to enter a user name and password to enter the page. Once the recipient …

808 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