Text in Input-feld ausrichten

[the_real_didi]

Hallo zusammen,

mich beschäftigt jetzt schon seit ein paar Tagen folgendes Problem.

Für eine Volltextsuche habe ich ein kleines Form mit einem Input zur Eingabe des Suchbegriffes gebastelt. Die Optik passt auch soweit.

Bis auf einen kleinen Schönheitsfehler, an dem ich mir die Zähne ausbeiße.

Hier das ganze erstmal als screenshot:



Wie man sieht befindet sich der eingegebene Text am oberen Rand des Eingabefeldes. Ich hätte es gern vertikal zentriert.
Die naheliegende Einstellung "vertical-align" ändert allerdings nur die Ausrichtung der Formularelemente, hat aber auf den enthaltenen Text keine Auswirkung.

hier noch das CSS, wie ich es momentan habe.

form[name="tx_indexedsearch_box"] {
    width: 205px;
    margin-bottom: 0;
    height: 22px;
}

#search {
    position: relative;
    vertical-align: bottom;
    margin-left: 25px;
    margin-top: 6px;
}

.is-submit {
    height: 26px;
    width: 31px;
    background-color: #ffffff;
    background-image: url(../Bilder/Suche_07.jpg);
    border: none;
    vertical-align: bottom;

}

.is-input-sword {
    height: 26px;
    width: 174px;
    background-color: #ffffff;
    background-image: url(../Bilder/Suche_08.jpg);
    border: none;
    vertical-align: bottom;

}

habe es auch schon mit line-height und padding-top versucht. hilft beides nix. bei padding-top kommt es nur zu einer vergrößerung des input-feldes, was ja nicht gewünscht ist.

hat jemand eine Idee wie ich meinen Text vertikal zentrieren kann?

 

[Thyras]

AW: Text in Input-feld ausrichten

Kann man sich das ganze schon irgendwo live anschauen? Ohne den kompletten Aufbau bzw. evtl. weitere CSS kann man immer nur vermuten. Normalerweise sollte der Text nämlich gar nicht erst am oberen Rand "kleben".

 

[the_real_didi]

AW: Text in Input-feld ausrichten

die Seite erreichst du unter GETAF mbH: company

Das komplette CSS wollte ich nict posten, da es schon etwas größer ist. Das wird dann unübersichtlich.

Wenn es euch aber hilft, kann ich das ganze CSS posten.

 

[Thyras]

AW: Text in Input-feld ausrichten

Nicht besonders schön, aber erfüllt erstmal schnell seinen Zweck (zumindest im FF):

.is-input-sword {
background-color:#FFFFFF;
background-image:url(../Bilder/Suche_08.jpg);
border: 0 none;
height:20px;
width:171px;
padding:6px 0 0 3px;
}

Im IE(7) funktioniert das Suchfeld so bei mir noch gar nicht.

 

[the_real_didi]

AW: Text in Input-feld ausrichten

Vielen Dank. Bringt das gewünschte Ergebnis.
So an die Sache heran zu gehen, dass man die Größe des Feldes mit dem Padding hin bekommt, auf die Idee bin ich noch nicht gekommen. Danke, ist wieder ein neuer Ansatz für mich.

Ja, mit dem IE7 hab ich so meine Probleme. Da hab ich keinen Plan, warum das da so verhauen aussieht. Vielleicht hat da noch einer nen Tip für mich.

Ein weiteres Problem ist aufgetreten. Im IE5 und IE6 ist das Feld kleiner geworden und ich kann keinen Text mehr eingeben.

Hat da einer eine Erklärung dafür?

 

[cebito]

AW: Text in Input-feld ausrichten

Warum machst du es nicht einfach als Hintergrund für den gesamten linken oberen Teil? Dann submit und vor allem input nochmal neu ausrichten, jeweils noch ein: background:none; mitgegeben und fertig.

 

[the_real_didi]

AW: Text in Input-feld ausrichten

Ist auch ein Ansatz. Werde ich auch mal probieren müssen. Da kann ich dann morgen von den Erfolgen berichten. Für heute ist erstmal Schluss