Input Button height when set to display: block?

[JAB Creations]

Can anyone please clarify what the high of an input button should be with the following CSS...

input.button {
border: #000 solid 1px;
display: block
float: left;
height: 18px;
margin: 0px;
padding: 0px;
}

I would imagine it should measure (top-border to bottom-border) 20px yet Gecko, Presto, and Webkit have decided it's height should only be 18px. Trident renders it as 20px in total height as intended.

- John

[sgietz]

Should be 20px. Border widths will be added on to the width/height of an object, sort of like padding. Some browsers are a bit temperamental regarding this---business as usual I suppose :o(

[JAB Creations]

20px is what I expect...looking for any issues in the standards that leave software developers disagreeing however.

- John

[Xapti]

inputs are a little funky because by default they include borders, that's my explanation. One thing I experienced, is that I don't think the height attribute works for Internet Explorer (IE 6, don't know about others) on inputs... don't ask why, it pissed me off. I had to use font-size instead. At least width worked.

[edited by: Xapti at 4:46 am (utc) on Oct. 8, 2007]