W3C home > Mailing lists > Public > whatwg@whatwg.org > April 2013

[whatwg] Alignment of empty buttons

From: Christian Biesinger <cbiesinger@google.com>
Date: Thu, 25 Apr 2013 10:43:35 -0700
Message-ID: <CAPTJ0XEA_NMAB41UHg1cXXmQTRsxg2zhd9LCuSS2b6R2ZBSVig@mail.gmail.com>
To: whatwg@lists.whatwg.org
Cc: Ojan Vafai <ojan@google.com>
Hi,

I had to recently investigate issues with the alignment of empty
buttons, i.e. <button></button>, and I noticed some browser
differences.

Specifically, take this testcase:
http://plexode.com/eval3/#s=aekVQXANJVQMbAx14Hz1PdQFcAYMbARIYUVkcAYYOfp8Zo6WFn6KkXphDVlVVUE+bnZ8aEawBsk8dEJaYmB11HwEdtLa4H8PNt08fA14A

Where should the button be positioned relative to the input field (or
if you prefer, the baseline of the block)? Chrome dev, IE and Opera
put the bottom of the button a bit higher than the bottom of the
input, whereas Firefox seems to approximately center the button on the
line (though without using vertical-align:middle).

Chrome stable puts the top of the button slightly below the top of the input.

Any suggestions for what the right behavior here is...? Note that this
isn't an entirely academic question, because websites do use empty
buttons (styling them with a width, height and background image).

-christian
Received on Thursday, 25 April 2013 17:44:00 UTC

This archive was generated by hypermail 2.4.0 : Wednesday, 22 January 2020 16:59:57 UTC