|
|||
Problem mit Firefox: erzeugt ungewollten Abstand (margin oder padding)
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: Code:
<html> <head> <title>Nur ein Test</title> </head> <body> <div style="background-color:orange"> <a href="http://www.webseite.de" style="background-color:blue">Ein Link</a> </div> </body> </html> Code:
<html> <head> <title>Nur ein Test</title> </head> <body> <div style="background-color:orange"> <a href="http://www.webseite.de" style="background-color:blue;border:3px solid green">Ein Link</a> </div> </body> </html> 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? |
Sponsored Links |
|
|||
Zitat:
Zitat:
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 |
Sponsored Links |
|
|||
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 |
|
|||
Zitat:
|
|
|||
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). |
|
|
Ähnliche Themen | ||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
Fragen zu CSS und Joomla | DOKTOR | CSS | 2 | 23.05.2011 19:29 |
vielleicht ein padding Problem? aber nur in firefox. | babanouel | CSS | 5 | 03.04.2011 12:10 |
Einbindung von frei erhältlichen Scripten - CSS Problem | DonL | CSS | 1 | 22.01.2011 16:09 |
Untermenüpubkte mit eigener Hintergrundgrafik | Callidus | CSS | 3 | 03.08.2008 10:24 |
Probleme mit IE6 | marthe | CSS | 22 | 24.09.2007 17:07 |