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

VERIFIED FIXED in mozilla0.9

Status

()

P3
normal
VERIFIED FIXED
18 years ago
18 years ago

People

(Reporter: pierre, Assigned: rods)

Tracking

Trunk
mozilla0.9
Points:
---

Firefox Tracking Flags

(Not tracked)

Details

Attachments

(1 attachment)

(Reporter)

Description

18 years ago
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

18 years ago
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.
(Assignee)

Comment 2

18 years ago
Apparently, adding this styel rule fixes it:
  vertical-align: bottom;
Status: NEW → ASSIGNED
Summary: HTML-4 buttons are not displayed on the same baseline as text → [FIX]HTML-4 buttons are not displayed on the same baseline as text
Whiteboard: Fix in hand

Comment 3

18 years ago
sr=buster
(Reporter)

Comment 4

18 years ago
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.
Whiteboard: Fix in hand
(Reporter)

Comment 5

18 years ago
Created attachment 20605 [details]
testcase
(Reporter)

Comment 6

18 years ago
Well.. this is my interpretation of baseline alignment between text and buttons. 
I may be wrong.
(Reporter)

Comment 7

18 years ago
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.
(Assignee)

Comment 8

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

Comment 9

18 years ago
QA Contact Update
QA Contact: bsharma → vladimire
(Assignee)

Updated

18 years ago
Target Milestone: --- → mozilla0.9
(Assignee)

Comment 10

18 years ago
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
(Assignee)

Comment 11

18 years ago
fixed
Status: ASSIGNED → RESOLVED
Last Resolved: 18 years ago
Resolution: --- → FIXED

Comment 12

18 years ago
Verifying build 2001-03-29-04-Mtrunk windows 98

Comment 13

18 years ago
really verifying
Status: RESOLVED → VERIFIED
You need to log in before you can comment on or make changes to this bug.