Ich hab n normales Input-feld…nix besonderes, Standart halt.
[HTML]
[/HTML]und die Klasse dazu
[HTML]
.insertframe{
font-family: arial, sans-serif;
width: 80%;
height: 26px;
vertical-align: middle;
font-size: 15px;
}[/HTML]Jetzt habe ich das Problem, dass der Text, den ich eingeben kann, immer ganz oben in dem Feld ist. Ich hätte ihn aber gerne vertical zentriert. Ich dachte erst, dass würde über „vertical-align:middle“ gehen aber das versetzt die gesamte Box um ein paar Pixel. Mit „middle“ passt es übrigens gut zum Button daneben aber das nur am Rande.
Google Chrome, Opera und Safari zeigen den Text schön zentriert an, FF und IE sind nach oben versetzt.
|
| a
|__
| a
|
|__
Das ist zwar etwas übertrieben dargestellt aber soll es so halb verdeutlichen. Gibt es da ne Lösung für alle oder hab ich Pech gehabt?
Das hab ich meinen Chef auch gefragt. ^^
Text-align: center is an sich ne gute Idee aber es zentriert den Text in der horizontalen Mitte vom Feld. Also quasi:
|a|
Das um 90° gedreht wäre nice. Aber ich glaube, da hat mein Chef Pech gehabt, wenn die Schrift so klein bleiben soll.
So, hat sich erledigt. Geht nich, weil is nich…wurde sogar angenommen.
Aber falls jemand noch ne Idee zu hat, bin ich nich abgeneigt. Wer weiß, was als nächstes kommt. ^^
Hmmm…ich habs nicht probiert, aber ich dachte, der FF müsste das können. Dann musst Du Dich halt mal nach display:table-cell umhören.
Ansonsten würde ich mit der line-height rumspielen. Das könnte funktionierne.
Würde ich auch machen.
Aber wenn eine px-Höhe eingehalten werden muß ist das so nicht möglich.
Eine Möglichkeit wäre border und outline von input zu entfernen und ein Element mit height um das input zu legen.
Die Rahmen können dem umschließenden Element wieder zugefügt werden.
* {
margin: 0;
padding: 0;
}
body {
font-size: 100%;
font-family: arial;
background-color: silver;
color: black;
}
form p {
display: table;
height: 50px;
background-color: white;
border: 1px solid gray;
}
form label {
display: table-row;
}
form label span {
display: table-cell;
height: 50px;
vertical-align: middle;
}
form b {
display: none;
}
form input {
border: 0px solid;
outline: none;
}
form strong {
position: absolute;
left: -3000px;
}
und für den IE<8 inline-block:
<!--[if lt IE 8]>
<style>
form,
form p,
form label,
form label span {
display: inline;
zoom:1;
height: auto;
}
form b {
display: inline;
zoom: 1;
height: 50px;
vertical-align: middle;
}
</style>
<![endif]-->
b habe ich zum aufspannen der Zeile IE5.5-7 eingefügt,
span um ein vollständiges Tabellengerüst zu bekommen (ff2),
strong wird für sehende Ausgeblendet.