button element with image in it

[Marek Mänd]

Can the

<button><img></button>

mutated via CSS so, that the inner image of <BUTTON>
would entirely visually become the button itsself - I mean without the
outer elements borders and so...

I tried removing paddings and borders and margins but this wouldnt seem
to help. in MSIE, Mozilla and Opera - there still some pieces of the
button are left to be seen and te inner image wouldnt cover the whole
area. Using the <img> as an background image for buttons isnt an option
because it would crate a CSS bloat declarations.

[Toby Inkster]

Marek Mänd wrote:

I tried removing paddings and borders and margins but this wouldnt seem
to help. in MSIE, Mozilla and Opera - there still some pieces of the
button are left to be seen

http://www.w3.org/TR/CSS21/conform.html#conformance

| CSS2.1 does not define which properties apply to form controls [...] or
| how CSS can be used to style them. User agents may apply CSS properties
| to these elements. Authors are recommended to treat such support as
| experimental.

--
Toby A Inkster BSc (Hons) ARCS
Contact Me ~ http://tobyinkster.co.uk/contact

[Jukka K. Korpela]

Marek Mänd <ca********@mail.ee> wrote:

Can the

<button><img></button>

[be] mutated via CSS
Absolutely maybe. But the first point to note is that the <button>
element is essentially unreliable in authoring for the WWW, due to lack
of correct support in browsers.

Use a submit button instead. Or, if you insist, an image submit button,
see http://www.cs.tut.fi/~jkorpela/forms/imagebutton.html
Test that the form works. _Then_ start considering styling.
so, that the inner image of <BUTTON>
would entirely visually become the button itsself
Then there's hardly any point in using <button>, instead of
<input type="image">.
Using the <img> as an background image for buttons isnt
an option because it would crate a CSS bloat declarations.

That statement does not quite parse. But setting a background image for a
normal submit button, <input type="submit">, is of course one possibility
in styling. It may confuse the user, since it won't really _look like_ a
submit button then, but this problem is shared by any attempt to use an
image for a button.

--
Yucca, http://www.cs.tut.fi/~jkorpela/

[Marek Mänd]

Jukka K. Korpela wrote:

Marek Mänd <ca********@mail.ee> wrote:

Can the
<button><img></button>
[be] mutated via CSS

Use a submit button instead. Or, if you insist, an image submit button,
see http://www.cs.tut.fi/~jkorpela/forms/imagebutton.html
Test that the form works. _Then_ start considering styling.

so, that the inner image of <BUTTON>
would entirely visually become the button itsself

Then there's hardly any point in using <button>, instead of
<input type="image">.

Well IMHO there could be some advantages:
Consider situation:
a saved pure html page without images and without stylesheets

<button type="button"><img src="unexistant"><span
style="display:none">commandbutton spare label for offsite
use</span></button>

would perform better than a <input type="image" src="unavailable">
with a tooltip. Besides tooltips everywhere in the document can be quite
frustrating. Especially amuses me all these CSS websites, that use
acronym and abbr elements quite often - one cannot even move the mouse
without annoying tooltips.... I am against flashy title tooltips, there
is a status bar for that.

Sadly <input type="image"> is by constitution about submitting form,
not as <button type="button">... Yes it can be WAd via JS, but thats
overhead.

Using hyperlinks for simulating buttons that do something on a web page
using JS - I find this approach not right because of I think of URLs as
of a way to navigate to a different page. Ofcourse when smb wants
Netscape3 compatibility then this is the way ;D

Using the <img> as an background image for buttons isnt
an option because it would crate a CSS bloat declarations.

That statement does not quite parse. But setting a background image for a
normal submit button, <input type="submit">, is of course one possibility
in styling.

Well those images for buttons would actually be different in web
application, thus for earch image a style class is too much. As icons
are much easily to be changed in serverside scripting templates than in
CSS (which just adds too much complexiti and dependancies)

[Christoph Paeper]

Marek Mänd <ca********@mail.ee>:

a saved pure html page without images and without stylesheets

<button type="button"><img src="unexistant"><span
style="display:none">commandbutton spare label for offsite
use</span></button>

would perform better than a <input type="image" src="unavailable">
Oh please, don't act as if you had never heard of the 'alt' attribute (of
'img' and 'input' as well), nor understood it.
Sadly <input type="image"> is by constitution about submitting form,
not as <button type="button">...

I haven't checked, but hasn't 'button' to be a descendant of a 'form', too?

--
"Right way turning, Listen we are learning.
Head's full of noise, Chicken's got no choice.
Heads are rollin', Chicken blood is stolen.
The rest of the chicken wants a picke-nicken" Guano Apes - We use the Pain

[Jukka K. Korpela]

Marek Mänd <ca********@mail.ee> wrote:

Then there's hardly any point in using <button>, instead of <input
type="image">.
Well IMHO there could be some advantages:

You should consider the sure disadvantages first.
Consider situation:
a saved pure html page without images and without stylesheets
Is this about authoring for the WWW, which is the topic in
comp.infosystems.www.authoring groups? Well, maybe, as long as you
consider how to make pages that work on the WWW without images and style
sheets too. (How about working without JavaScript?)
<button type="button"><img src="unexistant"><span
style="display:none">commandbutton spare label for offsite
use</span></button>

would perform better than a <input type="image" src="unavailable">
with a tooltip.
No reason to mess around with tooltips.

They both perform worse than <input type="submit">.

And <input type="image"> works on most browsers if you specify adequately
the attributes that might be used as textual replacements for the image
(alt, name, value).
Besides tooltips everywhere in the document can be
quite frustrating.
I did not mention any tooltips. Where did _you_ get the idea of putting
them everywhere?
I am against flashy title
tooltips, there is a status bar for that.
No it isn't. The status bar is for the browser to show the status.
Disturbing that classifies a page as nerdishly childish.
Sadly <input type="image"> is by constitution about submitting form,
not as <button type="button">...
You didn't mention what kind of a button you have. On the WWW, it is best
to try and make all buttons submit buttons so that you can have a server-
side backup, even if you normally use client-side scripting for the
actions invoked by the buttons. If that's not feasible, make them look as
much like normal default-style buttons as possible. And that's quite
possible: you simply use <input type="button">, naturally in code that
has been generated by client-side JavaScript code and with an explanation
in a <noscript> element, to avoid frustrating users that are using
JavaScript-disabled browsers. The key point is to do nothing in order to
change the appearance, to maximize the odds that people understand
buttons as buttons and not as fancy decoration or something.
Yes it can be WAd via JS, but thats
overhead.
Yr abbrs r probly bout something off-topic.
Well those images for buttons would actually be different in web
application, thus for earch image a style class is too much. As icons
are much easily to be changed in serverside scripting templates than
in CSS (which just adds too much complexiti and dependancies)

Sorry, that does not parse either. If you had originally posted a URL
that demonstrates the context and problem, maybe some specific advice
could have been given.

--
Yucca, http://www.cs.tut.fi/~jkorpela/

[Jukka K. Korpela]

Christoph Paeper <ch**************@nurfuerspam.de> wrote:

I haven't checked, but hasn't 'button' to be a descendant of a
'form', too?

No. All form fields may syntactically appear outside <form> elements too.
Mostly it does not make sense, but there are special cases like
<input type="button"> or <button type="button"> without server-side
backup. However some old browsers fail to render form fields outside
<form> elements.

--
Yucca, http://www.cs.tut.fi/~jkorpela/