Blogpotato

Das button-Dilemma [4x upd]

Freitag, 4. Mai 2007

[update]: Sexy CSS Buttons fällt da gerade aus meinem Feedreader bzw. aus den Sidenotes von Wolfgang Bartelme. Sagen wir es mal so: Mit normalem Markup kann ich das auch (was nicht heißen soll, dass button unnormal ist, es ist eben aber eine Tretmineein Formularelement).

[update 2]: Auch meine Buttons wachsen nicht in der Höhe mit, wie sich das Manuela Hoffmann für die „Sexy CSS Buttons” wünscht. Eine entsprechende Anpassung dürfte eher unkritisch sein, scheint mir aber derzeit nicht wirklich Sinn zu machen, solange eben Firefox rumzickt.

[update 3]: Für alle, die etwas tiefer in die Materie einsteigen wollen: Eric Meyer beleuchtet als Reaktion auf Kommentare zu seinem Artikel Reset Reloaded die Probleme sehr ausführlich und auch Roger Johansson nimmt sich aktuell dem Thema an.

[update 4]: Eric Eggert hat den Artikel von Eric Meyer für die Webkrauts ins Deutsche übersetzt.

Oder: Wer ist hier eigentlich der Böse?

Ich nutze bereits seit einiger Zeit button anstelle von input – primär deshalb, weil dann auch Safari dem Button nicht mehr durch CSS zugewiesene Styles verweigert.

Dass das Ganze nicht unproblematisch ist, ist keine neue Erkenntnis. Vor allem der Internet Explorer kann mit dem Element eher leidlich umgehen. Hat man mehr als einen button mit Submit-Funktion im Formular, ist beim Explorer nicht feststellbar, welcher gedrückt wurde – er peilt es einfach nicht. Und auch der margin, den der IE rechts und links zwanghaft an den Button setzt, ist immer wieder ärgerlich, zumindest dafür gibt es aber Hacks, um das Problem aus der Welt zu schaffen.

Die heutige Aufgabenstellung hört sich eher unspektakulär an: Rote Formularbuttons sind gewünscht, mit einem leichten Verlauf im Rot, abgerundeten Ecken und Schlagschatten. Das ganze soll sich natürlich dynamisch an die Laufweite des Buttontextes anpassen.

Alles kein Problem. Nach alter Sliding Doors-Schule im Photoshop zwei Bilder gemacht, eine Handvoll CSS in die Tastatur geklimpert und schon erinnert an die zwei häßlichen grauen Standardbuttons nur noch der gleichlautende Text im Beispielbild.

button {
	background: #FFF url(/img/button-right.gif) no-repeat right top;
	border: none;
	color: #FFF;
	font-weight: bold;
	height: 30px;
	margin-bottom: 1em;
	padding-right: 20px;
	text-align: center;
}
 
	button span {
		background: url(/img/button-left.gif) no-repeat top left;
		display: block;
		line-height: 25px;
		padding-left: 14px;
		height: 30px;
	}

Erster Versuch in Safari
Erster Versuch in Opera

Dass der IE da eine andere Meinung hat überrascht wenig, aber es verwundert dann doch, dass auch Firefox das ganze nicht so darstellt wie gedacht.

Erster Versuch im Internet Explorer
Erster Versuch im Firefox

Die Probleme mit dem IE lassen sich mit wenigen Handgriffen und eben dem Hack von Jehiah zurechtbiegen. Man sollte aber bei der width-Angabe anstatt 1 besser 0 schreiben und für die guten Browser ein Attribut im Selektor benutzen, das bei einem Submit-Button auf jeden Fall da ist, beispielsweise type.

	button {
		background: #FFF url(/img/button-right.gif) no-repeat right top;
		border: none;
		color: #FFF;
		font-weight: bold;
		height: 30px;
		margin-bottom: 1em;
		overflow: visible;
		padding-right: 20px;
		text-align: center;
		width: 0;  /* IE fix */
	}
 
		button[type] {
			width: auto;  /* cancel ie fix for other browsers */
		}
 
		button span {
			background: url(/img/button-left.gif) no-repeat top left;
			display: block;
			line-height: 25px;
			padding-left: 14px;
			height: 30px;
		}

