Der rote Kreis ist rund stehend oval und liegend oval je nach Betriebssystem

[Rolf B]

Hallo Günter,

Lösung: Gib dem Button ein position:relative;!

Das hast Du aber nicht! Guck Dir im Zweifelsfalls nochmal an, wie das Beispiel im Wiki den Button mit verstecktem Text erzeugt.

Hintergrundinfo: Ein span-Element hat von Hause aus display:inline;. Ein inline-Element akzeptiert die width- und height-Eigenschaften nicht, sondern berechnet sie aus seinem Inhalt (unter anderem, weil es umgebrochen werden kann). Ein absolut positioniertes Inline-Element hingegen bekommt vom Browser display:block; zugewiesen, so dass man width und height setzen kann. Hab ich auch gerade erst gelernt, ich hatte mich schon gewundert, weshalb das Wiki-Beispiel kein display:block; gesetzt hatte. Du hast das span-Element auf position:relative gesetzt, wodurch die inline-Eigenschaft zurückkam, width und height nicht mehr wirken und der Text sichtbar wurde.

Rolf