Padding changed on button when placed beneath textarea?

I've ran into a wierd problem.. I'm doing some custom button-styling using jQuery and this works as suppose, but when I add the buttons underneath textareas or inputfields, it somehow changes the padding/text-height开发者_C百科 from button to button..

I have uploaded a simple example here: http://pastehtml.com/view/b4x81v12y.html

As you can see, the TOPbutton text is moved 1px more up than the button in the BOTTOM.. Anybody knows why ?

(I'm testing it in Firefox v6)

You got that right - it does look different - there's 1px difference. I wasn't able to find out what the reason of this.

However, setting line-height property to fixed value of 30px resolved the 1px issue in the example file you've linked to.

I realise that in some cases setting line-height to static value can't be considered an option netherless...

In general, I accept as fact that proper styling of buttons (in cross-browser manner) is a pain in the a**. Most of the time I go with the these buttons (full related article can be found here: http://stopdesign.com/archive/2009/02/04/recreating-the-button.html) to save myself a trouble of styling from scratch.