75632 - [FIX]Bad HTML <button> CSS causes jiggling when clicked

Status: VERIFIED FIXED

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

Description

[Simon Fraser [no longer active]]

Our CSS on <button> elements in HTML is bad; clicking on the button changes its 
size, and cause everything to jiggle.

Comment 1

[Simon Fraser [no longer active]]

Attachment: test case

Comment 2

[Boris Zbarsky [:bzbarsky]]

this happens on Linux too (good thing, that.  :) )

Comment 3

[Boris Zbarsky [:bzbarsky]]

This was caused by the fix to 67207.

adding default top/bottom padding to the button would regress that bug.  So all
we can do here is remove the extra padding in the :focus:active style.

Attaching patch.

Comment 4

[Boris Zbarsky [:bzbarsky]]

Attachment: patch

Comment 5

[rods (gone)]

I tested it it looks good, r=rods

Comment 6

[Marc Attinasi]

Loos good to me too - in fact, this is what I proposed in bug 72115 (which is, I
believe, the same as this). [s]r=attinasi

Comment 7

[timeless]

checking in bz's patch

Comment 8

[timeless]

fix checked in

Comment 9

[Boris Zbarsky [:bzbarsky]]

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

Comment 10

[vectro]

Wasn't the purpose of the extra padding on the button so that when you press the
button it's contents will move down (for the "3D") effect?

In this case, seems to me it would make more sense to add extra padding to the
bottom in the non-pressed state, rather than remove padding in the pressed state.

Comment 11

[Boris Zbarsky [:bzbarsky]]

[e-mail], did you read bug 67207?  If not, please do so.

Comment 12

[vectro]

OK, so if I read bug 67207 correctly, we want all the inputs to have the same
height.

What this says to me is that we should increase the padding on all input
elements so they are the same height as an input button + 2 px.

My concern is that the fix for this bug is going to remove the effect of moving
text on a pressed button down and to the right.

Comment 13

[Boris Zbarsky [:bzbarsky]]

Also see bug 69130.. we would need to increase the size of <select> elements. 
Unfortunately, size=1 <select> elements with padding set look very very odd.  I
understand your concern, and I _think_ that the movement we still have
horizonatally is sufficient...  

Comment 14

[vectro]

I don't know how much movement we have now, so I can't comment on it's sufficency.

But another solution would be to implement a down-and-to-the-right movement in
the HTML widgets themselves, independent of CSS. Or else provide some way to
specify style properties for the inside of the button.

Comment 15

[Vladimir Ermakov]

Verifying on build 2001-04-19-04-trunk windows 98
and build 2001-04-19-08-trunk Linux RedHat 6.2