Question

I have a button nicely lined up with an input box in this fiddle here (I’m working in Safari right now )

http://jsfiddle.net/hNx6E/13/

However the height of the button does not add up to the height of the input. Here are my calculations.

Button Height = Font Height + Padding Top + Padding Bottom + Border Top + Border Bottom =

16+8+8+1+1 = 34

Input Height = Height + Border Top + Border Bottom =

34+1+1 = 36

There is a missing 2px some where.

Note in the fiddle I do my normalization at the end and normalize all ( I think used elements ).

p , input, div, body

Also note in the fiddle that I have CSS normalization turned off b.c. I do it manually.

Fiddle quit responding but next I was going to try their normalization to determine if I left off some element I am un-aware of…up now…just checked the normalize box on the left but this did not change anything.

Right now i consider this a hack b.c I just changed my height by 2px to account for the missing pixels…but I’d like it working in a way I understand.

Answer 1

34+1+1 = 36 // fixed

What? Input’s width is 34px + 2px for border, that’s 36px total. The next problem is line-height, which increases height of the button.

I set line-height: 1em for #po_but and width: 32px for #po_in, see demo here. The heights now both have 34px.