Geek asks and answers

Button text repels residence 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 it padding-leftworks fine until I set the width by cutting out the text in the middle that discards padding-left. This is a Firefox problem just in time. Works well in all other browsers. Real-time example: http://jsfiddle.net/aB25a/1

Any ideas?

+3
source share
3 answers

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

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

And styles:

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

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

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

+2
source

margin-left padding-left, CSS.

width:auto; .

0

Learned how to make it work:

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

More articles:


All Articles