Zweiter Versuch im Internet Explorer

Was dann aber doch erst die halbe Miete ist. Ein white-space: nowrap sorgt schließlich dafür, dass auch der restliche Text erscheint.

Dritter Versuch im Internet Explorer

Bleibt noch Firefox. Der wehrt sich mit Händen und Füßen. button span ergänzt um

	button span {
		[...]
		left: -3px;
		position: relative;
		top: -1px;
		[...]
	}

bringt Firefox auch zur Räson. Anders kommt man dem margin, den er beharrlich zwischen Button und span-Element setzt, nicht bei. Die Lösung hat nur einen Schönheitsfehler: Die Darstellung in allen anderen Browsern ist zum Teufel, das span-Element sitzt dort einen Pixel zu hoch und drei Pixel zu weit links. Was nicht wirklich eine Überraschung ist. Für den IE könnte man hier jetzt wieder mit Conditional Comments gegensteuern, aber was ist mit den anderen Browsern? Leider macht dieser Bug in Firefox die Benutzung von button anstelle von input nahezu unmöglich – zumindest wenn die Gestaltung über einfaches Umfärben von Vorder- und Hintergrundfarbe hinausgeht. -moz-top und -moz-left wären in dem Fall hilfreich, Hacks für den Firefox findet man nirgends, da eigentlich immer der IE der Böse ist. Dies ist wohl die berühmte Ausnahme, um die Regel zu bestätigen…

Auch sonst zeigt sich Firefox bei Formularelementen von seiner launischen Seite.

body {
	font-size: 70%;
}

scheint ihn für die Buttons überhaupt nicht zu interessieren. 100% ist die Schrift dann aber auch nicht groß, eher irgendwas dazwischen. Auch Safari ist in dem Fall nicht hundertprozentig akkurat, aber doch näher an der Vorgabe als Firefox:

Schriftgrößenprobleme im Firefox
Weniger gravierende Schriftgrößenprobleme in Safari
In beiden Fällen hat der erste Absatz eine Schriftgröße von 100%, der Button und der zweite Absatz von 70%.

Schönes Minenfeld, das Gestalten von Formularelementen. Wollen wir mal hoffen, dass die Firefox-Entwickler das schnellstmöglich in den Griff bekommen.

Technorati Tags: xhtml, css, forms, button, styling, firefox, margin

Veröffentlicht in: Web, (X)HTML und CSS.

4 Kommentare zu “Das button-Dilemma [4x upd]”

1. Thiemo Gillissen meint:
   Freitag, 11. Mai 2007 um 19:39

   sehr schön, danke für den tipp

2. Andreas Stephan meint:
   Dienstag, 19. Juni 2007 um 16:33

   Vielen Dank, habe gerade ca. 2 Stunde damit verbracht und war kurz davor zu glauben, dass ich einfach zu dumm bin. Meine Lösung ist jetzt ein zusätzliches um das -Element auf das ich jetzt das css anwende. Das funktioniert cross-browser und einwandfrei.

3. Maik Kempe meint:
   Montag, 13. August 2007 um 22:03

   Hey Matt, lass einfach die Angabe für die ‘height’ in der Definition für das button-element weg. Siehe auch: http://www.filamentgroup.com/lab/buttonElement/
   Böse Firefox! Trotzdem noch immer der bester Browser auf Erden!

4. Blogpotato » Blog Archive Und es bewegt sich doch… (button-Dilemma, revisited) » meint:
   Freitag, 17. August 2007 um 09:03

   [...] Dank geht an Maik, der hier in den Kommentaren auf eine Lösung des button-Dilemmas [...]

Kommentieren