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




Layout: Form Controls
15 years ago
11 years ago


(Reporter: mikedlr, Unassigned)



Bug Flags:
in-testsuite ?

Firefox Tracking Flags

(Not tracked)




(2 attachments)



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

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

tested also in firebird

Comment 1

15 years ago
Created attachment 123633 [details]
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

15 years ago
Created attachment 123634 [details]
screen shot of misaligned buttons

this looks the same in Firebird and mozilla.

Comment 3

15 years ago
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.  


15 years ago
Keywords: testcase
OS: Linux → All

Comment 4

15 years ago
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.
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.
Last Resolved: 15 years ago
Resolution: --- → INVALID
In current trunk builds, the buttons align just fine.
Is current trunk build wrong, or is this in fact a valid bug?
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....
Flags: in-testsuite?
You need to log in before you can comment on or make changes to this bug.