button element in Internet Explorer has too much left/right space when its text is long

[David]

copy and paste the following in a new html file and see it in IE:
<form action="">

<button>Button1</button>

<br>

<button>ButtonButtonButton11</button>

</form>
you will find that the left and right space of the second button is too
much
(in my opinion). if you run it in Firefox, you will the space is the
same for both
buttons.

is this a IE bug? How to make it appear the same way as in Firefox?

thanks!

[Jukka K. Korpela]

David wrote:

you will find that the left and right space of the second button is too
much (in my opinion).
If you say so. But there's no particular reason why a browser should
follow your opinion rather than someone else's.
is this a IE bug?

It is an IE bug that it uses black color for text by default?

Anyway, why would that matter? The _functionality_ of <button> in IE is
seriously broken, and even the _idea_ of <button> (to make buttons look
whatever each author thinks they should like) is questionable. Form
controls should follow the principle "form follows function".

[Els]

Jukka K. Korpela wrote:

David wrote:

you will find that the left and right space of the second button is too
much (in my opinion).

If you say so. But there's no particular reason why a browser should
follow your opinion rather than someone else's.

is this a IE bug?

It is an IE bug that it uses black color for text by default?

Anyway, why would that matter? The _functionality_ of <button> in IE is
seriously broken, and even the _idea_ of <button> (to make buttons look
whatever each author thinks they should like) is questionable. Form
controls should follow the principle "form follows function".

The same thing happens on input elements (the button type) too though.
The more text on it, the more extra space is used on the button.
IIRC setting a width helps, but that must be a width in ems though,
because when enlarging the text the button won't expand naturally like
when you leave the width alone, and the text will be cut off.

--
Els http://locusmeus.com/
Sonhos vem. Sonhos vão. O resto é imperfeito.
- Renato Russo -

[Jukka K. Korpela]

Els <el*********@tiscali.nl> wrote:

The same thing happens on input elements (the button type) too though.
The more text on it, the more extra space is used on the button.
IIRC setting a width helps, but that must be a width in ems though,
because when enlarging the text the button won't expand naturally like
when you leave the width alone, and the text will be cut off.

There's a much simpler solution: don't put much text into a button.
This is useful for clarity and for useability. A button should be simple and
look simple, and the text in it should be concise, typically one verb.
Any explanations that might be needed should be given in normal text before
the button.

--
Yucca, http://www.cs.tut.fi/~jkorpela/
Pages about Web authoring: http://www.cs.tut.fi/~jkorpela/www.html

[Els]

Jukka K. Korpela wrote:

Els <el*********@tiscali.nl> wrote:

The same thing happens on input elements (the button type) too though.
The more text on it, the more extra space is used on the button.
IIRC setting a width helps, but that must be a width in ems though,
because when enlarging the text the button won't expand naturally like
when you leave the width alone, and the text will be cut off.

There's a much simpler solution: don't put much text into a button.
This is useful for clarity and for useability. A button should be simple and
look simple, and the text in it should be concise, typically one verb.
Any explanations that might be needed should be given in normal text before
the button.

Good point :-)

--
Els http://locusmeus.com/
Sonhos vem. Sonhos vão. O resto é imperfeito.
- Renato Russo -