XHTML und NAV - Fehlermeldung bei W3C

[Camping_RIDER]

Aloha ;)

Ein kleines Gestaltungsproblem hab ich jetzt noch:

Die erste Menüebene und die erste Unterebene, haben jeweils 2 Pixel Abstand zu einander.

Warum auch immer gab es nun aber einen 4 Pixel Abstand der dritten Ebene (die schwarz bzw. dunkelgrau unterlegte) zur Überschrift der zweiten Ebene.
Ich habe die Ursache dafür nicht gefunden, aber wenn ich die <LI> der dritten Ebene so formatiere:
[...]
Und wie ich gerade sehe, überschreibe ich diesen Eintrag kurz danach (in meinem CSS) durch:
[...]
Na, abgesehen davon... ist mit diesen -3 Pixeln zumindest der Abstand der "dunklen" Einträge zur "bunten" Überschrift so wie sie sein soll.

Ich versteh aber nicht, wo dieser große Abstand herkommt und warum ich mit diesen -3px ihn ausgleichen muss.

Denn da die dritte Menüebene mit kleiner Schrift gestaltet ist und die Höhe der Zeilen entsprechend geringer ist, will ich hier nicht die 2 px Abstände zueinander haben, sondern nur 1 px.

Habe inzwischen die Lösung für dein Problem gefunden ;) Ich hab mal testweise die von dir gemachten Fixes rausgenommen und dann die border-Regel der li's zu-und-weggeschaltet. Es fällt auf, dass bei abgeschaltetem border die Elemente der ersten und zweiten Ebene nahtlos zusammenfallen, die der dritten Ebene aber nicht (diese haben dann noch einen Abstand von ~ 1-2 px. Soweit so klar (irgendwas musste ja innen mehr sein). Bleibt noch die Frage, woher das kommt.

Das inspizieren der li- und a-Elemente der dritten Ebene sagt mir dann folgendes:
1.: Der schwarze Abstand liegt ganz innerhalb der li-Elemente (sprich: weder margin, noch padding, noch border, sondern innerhalb der eigentlichen Box).
2.: Der schwarze Abstand liegt außerhalb der a-Elemente (auch hier weder margin, noch padding, noch border, aber außerhalb der Box).
3.: Der schwarze Abstand ist wie eine Art Trennlinie zwischen li und ihrem ersten Kindelement (a)

Okay - woher kommt der Abstand, wenn nicht durch margin, padding oder border? Gute Frage. Antwort: Es liegt daran, dass die a-Elemente die li-Elemente in der Höhe nicht komplett ausfüllen. Auch hier wohl ein Problem der Formatierung mit inline-block. Sobald ich die a-Elemente mit display:block formatiere, ist das Problem behoben. Ich glaube, auch den Grund für das Problem zu kennen (denn die Notation mit inline-block ist ja eigentlich und an sich unproblematisch). Es muss irgendwas mit font-size / line-height zu tun haben (denn wenn ich die rausnehm, funktionierts auch).

Wahrscheinlich ist es so, dass deine li-Elemente ihre Höhe aus der ihnen vorgegebenen Schriftgröße berechnen. Das wäre der Wert font-size:16px. Innerhalb der li-Elemente liegen a-Elemente, die eine kleinere Schriftgröße (font-size:14px) haben. Die a-Elemente sind dadurch prinzipiell nur 14px hoch, also 2px kleiner. Daher füllen sie die li-Elemente nicht ganz aus und du bekommst den sichtbaren Zusatzabstand. Die line-height mischt da zusätzlich noch mit und macht den Abstand wieder kleiner, das Prinzip bleibt aber das gleiche. (Bei display:block bezieht das a seine Größe nicht mehr aus der Schriftgröße, daher passts da auch).

Verschiedene Lösungsmöglichkeiten:

1.) Die a als display:block formatieren

2.) Alle Einstellungen zu font-size/line-height von den a in die darüber liegenden li packen. Durch Vererbung kriegens die a dann auch mit und das Verhältnis zwischen li-Höhe und a-Höhe passt.

Grüße,

RIDER