Christoph ZillgensZurück zur Startseite

Wenn man z.B. ein Suchformular erstellt, möchte man in der Regel das Eingabefeld gleich hoch wie den Button gestalten. Zumindest, sofern beide nebeneinander stehen. Leider verhalten sich überraschender Weise Safari und Firefox unterschiedlich und der Internet-Explorer ist diesmal nicht der Böse.

Um es gleich vorweg zu nehmen, es geht gerade einmal um 2 Pixel, die aber manchmal ganz schön störend werden können. Aber es gibt eine CSS-Lösung dafür.

Nehmen wir mal folgendes Suchformular:

<form method="get" id="sampleform1" action="search">
	<h2><label for="s">Search</label></h2>
	<input type="text" value="" name="s" id="s" />
	<input type="submit" id="searchsubmit" class="submit" value="Search" />
</form>

(Man kann statt »input« auch ein »button«-Element für den Such-Button verwenden.)

Das Problem

Gestylt mit etwas CSS (Siehe die Beispielseite für Details) erhält man das Folgende Ergebnis. Hierbei wurde etwas »padding« zu beiden Input-Elemeten hinzufügt, um die gewünschte Höhe zu erhalten:

Wie man sehen kann ist der Button höher als das Eingabefeld in Firefox, der IE8 verhält sich wie Safari. Man könnte versuchen, das ganze mit hinzufügen einer Höhenangabe »height« zu lösen, dann aber passiert folgendes:

Immer noch sieht’s in Safari gut aus, aber im Firefox ist der Eingabe-Text nicht mehr vertikal zentriert. Außerdem steht der Text im Button etwas zu tief. Eine Höhenangabe ist also keine Alternative, wie auch die erwähnte Beispielseite zeigt.

Die Lösung

Wir gehen noch einmal zurück und nutzen doch »padding«. Das Problem liegt innerhalb der form.css von Firefox’ Benutzer-Stylesheet. Hier erhält der Button einen zusätzlichen Rand (»border«) für die Fokus-Pseudo-Klasse (»:focus«). Durch hinzufügen von

input[type="submit"]::-moz-focus-inner {border:0;}

zu unserem CSS können wir diesen zusätzlichen Rand entfernen und die Höhe des Buttons ist gleich hoch wie in Safari:

Weil wir nun keinen »:focus«-Stil für Tastaturnutzer mehr haben, müssen wir diesen natürlich ergänzen, in diesem Fall habe ich einfach eine andere Hintergrundfarbe gewählt.

input[type="submit"]:focus {background:#333;}

Nun, das wär’s.

Wann braucht man das?

Wir sprechen hier grade mal über zwei Pixel und man kann natürlich einfach sagen, das ist nicht so schlimm. Es kann aber dann wichtig werden, wenn man den Button innerhalb des Suchfelds platzieren möchte, um eine geschlossene Einheit zu bilden, wie das folgende Beispiel zeigt:

Wenn in diesem Fall die Höhe nicht stimmt, sieht es nicht mehr gut aus.

Eine andere Lösung wäre die Verwendung von Bildern als Button. Da es aber eine CSS-Lösung gibt und mittlerweile auch mittels CSS3 schöne Buttons gestaltet werden können, muss nicht immer ein zusätzliches Bild her.