58190 - [FIX]HTML-4 buttons are not displayed on the same baseline as text

Status: VERIFIED FIXED

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

Description

[Pierre Saslawsky]

This bug is extracted from bug 53360. If you open the testcase that was attached 
there (http://bugzilla.mozilla.org/showattachment.cgi?attach_id=15392), you can 
see that the HMTL-4 buttons are displayed on a different baseline than the 
surrounding text or HTML-3 buttons.

Comment 1

[Jeffrey Baker]

Related: why do the INPUT elements have so much more padding than the BUTTON
elements?  It makes buttons web-wide (including Bugzilla) look stupid.  Linux
2000-10-27 trunk nightly.

Comment 2

[rods (gone)]

Apparently, adding this styel rule fixes it:
  vertical-align: bottom;

Comment 3

[buster]

sr=buster

Comment 4

[Pierre Saslawsky]

This is incorrect.  The real problem is that when no vertical alignment is 
specified (ie. when "vertical-align=baseline"), the *bottom* of the buttons is 
aligned with the baseline of the text.  We should have instead the *baseline* of 
the buttons aligned with the baseline of the text.

See the attached testcase.

Comment 5

[Pierre Saslawsky]

Attachment: testcase

Comment 6

[Pierre Saslawsky]

Well.. this is my interpretation of baseline alignment between text and buttons. 
I may be wrong.

Comment 7

[Pierre Saslawsky]

For the record and for the CCd folks, we had a discussion by email...

I wrote:
----
AFAIK, the baseline of a button is not defined by the spec but as I
understand it, it should be the baseline of the content of the button.  For
instance, imagine a checkbox in the middle of a sentence: you wouldn't want
the text of the checkbox to be on a different baseline.  Same thing with form
controls that would have some help text popping up near them when you mouseover.

Another thing to consider is that if we don't make "vertical-align:baseline"
match the baselines between controls and normal text, there is no other way
we can get that alignment.
----

Ian Hickson wrote:
----
Strictly speaking this is undefined.

IMHO vertical-align:baseline should align the baseline of the top line of
the button with the baseline of the line box.

Assuming that buttons are display:inline-block, then the problem is that
the working group has not yet defined what the baseline of an inline-block
is. There are at least three possible sensible options:

   1. The baseline of the first line of the inline-block box is the
      baseline of the inline-block in terms of the outer line box.
   2. The baseline of the *last* line of the inline-block box is the
      baseline of the inline-block in terms of the outer line box.
   3. The baseline of the inline-block in terms of the outer line box
      is the bottom of the inline-block's margin edge.

As I see it we will probably end up with a property to decide this.
----

We're in agreement and we should go with Ian's definition of vertical-
align:baseline, which is more accurate.

Comment 8

[rods (gone)]

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

Comment 9

[Vladimir Ermakov]

QA Contact Update

Comment 10

[rods (gone)]

As a point of reference the fix was actually:

Index: quirk.css
===================================================================
RCS file: /cvsroot/mozilla/layout/html/document/src/quirk.css,v
retrieving revision 1.14
diff -u -r1.14 quirk.css
--- quirk.css   2001/03/12 22:36:11     1.14
+++ quirk.css   2001/03/13 13:48:46
@@ -114,6 +114,13 @@
 }


+button,
+input[type="reset"],
+input[type="button"],
+input[type="submit"] {
+  vertical-align: bottom;
+}
+
 /* Quirk: special top and bottom margins for inputs in tables */

 td select[size] {

pierre gave me the r= ages ago in an e-mail

Comment 11

[rods (gone)]

fixed

Comment 12

[Vladimir Ermakov]

Verifying build 2001-03-29-04-Mtrunk windows 98

Comment 13

[Vladimir Ermakov]

really verifying