Colin S Reporter
	Description • 18 years ago

User-Agent:       Mozilla/5.0 (X11; U; Linux x86_64; en-GB; rv:1.8.0.7) Gecko/20060921 Ubuntu/dapper-security Firefox/1.5.0.7
Build Identifier: Mozilla/5.0 (X11; U; Linux x86_64; en-GB; rv:1.8.0.7) Gecko/20060921 Ubuntu/dapper-security Firefox/1.5.0.7

1 pixel of vertical padding and 3 pixels of horizontal padding are added to all <button> elements, regardless of their specified CSS settings for padding.

Reproducible: Always

Steps to Reproduce:
1. Load testcase URL.
Actual Results:  
Notice that there is 3px of space between the red and green boxes, and that the green box is 1px shorter on the top and bottom than the red box. Also notice when clicking on the button that the active indicator shows that there is 3px of extra space on the right side of the green box, as well.

Expected Results:  
There should not be any extra space, since all padding and margins for both the button and its content are set to 0.

Konqueror and Opera both render the button correctly. This bug causes properly styled buttons to appear broken in Firefox.

Also confirmed this issue in Mozilla/5.0 (Windows; U; Windows NT 5.1; en-GB; rv:1.8.0.7) Gecko/20060909 Firefox/1.5.0.7.

	kmike
	Comment 1 • 18 years ago

Mozilla/5.0 (X11; U; Linux i686; en-US; rv:1.9a1) Gecko/20061012 SeaMonkey/1.5a shows this bug, too.

	Ryan Cannon
	Comment 2 • 18 years ago

This bug looks like a duplicate of 179230

	Luis Antonio Castro Henriques
	Comment 3 • 17 years ago

someone made a page to illustrate this bug:

http://www.designdetector.com/demos/buttons-padding-demo.html

and it doesn't look like a 179230 duplicate, but perhaps is related.

	Paul LeBeau
	Comment 4 • 16 years ago

This bug is still present in the FF3 beta releases.  It would be nice to get this fixed.  Seems like it might be an easy one to solve and it would get rid of a lot of the headache involved with styling the <button> element.

	Paul LeBeau
	Comment 6 • 16 years ago

This close up of the rendering in FF3b5 shows the unexplained 'white' padding around the contents of the button.  There seems to be no way to get rid of it other than hiding it using negative offsets etc.

The colour of the padding is not actually white.  It is #ECE9D8.

	Paul LeBeau
	Comment 7 • 16 years ago

Note: above rendering was in FF3b5 on WinXP.

	j.j.
	Comment 8 • 16 years ago

IMHO someone with permission should change:

Product > Core
Component > Widget
OS > All

	j.j.
	Comment 9 • 16 years ago

or Component > Layout: Form Controls

	j.j.
	Comment 10 • 16 years ago

I'd say duplicate of bug 140562

	Mike Beltzner [:beltzner, not reading bugmail]
	Comment 11 • 16 years ago

Carrying over blocking flag for dbaron and roc, but I think it shouldn't block (esp. if this isn't a regression)

	Boris Zbarsky [:bzbarsky]
	Comment 13 • 16 years ago

I don't think this should block.  It's just not that big a deal, it's not a violation of any specifications, and there's no way we should be rewriting buttons more or less from scratch (which is what would be needed to "fix" this) at this point.

	Paul LeBeau
	Comment 14 • 16 years ago

Just a quibble on one point:

> It's just not that big a deal, it's not a violation of any specifications

Perhaps technically not, but if the layout engine was putting a white/grey border around all DIVs people might consider it quite serious, even though the spec doesn't explicitly that's wrong. :)

	Boris Zbarsky [:bzbarsky]
	Comment 15 • 16 years ago

Actually, for divs the spec DOES say it's wrong, because there is no room for such a border in the CSS box model.  But the box model doesn't apply to the insides of replaced elements (as here).