Ich möchte <button>s in verschiedene Klassen einteilen und sie mit einem 16x16-Symbol ausstatten. Erst hatte ich das Bild via background eingebunden und ausgerichtet (klappt natürlich).
Doch da die Buttons ausgefallener werden sollen und ich dafür Hintergrundbilder brauche, möchte ich sie per content-Angabe in button:before einbinden:
1:
2:
3:
4:
5:
6:
7:
8: | button { border: 1px solid #666; padding: 1px 10px 2px 2px; }
button.add { border-color: #393; }
button.add:before { content: url("add.png"); }
button.add:hover { background-color: #bdb; }
button:hover { padding: 2px 11px 3px 3px; border: 0 none; }
|
1: | <button class="add">Hinzufügen</button> |
Im Wesentlichen soll das Aussehen hinterher dem von
1: | <button><img alt="" src="add.png" style="vertical-align:bottom" />Hinzufügen</button> |
entsprechen, jedoch wird das Bild nicht in der richtigen Höhe angezeigt.
Hat jemand eine Idee, wie das Bild hinzubiegen ist? (Es hat wohl damit zu tun, dass unter dem Bild ein seltsamer Abstand ist, den ich nicht herausoperieren konnte... der lässt sich mit einer border-Angabe sichtbar machen.)
Ein
(nicht) funktionierendes Beispiel gibt es auch.
