Position of text and input box inside form?

[nepal1kta]

I am a newbie with CSS and i am trying to make a form which accepts firstname and lastname from a user with submit and reset button. I am using (https://css-tricks.com/examples/) ‘Modal Login Form’ as guide. Now, i am having hard time to put texts in the right place. Here is the screen shot of what i have:
http://i36.tinypic.com/zy7rb8.jpg

I am having hard time aligning input box with the texts (firstname and lastname). Also i am trying to move ‘Submit’ and ‘Reset’ button little bit lower. When i try to increase my padding value, they increase input box size and button sizes. Can anyone tell me what am i doing wrong? Here is a screenshot of my HTML and CSS.
HTML: http://i35.tinypic.com/30979fn.jpg
CSS: http://i37.tinypic.com/2ujjgvo.jpg

P.S = Isn’t padding suppose to move texts from top bottom right and left? What did it increases size in case of (input box and button).?

[Argeaux]

the pics are somehow not working for me.

But have your tried to use margin-top: instead of padding-top:? I think it should work.

[Jonz]

use line-height:

eg:
height: 16px;
font-size: 1.1em;
line-height: 1.6em;

em or px doesn’t matter… this should make it align in the middle.
Put line height the same size the div its in.

Edit: Put them in a div and set the height and use the line-height
tell me if it works haven’t been able to properly check it out

[Author]

Posts