nicht angemeldet
Navi
Beim I/E 6+7 alles i.O.
Beim I/E 8 und Firefox überlappt die aktive Farbe die Grösse der Navi um ca. 1 - 2 px. Dies stört mich. Kann mir jemand sagen, was ich ändern muss? Nachstehend der Code in der CSS-Datei:
#navi {
background : #b62913;
border-top : 6px solid #555;
border-bottom : 0 solid #ced7ae;
height : 26px;
width : 940px;
text-align : center;
}
#navi ul {
margin : 5px 0 5px 0;
padding-bottom : 0;
padding-right : 0;
list-style-type : none;
font-family : verdana, sans-serif;
font-size : 0.8em;
}
#navi ul li {
display : inline;
}
#navi ul li a {
text-decoration : none;
padding : 0.5em 1.5em;
color : #f1f1f1;
font-weight : bold;
letter-spacing : 0.1em;
}
#navi ul li a:hover {
color : #ae6a5b;
font-weight : bolder;
}
#startseite #nav-startseite, #plattenwelt #nav-plattenwelt, #ueber_uns #nav-ueber_uns, #kontakt #nav-kontakt, #partner #nav-partner, #reinigungsmittel #nav-reinigungsmittel, #navi li a:active {
color : #fff6ff;
background : #555;
border-top : 0;
}
-
Hallo erstmal,
also ich kann dir schon folgen, weis allerdings nicht was du genau meinst?
Ich habs jetzt mal mit den beiden neuen FF und IE getestet finde aber keinerlei Anzeigefehler oder sonstiges.Erklär mal genau, was du meinst.
Gruß Georg
-
Hallo erstmal,
also ich kann dir schon folgen, weis allerdings nicht was du genau meinst?
Ich habs jetzt mal mit den beiden neuen FF und IE getestet finde aber keinerlei Anzeigefehler oder sonstiges.Erklär mal genau, was du meinst.
Gruß Georg
Hallo Georg
Also die Navi ist 26 px hoch, die aktive Datei erscheint im FF und IE8 als wäre sie 27px hoch, das heisst die graue Farbe des aktiven Links scheint grösser zu sein als der Rest der Navi. Jedenfalls bei mir zeigt es das so an. Siehst du keinen Unterschied, wenn du das Ganze im IE7 anschaust?
Ist doch irgendwie komisch.
Gruss Saddy
-
-
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-ValidatorDer 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