vertical-align: middle; in inputs

[BlueFox]

Moin,

ich will in meinen inputs den text vertikal mittig haben aber iwie geht das nicht vllt könnt ihr mir helfen.

style.css

input {
background: url(../img/input_bg.png) repeat-x;
font-family: Tahoma, Verdana, Arial, sans-serif;
font-size: 11px;
vertical-align: middle;
float: left;
height: 28px;
border: 0px;
color: #b5b5b5;
}

.input_left {
background: url(../img/input_left.png) no-repeat;
float: left;
height: 28px;
width: 5px;
}

.input_right {
background: url(../img/input_right.png) no-repeat;
float: left;
height: 28px;
width: 5px;
}

Kontakt.php

<table width="400" border="0" cellspacing="5" cellpadding="0">
  <tr>
    <td align="right">Name:</td>
    <td><span class="input_left"></span><input type="text" name="Name" size="40" /><span class="input_right"></span></td>
  </tr>
  <tr>
    <td align="right">E-Mail Adresse:</td>
    <td><span class="input_left"></span><input type="text" name="Email" size="40" /><span class="input_right"></td>
  </tr>
  <tr>
    <td align="right">Betreff:</td>
    <td><span class="input_left"></span><input type="text" name="Betreff" size="40" /><span class="input_right"></span></td>
  </tr>
  <tr>
    <td align="right" valign="top">Nachricht:</td>
    <td><textarea name="Nachricht" cols="25" rows="6"></textarea></td>
  </tr>
  <tr>
    <td> </td>
    <td><span class="Button_Left"></span><input type="submit" class="Button" value="Absenden" /><span class="Button_Right"></span></td>
  </tr>
</table>

hier noch die page: Fox-Style - Design & Coding

 

[kkapsner]

So sollte es passen:

input{
	background: url(../img/input_bg.png) repeat-x;
	font-family: Tahoma, Verdana, Arial, sans-serif;
	font-size: 11px;
	vertical-align: middle;
	float: left;
	height: 11px;
	line-height: 11px;
	padding: 9px 0px;
	border: 0px;
	color: #b5b5b5;
}

 

[BlueFox]

Ja, so passt es Prima, Vielen Dank!

 

[kkapsner]

Gern geschehen.

PS: Beachte aber, dass jetzt jedes Input eine Höhe von 29px hat (2*9 + 11). Wenn du wieder 28 haben willst musst du height, line-height und font-size auf 10px stellen.

 

[BlueFox]

Jojo, hab schon angepasst