Skip to content Skip to sidebar Skip to footer

Missing 2px In Css Calculations W/ Safari

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

Solution 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.

Solution 2:

Try to use height and line-height instead of top/bottom padding to allign vertically. So you get something like:

#po_but {
  height: 34px;
  line-height: 34px;
  padding: 06px;
}

BTW your code looks OK in safari/chrome on mac.

Post a Comment for "Missing 2px In Css Calculations W/ Safari"