CODEWITHSUNDEEP
cssfirefoxbuttonpadding
PuffyChair
PuffyChair

Reputation: 137

Button text pushes away the padding in Firefox

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?

Upvotes: 3

Views: 1925

Answers (3)

Wladimir Palant
Wladimir Palant

Reputation: 57651

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/

Upvotes: 2

PuffyChair
PuffyChair

Reputation: 137

Found out how to make it work:

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

Upvotes: 0

Seb
Seb

Reputation: 100

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.

Upvotes: 0

Related Questions