Button text pushes away the padding in Firefox

Question

Markup:

<input type="button" value="random text random text random text random text random text"
       style="padding-left:20px; text-align:left; width:100px;" />

Here padding-left works fine until I set the width, chopping the text off in the middle, which pushes padding-left away. This is a Firefox problem only btw. Works fine in all other browsers. Live example: http://jsfiddle.net/aB25a/1

Any ideas?

So the point is that Firefox tries to center the the text in the button, including allowing it to overflow into the left padding. It turns out that some sites rely on this behavior; that's why it was implemented. — Boris Zbarsky, May 23 '12 at 06:54
Thanks for the info Boris. Do you know of any way to prevent this from happening? — PuffyChair, May 23 '12 at 07:17

score 2 · Accepted Answer · answered May 23 '12 at 13:47

You should use the <button> element, this gives you more control over what happens with its contents:

<button class="wrong">
  <span>this pushes text to the left, ignoring padding</span>
</button>

And the styles then are:

.wrong {
    width: 100px;
    overflow: hidden;
}

.wrong span {
    margin-left:30px;
    text-align: left;
    white-space: nowrap;
}

Example that should work in all browsers: http://jsfiddle.net/p8mg8/1/

Seb · Answer 2 · 2012-05-22T15:59:37.503

0

try using margin-left instead of your padding-left, also I recommend to use classes and CSS files.

Set width:auto;, or at some value.

edited May 22 '12 at 15:59

answered May 22 '12 at 15:54

Seb

100
6

That's where it goes wrong. =) Here is the jsfiddle link: http://jsfiddle.net/aB25a/1/ – PuffyChair May 22 '12 at 16:00
`width:auto;` instead of `width:100px` :) – Seb May 22 '12 at 16:01
but what if I need the button to be 100px? – PuffyChair May 22 '12 at 16:04
than it cannot have this much text :) Also you can surround it with another Div with `width:100px;` so it will be cut off anyway. – Seb May 22 '12 at 16:07
Yupp, they're pretty small buttons :) I apologize if I'm missing something, but that results in this http://jsfiddle.net/aB25a/2/ – PuffyChair May 22 '12 at 16:18
because you have too much text. – Seb May 22 '12 at 16:29
Ok, but the text in my buttons are long and needs to be hidden like I've shown. It works exactly like I want it to in other browsers. – PuffyChair May 22 '12 at 22:40
Here is an answer I previously wrote which should aid Sebs answer regarding margin over padding - http://stackoverflow.com/a/10701790/1160747 – Rick Donohoe May 22 '12 at 15:57

score 0 · Answer 3 · answered May 23 '12 at 07:41

0

Found out how to make it work:

input[type="button"]::-moz-focus-inner { margin-left:20px };

answered May 23 '12 at 07:41

PuffyChair

127
12

Button text pushes away the padding in Firefox

3 Answers3