Box model of form button

Any button uses the traditional box model instead of W3C's, regardless of rendering mode.

Test page. Workaround is included.
Reported by ppk.

Explorer 5-6 Windows, Explorer 7, Mozilla | Reported on 30 October 2004.

This site is no longer maintained. I’m sorry, but it’s just too much work for too little return. You can continue to browse old bug reports, though.

Search reports by browser:

Atom RSS


(Add your own)

1 Posted by Anne on 25 November 2004 | Permalink

And why is this a bug?

2 Posted by ppk on 25 November 2004 | Permalink

Because the button element doesn't obey the box model, of course.

3 Posted by Joost on 2 December 2004 | Permalink

What I would like to know is: is there any way to make an input type="text" form field and an input type="submit" button the same height (as each other) on mozilla, safari and explorer? - I don't care about the exact height or width, I just want the form elements to be equally high.

Currently (after a LOT of experimenting) I'm using the following code for both types. this works on mozilla but not in I.E.:

/* "text" is the classname for these input elements */
input.text {
border-width: 1px;
border-style: solid;
margin-top: 3px;

Example: see

4 Posted by Maxamor on 12 March 2007 | Permalink

I believe this is also the reason I am experiencing difficulties getting a two-tone border on my buttons. If you wrap a button input tag inside of a span, and give them both borders (so you get a two-tone border effect) it will work fine in IE 6, but not Firefox 1.5 (Windows).


5 Posted by Vasil Rangelov on 23 March 2007 | Permalink

It seems this also occurs in Opera. However, IE, FF and Opera have three total different behaviours on the test page at least:

IE 7/XP - The button is shorten on the top and the bottom is placed on the same level as the input text.

FF - The button is shorten on the bottom and placed a little bit higher then the input text.

Opera 9.2 8758 - The button is shorten slightly on top AND bottom and it's middle point is on the same level as the input text.

None of theese browsers seems to render it right, which I believe is to have the button to have the same height as the input box and thus have the top and bottom (respectively the middle) part on the same level.