910418 - Firefox button elements lose horizontal padding when width is reduced

Status: RESOLVED INVALID

(Core :: Layout: Form Controls, defect)

Description

[Perelandric]

User Agent: Mozilla/5.0 (X11; Ubuntu; Linux i686; rv:23.0) Gecko/20100101 Firefox/23.0 (Beta/Release)
Build ID: 20130803193103

Steps to reproduce:

Create `<input type=submit value=foobar>` or `<button>foobar</button>` element.

Set CSS, with `width` set to a value less than the natural width of the text, and `padding` set to some visible setting:

input, button {
    width: 30px;
    padding: 20px;
    border: 2px dashed orange;
    display: block;
    font-family: monospace;
    font-size: 18px;
}


demo: http://jsfiddle.net/wJy5a/


Actual results:

padding-left disappears so that text is no longer offset from left border.


Expected results:

padding-left should have remained so that text is offset from left border by 20px.

Works as expected in Google Chrome.

Comment 1

[Boris Zbarsky [:bzbarsky]]

This is purposeful: the text is centered within the padding-box, not the content-box.  This gives much better layout on many pages that style normal buttons to be too narrow.

Comment 2

[Perelandric]

Given that Chrome and IE 7/8/9/10 do honor the padding, wouldn't it be fairly safe to assume that such narrow buttons will have their padding adequately adjusted?

As a side note, I thought perhaps `-moz-box-sizing: content-box;` would override the `padding-box` behavior, but it does not. It only adjusts the size to consider the padding.

Comment 3

[Boris Zbarsky [:bzbarsky]]

> wouldn't it be fairly safe to assume that such narrow buttons will have their padding
> adequately adjusted?

IE does in fact do something similar.  Compare these two buttons in IE:

<input type="button" value="M"
       style="-moz-appearance: none; appearance: none; border: 2px dashed orange">
<input type="button" value="M"
       style="width: 12px; -moz-appearance: none; appearance: none; border: 2px dashed orange">

Note that in the second one the left-padding has been reduced.  Now in IE's case it seems like that padding is some sort of weird non-CSS padding (in that setting padding-left to 0 does _not_ make it go away).  In Gecko it's normal CSS padding.  This case, with no padding styles at all and over-narrow buttons is what the current Gecko code aims to make readable; when we accidentally broke it in 2002 (bug 180085) people noticed immediately.

Comment 4

[Perelandric]

I don't see the behaviors you describe in IE. The padding setting (or its absence) seems to work as expected. Setting `padding-left: 0` eliminates the padding.

Not sure why we're getting a difference in outcome. I tested in IE8/9/10.

In any case, it seems that this will not be fixed.

Comment 5

[Boris Zbarsky [:bzbarsky]]

I tested in IE9... but note that the behavior may depend on quirks mode vs not in IE.

I strongly suggest talking to the CSS working group about standardizing rendering of buttons if you want UAs to align on the rendering, for what it's worth.  Right now there is no spec covering it, so UAs do what they consider best or necessary for compat with web pages...