input definieren - padding(?) funktioniert nicht richtig

hi, schon wieder ich
ich will einen login bereich per css formatieren. prinzipiell funktioniert auch eig. alles bis auf den abstand oben und unten siehe screenshots.

[Blockierte Grafik: http://files.myopera.com/error-at/albums/597902/inputcsshelp_bsp1.png] [Blockierte Grafik: http://files.myopera.com/error-at/albums/597902/inputcsshelp_bsp2.png]

border hab ich auf 0 gesetzt und es wird ein hintergrund bild für den input verwendet.
den text will ich in jedem* browser in der mitte haben. folgendes hab ich shcon probiert:
> padding:auto 0 auto 4px;
> vertical-align:middle;
> margin:auto 0 auto 4px;

*) sehr wichtig: Opera, FF, IE 8+, Firefox/Chrome
*) weniger wichtig: Safari, IE unter 8

bitte bitte helft mir

ändert leider nichts. vielleicht hilft es ja wenn ich die html und css schnipsel hier rein stell'.

<form id="login" action="#" method="post">


<input id="text" type="text" name="email" value="email">
<input id="text" type="password" name="password" value="pw">
<input type="image" src="images/loginbutton.png" name="submit" value="Login" disabled>


</form>

form#login {
 margin:2px 0 2px 6px;
}


input {
 font-family:arial, tahoma, segoe, helvetica, sans-serif;
 color:#575757;
 font-size:9pt;
 vertical-align:middle;
 background-color:transparent;
}


input#text {
 width:140px;
 height:22px;
 background-image:url(images/input.png);
 background-repeat:no-repeat;
 border:0;
 padding-left:4px; /* daraus ergibt sich leider auch ein aussenabstand von 4px und das input feld geht über das hintergrund bild hinaus. warum? */
 line-height:22px; /* hab auch schon andere werte probiert.. keine änderung */
}

line-height:wert; hab ich auch schon bei form und input probiert. leider auch hier keine änderung