Thema: Abstand zwischen den Buttons unregelmässig

So ganz bin ich nicht drauf gekommen...
Hat aber etwas mit deinem Padding und dem Hintergrundbild zu tun. Die weiße Linien entstehen bei dir dadurch, dass das Hintergrundbild "zu klein"ist. Blockhöhe bei dir 16+2xPadding von 3px = 20px Gesamthöhe. Das Hintergrundbild hat aber nur 20px Höhe. nun ist das Bild nicht in der Höhe platziert.

Gehe anders vor!

Dem Block eine Hintergrundfarbe geben und die weißen Linien entweder mit "border:1px #fff solid;" oder mit "margin: 1px;" arbeiten.
Dann nur dem Hovereffekt ein transparentes Hintergrundbild mit dem Apfel geben. Nebeneffekt: Weniger Daten zu laden, da ein Bild wegfällt.
Somit hast du die volle Kontrolle über die Ränder und Abstände.

Zitat von sgue

So ganz bin ich nicht drauf gekommen...
Hat aber etwas mit deinem Padding und dem Hintergrundbild zu tun. Die weiße Linien entstehen bei dir dadurch, dass das Hintergrundbild "zu klein"ist. Blockhöhe bei dir 16+2xPadding von 3px = 20px Gesamthöhe. Das Hintergrundbild hat aber nur 20px Höhe. nun ist das Bild nicht in der Höhe platziert.

Gehe anders vor!

Dem Block eine Hintergrundfarbe geben und die weißen Linien entweder mit "border:1px #fff solid;" oder mit "margin: 1px;" arbeiten.
Dann nur dem Hovereffekt ein transparentes Hintergrundbild mit dem Apfel geben. Nebeneffekt: Weniger Daten zu laden, da ein Bild wegfällt.
Somit hast du die volle Kontrolle über die Ränder und Abstände.

Hi Danke für die Antwort! Vielleicht hast mich falsch verstanden:
Die weisen abstandslinien sollen eh da sein! Nur leider sind nicht alle gleich "hoch"
Alle Abstandslinien sollen exakt die gleiche Höhe haben - nicht so wie bei!
Gruß Jürgen

Nun bin ich selber auf den Fehler gestossen:
Folgende Zeile:

Code:

html, body { background: #666666 url(../images/background.png) repeat left top; text-align: center; font-family: Arial, sans-serif, Verdana, Helvetica; font-size:12px; line-height: 1.3; color: #555;}

hier habe ich "line-height: 1.3;" so geändert -> "line-height: 1.;"
Also:

Code:

html, body { background: #666666 url(../images/background.png) repeat left top; text-align: center; font-family: Arial, sans-serif, Verdana, Helvetica; font-size:12px; line-height: 1.; color: #555;}

Kann mir das wer erklären?
Jedenfalls passt es jetzt - nur würd ich es gern verstehen
gruß Jürgen