Einzelnen Beitrag anzeigen
  #1 (permalink)  
Alt 07.09.2006, 20:32
braindead braindead ist offline
Erfahrener Benutzer
XHTMLforum-Mitglied
Thread-Ersteller
 
Registriert seit: 24.09.2003
Beiträge: 243
braindead befindet sich auf einem aufstrebenden Ast
Frage 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>
Und wenn man das ganze noch so modifiziert:
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>
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?
Mit Zitat antworten
Sponsored Links