I must be barking up the wrong tree because I have found nothing in the internet about this. I'd like to know how to achieve a server control that renders something like this...

<button><img src="new.gif" /> New</button>

I can't seem to get anywhere with it though. What gives? 

The regular button just shows text - the ImageButton does exactly what the button does, but you can use an image for it's GUI representation.

So, are you saying that you want a button to show an image AND text on the button?

The asp:ImageButton control, perhaps? Alternatively you can add an image to a HyperLink using it's ImageUrl property.

If you really want both text and an image on a button then you'll have to write your own control as it's very non-standard.

Yes, exactly.

I don't understand why it is non-standard. Is it literally not supported by the XHTML standard? I would understand if that was the case. But both Firefox and IE6 render my example perfectly. I realize that doesn't mean it's valid HTML, but it makes me think that it might be. Am I the only person that wants an image on a button, as well as text, but doesn't want to render the entire representation of it? We've had this in WinForms since .Net 1.0. And it's doable, and maybe valid, in HTML. So why not?

There are a lot of things doable in WinForms that are either not possible or quite difficult to accomplish in WebForms - the web platform - it's basically the nature of the beast, as it is today.

johndehope3:

I don't understand why it is non-standard. Is it literally not supported by the XHTML standard?

What is the (X)HTML you are using that is rendering? If it's anything like:

<input type="button" text="Button" ><img src="image.gif" /></input>

then that is totally invalid XHTML. The web is competetly different to Windows forms.

I realize that the web and winforms are totally different. My point is that if it's trivial and doable on winforms, and it has been for a long time, and it's trivial and doable in HTML (standards aside) then shouldn't we have it by now? If it was rocket science to accomplish, I'd understand, but evidently it isn't.

I was aiming for something like...

<button><img ...> Text</button>
 

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
 

johndehope3:

I realize that the web and winforms are totally different.

I'm not quite sure you do, to be honest, from what you are saying.

My point is that if it's trivial and doable on winforms, and it has been for a long time, and it's trivial and doable in HTML (standards aside) then shouldn't we have it by now?

You can't just say "standards aside" as if that is a minor point. Whether it's doable on winforms is totally irrelevent - Microsoft did not create (X)HTML. The standards for web markup are goverened by The World Wide Web Consortium. All Asp .NET controls HAVE to render valid HTML markup otherwise there is no guarantee how a browser will render it now or in the future. You can't just brush standards aside as if they don't matter. The web isn't a single platform running on one operating system - it encompasses many different browsers, some of which (such as screen readers or mobile browsers may not even render images).

To do what you want to do in ASP .NET you'd need to do something like this:

<asp:LinkButton ID="LinkButton1" runat="Server" OnClick="ButtonClick_Event">Text</asp:LinkButton>
<asp:ImageButton ID="ImageButton1" runat="Server" ImageUrl="image.gif" OnClick="ButtonClick_Event"></asp:ImageButton>

You could then write a custom server or user control to encapsulate those controls so they only expose the properties you wish to set once, such as the event when clicked.

johndehope3:

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 they state clearly 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.

Anyone take time to make a control for this? I too need a link button with both an image and text

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!

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 {

margin:0px 0px 0px 0px;
background:url(../../images/li_bg1.jpg) left center no-repeat;
padding: 0em 1.2em;
font: 8pt "tahoma";
color: #336699;
text-decoration: none;
font-weight: normal;
letter-spacing: 0px;

                               }

a.lnkSubmit:link {

margin:0px 0px 0px 0px;
background:url(../../images/li_bg1.jpg) left center no-repeat;
padding: 0em 1.2em;
font: 8pt "tahoma";
color: #336699;
text-decoration: none;
font-weight: normal;
letter-spacing: 0px;

                               }

a.lnkSubmit:visited {

margin:0px 0px 0px 0px;
background:url(../../images/li_bg1.jpg) left center no-repeat;
padding: 0em 1.2em;
font: 8pt "tahoma";
color: #336699;
text-decoration: none;
font-weight: normal;
letter-spacing: 0px;

                               }

a.lnkSubmit:hover {

margin:0px 0px 0px 0px;
background:url(../../images/li_bg1.jpg) left center no-repeat;
padding: 0em 1.2em;
font: 8pt "tahoma";
color: #000000;
text-decoration: none;
font-weight: normal;
letter-spacing: 0px;

                               }

 

Enjoy!

DotNetSlave.com