Thomas Luethi: Navi

Beitrag lesen

Hallo,

Ich habe die Seite nur schnell in Firefox 3 und MS IE 7 angeschaut und
sehe, was Du meinst. Du hättest übrigens besser gleich eine Unterseite, z.B.
http://www.fancy4web.ch/haefliger/pages/partner.html
angegeben und gesagt, dass es dort um den Eintrag "Partner" in
der Navigation geht, welcher in gewissen Browsern grau in den
weissen Inhaltsbereich hineinragt.

Grundsätzlich kann es heikel sein, bei Längenangaben eine
Mischung von px und em zu machen. Der CSS-Validator gibt/gab
denn auch entsprechende Warnungen aus, wenn man in einem
Deklarationsblock oder in einer Deklaration beiderlei Einheiten
mischte, z.B. * { margin:5px 0.5em; }

Nach dem geposteten CSS kommt die Navigation auf folgende Höhe:
[Höhe des Buchstabens] + 2*0.5em (padding a) + 2*5px (margin ul)
Dazu könnten noch kommen: margin und padding von li (gemäss den
internen Einstellungen des Browsers, da Du es nicht explizit
definierst), padding-top von ul (dito).
Du hoffst jetzt, dass das alles in einer Höhe von 26px Platz hat.
Aber weisst Du es mit Gewissheit? Ist die Schriftgrösse festgelegt?

Wenn man wissen will, wie gross eine Box ist, hilft es oft, ihr
vorübergehend einen sichtbaren Rahmen zu geben, z.B. so:
#navi ul li { border:1px dotted blue; }
Natürlich kommt dieser Rahmen beim Zusammenzählen dann noch dazu,
aber er zeigt, wie gross eine Box tatsächlich ist, was oft etwas
anders ist als das, was man erwartet hätte...

Eine Lösung kann ich Dir auch nicht auf Anhieb präsentieren,
und ich habe jetzt auch gerade keine Lust, Dein ganzes HTML
und CSS zu kontrollieren.
Aber vielleicht hilft es ja, einfach für die ganze Navigation
(d.h. für #navi sowie für #navi ul und #navi ul li und #navi ul li a)
mal die Vorder- und Hintergrundfarbe festzulegen (wobei die letztere
ausschlaggebend wäre, aber man ja immer beide Farben angeben sollte,
um Konflikte zu vermeiden.) Und dass Du ganz schön viel solches
Konfliktpotential hast, sagt Dir der CSS-Validator

Der HTML-Validator hat (bei der genannten Seite) nur zu meckern,
dass Du im <html>-Element kein xmlns-Attribut hast.
Ich rate Dir trotzdem dringend, für validen HTML- und CSS-Code zu sorgen,
bevor Du Dir über winzige Layout-Details im Pixelbereich Gedanken machst.

Ach ja, diese Deklaration ist etwas unsinnig:
border-bottom : 0 solid #ced7ae;
Wenn Du keinen Rahmen willst, schreib es so:
border-bottom: 0 none;
oder halt so:
border-bottom-width: 0;

HTH, mfg
Thomas