Try to align a span and an input

Question

I have two buttons, one implemented as an input, the other as a span. They are put side by side with:

{ display:inline-block; }

The buttons are rendered from a customized tag and a class name is added dynamically in jsp. In css, there are some definition for shadow, for background gradient, for padding, and for font. They do use some CSS3 like border-radius.

But in Firefox, the height of the span button is 18 while the input 20. Interestingly, the height of them in IE 8 are both 25px, why?

Now I need them to be of the same height and aligned horizontally.

Update: Now I have those two buttons in jsfiddle. Use height:22px; and vertical-align:top; won't help much.

http://jsfiddle.net/gBeCP/

Answer 1

Try setting the vertical-align:top on the input tag. I recommend specifically setting the dimensions in px as this will prevent the browser from applying defaults.

Answer 2

I think I have it done.

Answer in this page indicates that FF treats the padding differently in submit type of input and a span. CSS padding added to height/width for <input type='submit'>

My solution is to set a min-height of both input and span, then use vertical-align:middle; to have them aligned. Finally play around the padding number to have the text on the buttons aligned.