Hallo miteinander,
ich stehe vor einem kleinen Problem bei der Ausrichtung eines Input-Feldes.
In einem 20px hohen Div-Container (+2px padding) sind zwei <input>-Felder (1x type=text und 1x type=image), die eine Suche darstellen sollen.
Die Abstände, Abmessungen etc. sollten eigentlich soweit korrekt sein, aber das Eingabefeld hängt um einige Pixel runter, was ich mir nicht so recht erklären kann.
An anderen CSS-Angaben kann es auch nicht liegen, da ich es in einer unabhängigen Datei getestet habe.
Was mich etwas verwirrt: Setze ich die font-size des Eingabefeldes auf einen hohen Wert (>=26), so rückt das Eingabefeld auf die gewünschte Position. Das ist natürlich kein gewünschtes Workaround.
Das Phänomen tritt bei Firefox, Opera sowie auch Chrome auf (IE nicht getestet).
Um Euch das Problem zu Visualisieren, habe ich mal Screenshots zusammengestellt:
Und zum Schluss der Code zu dem Drama:
Hoffe auf Eure Hilfe 
ich stehe vor einem kleinen Problem bei der Ausrichtung eines Input-Feldes.
In einem 20px hohen Div-Container (+2px padding) sind zwei <input>-Felder (1x type=text und 1x type=image), die eine Suche darstellen sollen.
Die Abstände, Abmessungen etc. sollten eigentlich soweit korrekt sein, aber das Eingabefeld hängt um einige Pixel runter, was ich mir nicht so recht erklären kann.
An anderen CSS-Angaben kann es auch nicht liegen, da ich es in einer unabhängigen Datei getestet habe.
Was mich etwas verwirrt: Setze ich die font-size des Eingabefeldes auf einen hohen Wert (>=26), so rückt das Eingabefeld auf die gewünschte Position. Das ist natürlich kein gewünschtes Workaround.
Das Phänomen tritt bei Firefox, Opera sowie auch Chrome auf (IE nicht getestet).
Um Euch das Problem zu Visualisieren, habe ich mal Screenshots zusammengestellt:
Und zum Schluss der Code zu dem Drama:
Code:
<form action="index.php" method="post"> <div class="search"> <input type="text" class="search_input" tabindex="1" name="s" id="s" value="Suche..." onfocus="this.value=''" /> <input type="image" src="/images/magnifier.png" class="search_send" alt="Suchen" tabindex="2" /> </div> </form>
Code:
.search {
height: 20px;
float: right;
background-color: #21496f;
padding: 2px;
}
.search input {
background-color: #4682b4;
color: #FFFFFF;
border: 0;
padding: 0;
}
.search_input {
width: 200px;
height: 20px;
font-size: 12px;
margin: 0 2px 0 0;
}
.search_send {
width: 20px;
height: 20px;
background-color: #21496f;
}
Kommentar