108424 - [BTN]<button> sizes differently from <input type="submit">

Status: RESOLVED FIXED

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

Description

[Boris Zbarsky [:bzbarsky]]

Currently (as a result of the fix for bug 96630) <input type="submit"> always
sizes in quirks mode.  This was introduced for IE compatibility, apparently. 
There are a few issues here:

1)  The sizing of <button> was not changed.  It's not compatible with IE6/Win
2)  The sizing of both types of controls is not compatible with IE5/Mac
3)  Quirks sizing is broken and causes bug 79927.  We should attempt to not
    inflict this on pages unless we have good reason to.
4)  Bug 96630 does not clearly explain how the sizing was incorrect.  Do the
    same arguments not apply to <button> ?
5)  The current sizing algorithm leads to results that are plain ugly for
    buttons with long "value" text.

I feel that we should reconsider the decision made in bug 96630 or at the very
least be consistent and apply it to <button> as well.

Comment 1

[Boris Zbarsky [:bzbarsky]]

Attachment: Testcase

Comment 2

[Boris Zbarsky [:bzbarsky]]

Attachment: IE6/Win rendering (strict and quirks)

Comment 3

[Boris Zbarsky [:bzbarsky]]

Attachment: IE5/Mac rendering (quirks and strict)

Comment 4

[Boris Zbarsky [:bzbarsky]]

Attachment: Opera/Mac rendering

Comment 5

[Boris Zbarsky [:bzbarsky]]

Attachment: iCab/Mac rendering

Comment 6

[Boris Zbarsky [:bzbarsky]]

Attachment: Mozilla rendering (quirks and strict)

Comment 7

[Matthew T (active 1999-2002)]

Since no two browsers size buttons the same way, I don't buy any argument that 
they have to be a particular width for compatibility. And we can probably do 
better than imitating the browser which appears to have the worst algorithm of 
all. :-) Opera's rendering (including its rendering of <button>, which is what 
Mac OS calls a `bevel button' rather than a `push button') seems closest to 
what I'd expect of a Mac app.

On Mac OS 8/9, there should be at least 8px padding on both ends of any button
<http://developer.apple.com/techpubs/mac/HIGOS8Guide/thig-52.html#HEADING52-3>. 
That's for a 12px font, so for Web use it can be generalized to 0.67em. 

On Mac OS X, there should be at least 14px padding on both ends of any button 
which uses the 13px system font, and 10px padding on both ends of any button 
which uses the 10px system font <http://developer.apple.com/techpubs/macosx/
Essentials/AquaHIGuidelines/AHIGControls/Push_Buttons.html>. For Web use, that 
can be generalized to 1em.

Comment 8

[Boris Zbarsky [:bzbarsky]]

Attachment: mozilla rendering with bug 167236 fixed

Comment 9

[Boris Zbarsky [:bzbarsky]]

This is fixed.