zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Problem mit Firefox: erzeugt ungewollten Abstand (margin oder padding)

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 07.09.2006, 19:32
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
  #2 (permalink)  
Alt 07.09.2006, 19:58
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 28.01.2005
Beiträge: 11.779
fricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz sein
Standard

Zitat:
Zitat von braindead
1. Wie kann ich den Abstand den allein der FF macht verhindern? (siehe Code 1)
Welche Version des FF verwendest du? Mein FF 1.5 zeigt das geschilderte Problem nicht.

Zitat:
2. Ist es vom W3C so gewollt der der Border eines Kindelementes vom Elternelement ignoriert wird?
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
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 07.09.2006, 20:05
Erfahrener Benutzer
XHTMLforum-Mitglied
Thread-Ersteller
 
Registriert seit: 24.09.2003
Beiträge: 243
braindead befindet sich auf einem aufstrebenden Ast
Standard

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.
Mit Zitat antworten
  #4 (permalink)  
Alt 07.09.2006, 20:09
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 01.09.2006
Beiträge: 249
bastien befindet sich auf einem aufstrebenden Ast
Standard

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
Mit Zitat antworten
  #5 (permalink)  
Alt 07.09.2006, 20:13
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 28.01.2005
Beiträge: 11.779
fricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz sein
Standard

Zitat:
Zitat von braindead
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?
Ich sehe keinen Abstand.
Angehängte Grafiken
Dateityp: gif FF.gif (6,7 KB, 10x aufgerufen)
Mit Zitat antworten
  #6 (permalink)  
Alt 07.09.2006, 20:25
Erfahrener Benutzer
XHTMLforum-Mitglied
Thread-Ersteller
 
Registriert seit: 24.09.2003
Beiträge: 243
braindead befindet sich auf einem aufstrebenden Ast
Standard

Komisch bei mir sieht es so aus.
Dafür muss es doch einen Grund geben?
Angehängte Grafiken
Dateityp: png screen02.png (27,6 KB, 8x aufgerufen)
Mit Zitat antworten
  #7 (permalink)  
Alt 07.09.2006, 20:34
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 28.01.2005
Beiträge: 11.779
fricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz sein
Standard

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).
Mit Zitat antworten
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ä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


Alle Zeitangaben in WEZ +2. Es ist jetzt 17:57 Uhr.