Although the WebForm Designer doesn't display it properly, you can legitimately (as in, without errors) put an <asp:image control inside a <asp:linkbutton control using the source view. It will generate valid HTML consisting of an anchor link <a with an
image <img inside it. Of course you don't have much control over where the text goes in relation to the image (the image comes after if you use the Text= attribute), but you can control that further if you place the text between the tags. The biggest caveat
being that if you set the Text property from the code-behind, you also loose the image. But then, you can also put a <asp:literal or equivalent control inside the <asp:linkbutton and this gives you control over position and the text literal via code-behind
(again, just don't set the Text= attribute of the <asp:linkbutton).
Hopefully this helps others who read this as I'm sure you've figured something out by now.
Yes dotnetslave's solution is topnotch. Worked for me in IE and Firefox too. Thankyou.
Apart from finding Photoshop's Text tool to be very poor, my reason for needing this is because I am creating a CMS in which my customers will be creating their own buttons, therefore I need to apply text to a button programmatically, and I didn't fancy
having to use big ugly default buttons.
I had automatically assumed that a LinkButton with its CSS background-image set was the way to go, but now IE6 is rendering my linkbutton as a Button (the little grey guy with the 3D look) and not showing the background image.
Sorry that I didn't post this earlier. And yes, you're right. The issue had been that we used a Button with an image for the background in CSS, which renders as expected in Firefox and possibly in IE8, but as a button in IE7. ImageButton works fine in both.
The only thing to watch out for is using a ButtonField of type Image in a gridview; in IE7 (and possibly other IEs), this causes a double postback for RowCommand when the user clicks on the button.
etclermont
Member
2 Points
1 Post
Re: Button With Image And Text
Feb 25, 2008 05:02 PM|LINK
Although the WebForm Designer doesn't display it properly, you can legitimately (as in, without errors) put an <asp:image control inside a <asp:linkbutton control using the source view. It will generate valid HTML consisting of an anchor link <a with an image <img inside it. Of course you don't have much control over where the text goes in relation to the image (the image comes after if you use the Text= attribute), but you can control that further if you place the text between the tags. The biggest caveat being that if you set the Text property from the code-behind, you also loose the image. But then, you can also put a <asp:literal or equivalent control inside the <asp:linkbutton and this gives you control over position and the text literal via code-behind (again, just don't set the Text= attribute of the <asp:linkbutton).
Hopefully this helps others who read this as I'm sure you've figured something out by now.
srinivas.vel...
Member
2 Points
6 Posts
Re: Button With Image And Text
Apr 03, 2008 06:57 AM|LINK
It is not working in Mozilla Fire Fox
engxladso
Member
19 Points
17 Posts
Re: Button With Image And Text
Jul 17, 2008 06:53 PM|LINK
Yes dotnetslave's solution is topnotch. Worked for me in IE and Firefox too. Thankyou.
Apart from finding Photoshop's Text tool to be very poor, my reason for needing this is because I am creating a CMS in which my customers will be creating their own buttons, therefore I need to apply text to a button programmatically, and I didn't fancy having to use big ugly default buttons.
DraconianDev...
Member
109 Points
63 Posts
Re: Button With Image And Text
Dec 04, 2008 11:07 AM|LINK
Have you had the answer for this yet?
because I am doing a very similar thing.
The link button with css class looks good enough to me.
even tried it and it works, But i really need a BUTTON which can have an IMAGE in the background, and still LOOK LIKE BUTTON.
Anything that can go wrong, will go wrong. but dont let that wipe the smile off your face :)
rmdw
Participant
826 Points
1240 Posts
Re: Button With Image And Text
Dec 04, 2008 04:17 PM|LINK
Here's a toolbar with the buttons I've created:
Note: Since I control the appearance of both the enabled and disabled state of each button, I can make the button look anyway I wish.
Robert
Vancouver, BC
Technical Blog
Pocket Pollster
Golda972
Member
332 Points
66 Posts
Re: Button With Image And Text
Nov 29, 2009 12:03 PM|LINK
Much later, but facing a similar issue:
I had automatically assumed that a LinkButton with its CSS background-image set was the way to go, but now IE6 is rendering my linkbutton as a Button (the little grey guy with the 3D look) and not showing the background image.
hinaAsp.Net
Member
246 Points
125 Posts
Re: Button With Image And Text
Dec 09, 2009 08:06 AM|LINK
i also came across same situation, i placed a button, then linked it to a css with background, but its not showing the image.
If my reply helped you, dont forget to mark it as "Answer"
cfaddis
Member
2 Points
1 Post
Re: Button With Image And Text
Jan 05, 2010 09:44 PM|LINK
It's not that hard....
ASP.net VS HTML
Golda972
Member
332 Points
66 Posts
Re: Button With Image And Text
Jan 06, 2010 02:20 AM|LINK
Sorry that I didn't post this earlier. And yes, you're right. The issue had been that we used a Button with an image for the background in CSS, which renders as expected in Firefox and possibly in IE8, but as a button in IE7. ImageButton works fine in both.
The only thing to watch out for is using a ButtonField of type Image in a gridview; in IE7 (and possibly other IEs), this causes a double postback for RowCommand when the user clicks on the button.
sanketpathre
Member
317 Points
88 Posts
Re: Button With Image And Text
Jan 06, 2010 03:34 AM|LINK
Two possibilitie
1. You want to add back-ground image to button
2. You want just Image button
1. you can use css to add back-ground image to button
.BlueButton{
background-image: url('images/tile_bluebg.jpg');
background-repeat: repeat-x;
padding:5px;
}
<asp:Button ID="btnTest" CssClass="BlueButton" Text="Submit"/>
Define .BlueButton CSS in any Css file or add in <style> tag of page. Make sure that image exists at specified location.
2.