How to achieve IE's (non-compliant) behaviour compliantly?

[wizofaus]

Hi,

I have a class for buttons which relies on IE's misinterpretation of
"overflow: visible" to set a minimum width - I.E. will automatically
horizontally expand any buttons whose text doesn't fit. This is
exactly the behaviour I want, but is non-standard, and Firefox simply
truncates the text (actually I thought it was supposed to spill outside
the button, but either way is useless).

I've tried using min-width under Firefox to get the same effect, but
with min-width it seems there is no way of centering the text
horizontally. Even if you do:

<button style="min-width:10em"><div
style="width:100%;background:red">Test</div></button>

You can see that the inner div is only the width of the word 'Test'.
In other words, it's as though "min-width" always adds padding to the
right to the parent control, instead of expanding the content area.

The same problem occurs with elements other than 'button' - in fact any
element that is normally an inline element has the same issue. Only
elements like DIV etc. that are normally block elements behave as I
expect here (I embedded a div in a table to test the effect of
min-width). Marking the button as a block element doesn't help.

Note sure if this is a Firefox issue, or a misunderstanding of the CSS
specs, but it seems crazy there's no way to do this. For the time
being I guess I won't bother with the minimum width under Firefox,
which means *all* my buttons are different sizes, as opposed to an
exceptional few with extra long text. And for hopefully obvious
reasons, I don't want to use one class for buttons with "short text"
and another for ones with "long text"; if nothing else, the pages are
intended to work in other languages in the future, but even if not it's
a maintenance headache anyway.

[Ben C]

On 2006-12-12, wi******@hotmail.com <wi******@hotmail.comwrote:

Hi,

I have a class for buttons which relies on IE's misinterpretation of
"overflow: visible" to set a minimum width - I.E. will automatically
horizontally expand any buttons whose text doesn't fit. This is
exactly the behaviour I want, but is non-standard, and Firefox simply
truncates the text (actually I thought it was supposed to spill outside
the button, but either way is useless).

I've tried using min-width under Firefox to get the same effect, but
with min-width it seems there is no way of centering the text
horizontally. Even if you do:

<button style="min-width:10em"><div
style="width:100%;background:red">Test</div></button>

You can see that the inner div is only the width of the word 'Test'.
In other words, it's as though "min-width" always adds padding to the
right to the parent control, instead of expanding the content area.

This does look like a Firefox issue. button is supposed to be display:
inline-block by default, which Firefox doesn't really support. But it
does allow you to set width and min-width on a button (which you can do
on inline blocks, but not on inlines), so there's some partial support
there. But if button really were proper display: inline-block then your
red background would extend to the whole width of the button.

The same problem occurs with elements other than 'button' - in fact any
element that is normally an inline element has the same issue. Only
elements like DIV etc. that are normally block elements behave as I
expect here (I embedded a div in a table to test the effect of
min-width). Marking the button as a block element doesn't help.

Note sure if this is a Firefox issue, or a misunderstanding of the CSS
specs, but it seems crazy there's no way to do this.

For the time being I guess I won't bother with the minimum width under
Firefox, which means *all* my buttons are different sizes, as opposed
to an exceptional few with extra long text. And for hopefully obvious
reasons, I don't want to use one class for buttons with "short text"
and another for ones with "long text"; if nothing else, the pages are
intended to work in other languages in the future, but even if not
it's a maintenance headache anyway.

So you want most of the buttons to have width set on them, the text
centered in those buttons, and buttons with exceptionally wide contents
to get a bit wider?

How about

<button>
<div style="min-width: 10em; text-align: center">
OK
</div>
</button>

This seems to work for me in as it should in Firefox.

[wizofaus]

Ben C wrote:

For the time being I guess I won't bother with the minimum width under
Firefox, which means *all* my buttons are different sizes, as opposed
to an exceptional few with extra long text. And for hopefully obvious
reasons, I don't want to use one class for buttons with "short text"
and another for ones with "long text"; if nothing else, the pages are
intended to work in other languages in the future, but even if not
it's a maintenance headache anyway.

So you want most of the buttons to have width set on them, the text
centered in those buttons, and buttons with exceptionally wide contents
to get a bit wider?

How about

<button>
<div style="min-width: 10em; text-align: center">
OK
</div>
</button>

This seems to work for me in as it should in Firefox.

Hmm, thanks, but it's hardly elegant - I have a *lot* of buttons!
Guess it will do for now.

[fredo]

wi******@hotmail.com wrote:

I have a class for buttons which relies on IE's misinterpretation of
"overflow: visible" to set a minimum width - I.E. will automatically
horizontally expand any buttons whose text doesn't fit. This is
exactly the behaviour I want, but is non-standard, and Firefox simply
truncates the text (actually I thought it was supposed to spill outside
the button, but either way is useless).

Useless is right. A possible solution is here:

http://www.simple-nude.com/button-like-div.html

Please ignore the extraneous borders in the examples.

Because of the frustrations I've had with buttons, I just don't use
them anymore. Instead, I use divs that appear and act like buttons.
Maybe you can use some of the ideas on the solution page. The main
things are to (1) make sure the entire surface of the div is
selectable; and (2) get min-width to treat the button label properly.

HTH.

-- fredo