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?

Answer 1

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/