180085 - [FIX]button text is shifted to right

Status: RESOLVED FIXED

(Core :: Layout: Form Controls, defect, P1)

Description

[Andrei Leo]

User-Agent:       Mozilla/5.0 (Windows; U; Windows NT 5.0; en-US; rv:1.3a) Gecko/20021113
Build Identifier: Mozilla/5.0 (Windows; U; Windows NT 5.0; en-US; rv:1.3a) Gecko/20021113

Text in small "ok" button in top left corner text is not centered. Whole text is
shifted to right. Part of letter "k" is not visible.

1.2b Builds showing this correctly.

Reproducible: Always

Steps to Reproduce:
1. Go To URL
2. Watch "ok" button int top left corner





Testcase will follow.

Comment 1

[Andrei Leo]

Attachment: Testcase from bug URL

Comment 2

[Andrei Leo]

Attachment: even worse

setting button width to 20px give very strange results

Comment 3

[Mirek Hankus]

Attachment: new testcase

Confirming on Linux, (it behaves like that for about 2 days). When you specify
only width and no padding input takes 100% of available space (second case in
testcase)

Comment 4

[Jason Bassford]

I also see this in the test cases.

Comment 5

[Daniel Kies]

Confirming with 2002111308 on win98se.

I also noticed that adding

  padding: 0;

to input[type=button], input[type=submit], input[type=reset] is an effective
workaround.  However, those characteristics are not inherited by
input[type=button]:hover, input[type=submit]:hover, input[type=reset]:hover or
by input[type=button]:hover:active, input[type=submit]:hover:active,
input[type=reset]:hover:active and they should be, correct?

Comment 6

[Boris Zbarsky [:bzbarsky]]

So the problem here is that buttons have box-sizing border-box.  So when you set
the width, that sets the width of the whole thing, including borders, padding,
etc.  The left+padding on inputs is about 20px or so.  So setting anything less
than 20px as the width will lead to weird results (that need to be fixed).

Setting something that's _bigger_ than 20px is a separate issue...  The only
reason the code on that site works with older builds is that those have no
built-in left/right padding.  If we _do_ have padding, border-box sizing means
that we're not leaving enough space for the text.

Could someone test this with a browser other than WinIE?  In particular, I would
like to know how MacIE handles this.

jkeiser?  Thoughts?

Comment 7

[Boris Zbarsky [:bzbarsky]]

Oh, an no. hovered buttons should not "inherit" the padding; if you specify
padding there, you're on your own to make sure the hover and active effects
still work right.

Comment 8

[Boris Zbarsky [:bzbarsky]]

I thought I'd cced jkeiser... ;)

Comment 9

[Boris Zbarsky [:bzbarsky]]

OK.  I think the right solution is to more or less center the text inside the
button no matter what the width is (in other words, decrease the left offset as
needed so that the text is centered in those testcases).  Need to not break the
:hover stuff in the process, of course.

Comment 10

[Boris Zbarsky [:bzbarsky]]

And not clear what the right solution for <button> is.

Comment 11

[Boris Zbarsky [:bzbarsky]]

Attachment: more complete testcase

Comment 12

[John Keiser (jkeiser)]

Attachment: WinXP 20021114 (Netscape nightly)

Comment 13

[Boris Zbarsky [:bzbarsky]]

Attachment: something like this.....

Comment 14

[Boris Zbarsky [:bzbarsky]]

Attachment: Need this too...

Yay webmasters working around IE broken-ness and breaking in every other
browser....

Comment 15

[Boris Zbarsky [:bzbarsky]]

Attachment: by popular request....

Comment 16

[John Keiser (jkeiser)]

Comment on attachment 106271 [details] [diff] [review]
by popular request....

r=jkeiser with a comment explaining how the spaces thing is TEMPORARY and
caused largely by the fact that our focus border makes us take up an excessive
amount of space for the border.

Comment 17

[Boris Zbarsky [:bzbarsky]]

Attachment: mmm... comment

Comment 18

[Boris Zbarsky [:bzbarsky]]

Attachment: Better comment

Comment 19

[John Keiser (jkeiser)]

Comment on attachment 106368 [details] [diff] [review]
Better comment

r=jkeiser, I just wish the comment was more verbose ;)

Comment 20

[Robert O'Callahan (:roc) (email my personal email if necessary)]

Comment on attachment 106368 [details] [diff] [review]
Better comment

sr=roc+moz

Comment 21

[Boris Zbarsky [:bzbarsky]]

*** Bug 180471 has been marked as a duplicate of this bug. ***

Comment 22

[Boris Zbarsky [:bzbarsky]]

fixed

Comment 23

[Boris Zbarsky [:bzbarsky]]

We should migrate these tests to reftest or something.

Comment 24

[Boris Zbarsky [:bzbarsky]]

I checked in a reftest, but I'm not sure it's really good enough to test this... I'm not sure any of our existing test suites can _really_ test the expectations here.  :(  At least not without a good bit more in the way of assumptions about our form controls focuspaddings, etc.