Hi,
ich versuche gerade eine horizontale Navigationsleiste, zu realisieren. Ich will die Menüpunkte über eine Button Navigation mit einem nicht grafischen CSS Hover Effekt ausstatten.
Jedenfalls ich ich dabei auf ein Problem gestoßen.
Wenn ich einen einfachen unformatieren Div-Block als Kontainer für die Navigation verwende (er bestizt nur sicherheitshalber die Eigenschaften: padding:0px und margin:0px) und diesem eine Hintergrundfarbe gebe, und den darin enthaltenen a Tags ebenfalls eine Hintergrundfarbe gebe (eine die sich von dem Navi Div Kontainer unterscheidet), dann fällt auf das der Firefox, den A Tags entweder ein margin-bottom:1px oder dem Navi Div ein padding-bottom:1px zuweist.
Das kann ich aber nicht korrigieren, d.h. es bleibt immer ein ungefähr 1 pixel breiter Abstand zwischen dem unteren Rand des Links und dem unteren Rand des Blocks.
Ich habe den Code auch im Opera und im IE Browser getestet, dort gibt es diesen Abstand nicht.

Welcher Browser liegt denn jetzt Richtig? Und gibt es vieleicht eine Möglichkeit das zu korrigieren?
Ich hätte eben gerne eine horizontale Navigation wie auf diesen Seiten, und diese Funktionen auch im Firefox ohne ungewollten Abstand:
http://jendryschik.de/wsdev/einfuehrung/
http://www.webcredible.co.uk/user-fr...ion-menu.shtml

Desweiteren ist mir aufgefallen, dass, wenn ich in der oben genannten Konstellation, den A-Tags einen Border zuweise, dann scheint der Border, keinen zusätzlichen Platz einzunehmen, sondern einfach, bei entsprechenden Dicke bis in über den Rahmen des Div-Kontainers zu wachsen, und nicht wie erwartet, diesen einfach zu vergrößern, denn der Div Kontainer hat keine festgelegte Höhe. Und dies tritt mind. beim Firefox und beim Opera auf.

Hier ist der Code zu dem Abstandsproblem das nur beim FF auftaucht:
Und wenn man das ganze noch so modifiziert:
Dann sieht man das zweite, aber viel weniger wichtige, von mir angesprochene Problem, mit dem Border der über die Ausmaße, des Elternelementes geht anstatt dieses zu erweitern.

Aber zusammenfassed:
1. Wie kann ich den Abstand den allein der FF macht verhindern? (siehe Code 1)
2. Ist es vom W3C so gewollt der der Border eines Kindelementes vom Elternelement ignoriert wird?

Welche Version des FF verwendest du? Mein FF 1.5 zeigt das geschilderte Problem nicht.

In dem Kontext, den du zeigst: ja.
Dein Link ist ein inline-Element. Bei inline-Elementen werden oberer/unterer Rahmen (oder auch padding/margin) nicht für die Berechnung der Höhe einbezogen.
Die Höhe des umgebenden Blockelements ergibt sich aus der Zeilenhöhe.
Siehe auch:
http://www.w3.org/TR/CSS21/visudet.h...e-non-replaced
http://www.w3.org/TR/CSS21/visuren.h...ine-formatting
http://www.w3.org/TR/CSS21/visudet.html#line-height

Viel Info zu Navigationslisten:
http://css.maxdesign.com.au/index.htm

Ok das zweite Problem wäre geklärt.
Zum 1.:
Ich benutzt die Version 1.5.0.6
bist du sicher das den Abstand nicht übersiehst, der ist wirklich sehr gering. Vieleicht siehst du den Unterschied, wenn du das Beispiel mal im Opera oder/und IE anschaust?
Bei mir ist es jedenfalls zu sehen. Wäre jetzt blöd wenn die Sache schon so anfängt.
Ich kucke mal ob es noch eine aktuellere Version des Firefox gibt.
Vieleicht kann ja noch jemand anderes Posten ob er den Abstand sieht oder nicht.

das gleiche problem das hier niemanden interessierte habe ich auch, denke zumindest ist das gleiche

http://xhtmlforum.de/41791-ie-6-ok-aber-ff-1-a.html

Ich sehe keinen Abstand.

Angehängte Grafiken

FF.gif (6,7 KB, 10x aufgerufen)

Komisch bei mir sieht es so aus.
Dafür muss es doch einen Grund geben?

Angehängte Grafiken

screen02.png (27,6 KB, 8x aufgerufen)

Der Grund ist wohl die Höhe der Zeilenbox, die nicht bei allen Schriften gleich ist (Rundungsfehler?). Meine Standardschrift ist nicht die Times New Roman.
Das ganze Problem erledigt sich vermutlich, wenn du von inline- zu Block-Darstellung wechselst (float für horizontale Navigation).