Well, frankly, they are completely wrong. The W3C lays down the spec for HTML and [url=http://www.w3.org/TR/html401/interact/forms.html#h-17.5]they state clearly[/url] that you cannot have an image tag within a button tag. They even explicitly point this out
on the link:
LLEGAL EXAMPLE:
The following is not legal HTML.
<BUTTON>
<IMG src="foo.gif" usemap="...">
</BUTTON>
You may, be able to get away with this in strict XHTML, as it's more flexible, but it's not something that can be guaranteed to work across all browsers.
I agree a custom server or user control looks like what I need. But I honestly don't have the time to do it. I was hoping somebody would have already run up against this before. It seems so obvious to me. I just want a control that generates some perfectly
valid HTML that looks very nice. It shouldn't be so hard.
I am working on a custom control that will do it. If I get past the last hurdle (see my recent post regarding custom controls and "potentially dangerous Request.Form..") then I'll post it on CodeProject. In short, the rendered button tag tries to put all of
it's content (in this case that includes an HTML IMG tag) into the postback form, which asp.net interprets as a hacking attempt. Hopefully somebody out here will know how to fix it, and we can all have ImageTextButtons!
I followed your link, "they clearly state", and it appears to me you have mis-read what they state. Just above where your link points is the following example which clearly shows <img> elements within a <button> element:
The following example expands a previous example, but creates submit and
reset buttons with
BUTTON instead of
INPUT. The buttons contain images by way of the
IMG element.
It is illegal to associate an image map with an IMG that appears as the contents of a BUTTON element.
ILLEGAL EXAMPLE: The following is not legal HTML. <BUTTON> <IMG src="foo.gif" usemap="..."> </BUTTON>
Please note that what is illegal about this example is the use of an image map (usemap="..."). Not the use of an <img> element.
Nevertheless, the ASP.NET button controls emit an <input> element, NOT a <button> element. So the point is moot. One must develop a custom control. If someone has one, I'd be interested in it as well...
I'm arriving here long after the last posting but just wanted to thank "dotnetslave" for cluing me in to the solution I was looking for. With that said, it took a LOT further customization to get the solution I was looking for. But I'm very pleased with
the result. I now have 4 buttons on a floating command bar that look great and have both an image and a label - in my case, these are: Add, Move, Remove, & Save. When the user hovers over a button then the image gently shifts, to provide feedback that it
is the one being selected.
One interesting side-effect of the approach is that you cannot use Enabled = false. So I had to build another 4 CSS styles and then change these in code at the appropriate time.
As I've said, I put a LOT of work into this so if I can save someone else some time in the future, then do feel free to drop me a line.
Connect
Contributor
2304 Points
455 Posts
Re: Button With Image And Text
Sep 06, 2006 07:50 PM|LINK
According to About.Com the BUTTON tag is valid XHTML and the IMG element is valid within a BUTTON...
http://webdesign.about.com/od/htmltags/p/bltags_button.htm
Well, frankly, they are completely wrong. The W3C lays down the spec for HTML and [url=http://www.w3.org/TR/html401/interact/forms.html#h-17.5]they state clearly[/url] that you cannot have an image tag within a button tag. They even explicitly point this out on the link:
LLEGAL EXAMPLE:
The following is not legal HTML.
<BUTTON>
<IMG src="foo.gif" usemap="...">
</BUTTON>
You may, be able to get away with this in strict XHTML, as it's more flexible, but it's not something that can be guaranteed to work across all browsers.
johndehope3
Member
50 Points
10 Posts
Re: Button With Image And Text
Sep 06, 2006 07:58 PM|LINK
nseidenfeld
Member
10 Points
2 Posts
Re: Button With Image And Text
Sep 11, 2006 11:51 AM|LINK
johndehope3
Member
50 Points
10 Posts
Re: Button With Image And Text
Sep 12, 2006 05:52 PM|LINK
dotnetslave....
Member
15 Points
3 Posts
Re: Button With Image And Text
Oct 05, 2006 03:20 AM|LINK
Adding an image to a button, is easy.
First you need to create you link button. Lets say:
<asp:LinkButton CssClass="lnkSubmit" ID="lnkButton" runat="server">SUBMIT</asp:LinkButton>
Then you specify a CssClass.
I have created a style sheet with the following:
You can add this to any hyperlink as well.
a.lnkSubmit:active {
a.lnkSubmit:link {
a.lnkSubmit:visited {
a.lnkSubmit:hover {
Enjoy!
DotNetSlave.com
dotnetslave....
Member
15 Points
3 Posts
Re: Button With Image And Text
Oct 05, 2006 03:20 AM|LINK
Adding an image to a button, is easy.
First you need to create you link button. Lets say:
<asp:LinkButton CssClass="lnkSubmit" ID="lnkButton" runat="server">SUBMIT</asp:LinkButton>
Then you specify a CssClass.
I have created a style sheet with the following:
You can add this to any hyperlink as well.
a.lnkSubmit:active {
a.lnkSubmit:link {
a.lnkSubmit:visited {
a.lnkSubmit:hover {
Enjoy!
DotNetSlave.com
silverfox194...
Member
12 Points
3 Posts
Re: Button With Image And Text
Jul 27, 2007 06:01 PM|LINK
johndehope3,
I followed your link, "they clearly state", and it appears to me you have mis-read what they state. Just above where your link points is the following example which clearly shows <img> elements within a <button> element:
The following example expands a previous example, but creates submit and reset buttons with BUTTON instead of INPUT. The buttons contain images by way of the IMG element.
thiagofmaced...
Member
2 Points
1 Post
Re: Button With Image And Text
Sep 28, 2007 02:18 PM|LINK
That's how I made my Image & Text button, where the div's click call the aspLinkButton click:
<div id="dvBtnApprove" runat="server" style="cursor:pointer; margin-left:8px;"
onclick="document.getElementById('<%=btnApprove.ClientID%>').click();" title="Aprovar Pedido">
<img src="App_Themes/Images/delivery.gif" style="float:left; margin-right:5px;" alt="" />
<asp:LinkButton ID="btnApprove" Text="Aprovar<br />Pedido" runat="server" ForeColor="Gray"></asp:LinkButton>
</div>
sirpingalot
Member
70 Points
40 Posts
Re: Button With Image And Text
Oct 10, 2007 06:35 PM|LINK
You can actually build a Image button with text with the plain old <asp:Button> and some styling. Here's how I managed to do it
<asp:button id="myButton" style="background-image:url('Images/ButtonImage.ico'); background-color:Transparent; cursor:hand; background-repeat:no-repeat; background-position:left; padding-left:15px;" Runat="server" Height="25px" BorderStyle=None Text="ButtonText" Width="50px" />
That's it.
Hope it helps
rmdw
Participant
826 Points
1240 Posts
Re: Button With Image And Text
Feb 02, 2008 03:52 AM|LINK
I'm arriving here long after the last posting but just wanted to thank "dotnetslave" for cluing me in to the solution I was looking for. With that said, it took a LOT further customization to get the solution I was looking for. But I'm very pleased with the result. I now have 4 buttons on a floating command bar that look great and have both an image and a label - in my case, these are: Add, Move, Remove, & Save. When the user hovers over a button then the image gently shifts, to provide feedback that it is the one being selected.
One interesting side-effect of the approach is that you cannot use Enabled = false. So I had to build another 4 CSS styles and then change these in code at the appropriate time.
As I've said, I put a LOT of work into this so if I can save someone else some time in the future, then do feel free to drop me a line.
Robert W.
Vancouver, BC
Technical Blog
Pocket Pollster