469,647 Members | 1,754 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 469,647 developers. It's quick & easy.

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

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
3 3013
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

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
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.

Similar topics

45 posts views Thread by Jordan Rastrick | last post: by
14 posts views Thread by JKop | last post: by
6 posts views Thread by Jim Lawton | last post: by
9 posts views Thread by Christian Eder | last post: by
4 posts views Thread by Mikael Olofsson | last post: by
68 posts views Thread by stasgold | last post: by
7 posts views Thread by jacek.dziedzic | last post: by
285 posts views Thread by Sheth Raxit | last post: by
reply views Thread by gheharukoh7 | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.