Aloha ;)
Okay - Problem 2 habe ich auch am Schopf. Ich habe zwar (noch) keine Lösung, aber die Entwicklertools haben mir den Fehler aufgezeigt:
Zunächst hatte ich gesehen, dass das keine richtige Leerzeile ist - denn weder im Code noch im CSS sind sie abgebildet. Laut Tools ist das label 22px hoch und das li 46px. Es ist also irgend ein Leerraum innerhalb des li da, der Probleme macht.
Ich hab in den Entwicklertools einfach mal nach und nach zunächst alle CSS-Regeln für das li abgeschaltet. Hat nix gebracht. Dann neu geladen. Dann die erste Eigenschaft des label abgeschaltet (padding in mein.css:311) und tada: Der dämliche Abstand war weg.
Okay, das ist noch keine Lösung. Über die muss ich jetzt noch hirnen. Und testen mit Entwicklertools ;)
*hirn und test*
Was mir als erstes auffällt: Wenn ich in den Entwicklertools über das fragliche Element fahre, werden mir ja im Browser-Hauptfenster seine Abmessungen gezeigt. Ohne padding passt das Element rein, mit padding steht es über.
Ich hatte dann die Vorahnung, dass es mit dem Überstand zusammenhängt. Ich dachte mir: Bestimmt fügt Chrome dann eine Leerzeile ein, wenn inline-Elemente über die Zeilenbreite hinausgehen. (Denn das ist ja auch sinnvoll. Wenn ich ein Wort schreibe, das über die Zeilenbegrenzung hinausgeht, soll ein Umbruch geschehen und das Wort komplett in die nächste Zeile gehen.
Ich hab die These getestet, und siehe da: Es stimmt. Du hast zwei Möglichkeiten.
-
Du sagst Chrome, es soll die a von außen nicht mehr als inline-Elemente behandeln. Also
display:block;
stattdisplay:inline-block;
in mein.css:279... Das habe ich getestet (in den Entwicklertools), das funktioniert. -
Du verhinderst, dass das a über die Zeile hinausgeht. Indem du die width verkleinerst. Damit das ordentlich mit Prozentwerten geht, muss padding auch in Prozent angegeben sein (außer du weist den Browser an, ein alternatives Boxmodell zu nutzen). Getestet habe ich mit
padding-left:10%;
undwidth:90%;
, das funktionierte wunderbar.
Übrigens: Indirekt hatte ich das drohende Problem mit dem Überstand schonmal angesprochen :P Wenn auch nicht so direkt und in dieser Absicht, also auch hier, no blame ;) Und auch hier gilt: Ohne Entwicklertools hätte ich weder Problem noch Lösung gefunden :P
Grüße,
RIDER
Camping_RIDER a.k.a. Riders Flame a.k.a. Janosch Zoller
ch:? rl:| br:> n4:? ie:% mo:| va:) js:) de:> zu:) fl:( ss:| ls:[