andynail: Button mit Background + icon + Text

Beitrag lesen

Hallo zusammen

ich will auf meiner Webseite Schaltflächen erstellen, die als Hintergrund einen grafischen Verlauf von Weiß nach Grau zeigen, und vorne sollen Icons und Text angezeigt werden.

Und so nehme ich hierfür die Zeile:

<button id="Aktuell" type="button" onfocus="this.blur()" onclick="AktuellerLink()" style="background: url('Pictures/Button.jpg'); height:40px; width:120px; text-align:left; padding:0; border-top:0" title="Auswahl den Favoriten hinzufügen"><img src="Pictures\Sunny.ico" width="32" height="32" align="middle" alt="Denker">  Favoriten</button>  

Aber leider zeight der FireFox den Text nie vertikal zentriert, sondern immer auf gleicher Höhe wie die Grafik an. Das ich border-top:0 schreibe liegt daran, dass ansonsten so blöd störende Striche angezeigt werden. Das würde ich auch gerne in den Griff bekommen. Hier stört es nicht so, dass da ein Strich angezeigt wird, aber die Buttons sollen auch anderswo noch in Einsatz kommen, und da Soll das Ganze bitte wie ein Button aussehen. Auch stört es mich, dass Abstände zwischen den Buttons vorhanden sind, was sich ja mit einer Tabelle in den Griff bekommen könnte.

Aber es geht mir erst einmal an erster Stelle um den Text hinter den Icons!

Würde mich also freuen wenn mir jemand helfen könnte.

Danke Gruß Andreas