By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
448,507 Members | 1,185 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 448,507 IT Pros & Developers. It's quick & easy.

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

P: n/a
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.

Dec 12 '06 #1
Share this Question
Share on Google+
3 Replies


P: n/a
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.
Dec 13 '06 #2

P: n/a

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.

Dec 14 '06 #3

P: n/a
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

Dec 18 '06 #4

This discussion thread is closed

Replies have been disabled for this discussion.