CSS - Versatz durch Button

[Friedel]

Hallo,

der Quellcode

<ul>
  <li><button id="o1" disabled><img src="minus.gif" alt="" class="ex_bild"><img src="offen.gif" alt="" class="listicon">HTML-Crashkurs</button></li>
  <li>                         <img src="minus.gif" alt="" class="ex_bild"><img src="offen.gif" alt="" class="listicon">CSS Einsteigerkurs     </li>
</ul>

erzeugt folgende Ausgabe:

bei folgenden Formatierungen:

.ex_bild   {height:1.6em; width:20px; margin:-0.3em 0;}
.listicon  {height:1em; margin-right:0.5em;}
li         {list-style-type: none;}
button     {border: none; color:inherit; background-color:transparent; margin:0; padding:0; font-size:inherit;}

Ich wüsste gerne, woher der Versatz beim Buttoninhalt kommt. Warum ist der Inhalt des ersten <li> gegenüber dem 2. versetzt? Und wie kann ich das ändern?

[Matthias Apsel]

Hallo Friedel,

Das liegt am button-Element. Ich vermute, das tritt nur im Firefox auf.

::-moz-focus-inner {
    padding: 0;
    margin: 0;
    border: 0;
}

könnte helfen.

Bis demnächst
Matthias

[Friedel]

Danke. Stimmt, das tritt nur im FF auf. Und dank dir jetzt auch dort nicht mehr.

[Gunnar Bittersmann]

@@Matthias Apsel

::-moz-focus-inner {
    padding: 0;
    margin: 0;
    border: 0;
}

könnte helfen.

Das hat aber zur Folge, dass wenn man der Rahmen des Buttons per CSS entfernt (was hier wohl der Fall ist) keine gepunktete Linie mehr zu sehen ist, wenn der Button den Fokus hat, was die Tastaturbedienung unmöglich macht. Man muss unbedingt dran denken, einen Stil für :focus anzugeben!

Ansonsten kann man auch

::-moz-focus-inner
{
	padding: 0;
	margin: -1px;
	border-width: 1px;
}

verwenden.

LLAP 🖖

[Friedel]

Danke für den Hinweis. Den gepunkteten Rahmen hatte ich vorher schon mit outline:0; entfernt. Das mit der Tastaturbedienung hätte sich trotzdem machen lassen, aber ich habe noch nicht daran gedacht, es auch zu testen. Aber ich ändere das einfach gemäß deinem Tipp.