| von Ori |
Herumspielen hat eine gute Lösung für beide Browser in der <img>-Variante gebracht (vertical-align: bottom).
Durch weiteres Basteln ist auch eine Lösung für die content-Variante entstanden: Opera ignoriert bei der Ausrichtung font-size. In beiden Browsern schiebt line-height nach oben, im Firefox schiebt font-size nach unten. Da beide bei unterschiedlichen Verschiebungen starten, konnte ich es hinfummeln:
1: | button:before { margin-right: 4px; vertical-align: bottom; line-height: 8px; font-size: 10px; } |
Ich habe auch noch die Angabe overflow: visible an entsprechenden Stellen hinzugefügt, damit der IE etwas weniger Platz verschwendet.
Also: Problem gelöst, auch wenn die Lösung komisch ist. |
| von Ori |
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. |
|
