206161 - vertical alignment of buttons is ugly where list in one and image in other

Status: RESOLVED INVALID

(Core :: Layout: Form Controls, defect)

Description

[mikedlr]

User-Agent:       Mozilla/5.0 (X11; U; Linux i686; en-US; rv:1.4b) Gecko/20030516
Build Identifier: Mozilla/5.0 (X11; U; Linux i686; en-US; rv:1.4b) Gecko/20030516

In the test page I found on the internet, and in my much reduced example, you
will see that the alignment of the buttons is ugly.  I think the left hand one
should be centerd as the right hand one and ideally they should be matched in
height.  

Reproducible: Always

Steps to Reproduce:
1. save attachment as file
2. file -> open -> <filename>
3. look at ugly picture
Actual Results:  
ugly layout (see attached image): buttons above and below text

Expected Results:  
beautiful layout: both buttons matched up reasonably, possibly both at top and
bottom.  

tested also in firebird

Comment 1

[mikedlr]

Attachment: a testcase which shows misaligned buttons based on failing page

This test case is based on a minimal extract of the original page which shows
the layougt problem.

Comment 2

[mikedlr]

Attachment: screen shot of misaligned buttons

this looks the same in Firebird and mozilla.

Comment 3

[mikedlr]

the closest bug to this is 148472, but that seemed enough different to make this
worth a separate entry.  Apologies if it's a duplicate.  

Comment 4

[[e-mail]]

Mozilla is trying to align the first line of text in each button with the
surrounding text. Now your second button starts with an image that makes it
taller than the text, but you could specify align="top" on the image to fix
that. Or, you could style a vertical-align on the buttons to resolve the problem
in a different way.

Comment 5

[Boris Zbarsky [:bzbarsky]]

Marking invalid -- buttons should align like inline-blocks do, and that's
exactly how inline-blocks will align (default baseline alignment aligns all the
baselines, and the baseline of an inline-block or a button is the baseline of
the first line of test in it).

You would get the same effect without the image, simply by using a very large
font for the first line of text in the button... Viewed that way, our behavior
is perfectly reasonable.

Comment 6

[Martijn Wargers (dead)]

In current trunk builds, the buttons align just fine.
Is current trunk build wrong, or is this in fact a valid bug?

Comment 7

[Boris Zbarsky [:bzbarsky]]

Current trunk builds changed where the baseline of a blockframe sits.  If you change the second button so the image is on the last line, you'll see that the alignment is still baseline alignment, but the baseline of a block is now on the last line of the block instead of the first line.  This last was apparently a CSS spec change.

We should really get some tests in for this....