Formatierung einer Liste.
0 0 0 
rfb
0
Formatierung einer Liste.
Hallo.
Ich versuche eine Liste nach meinen Vorstellungen zu gestalten, der IE zickt aber rum. Da ich glaube, alles richtig gemacht zu haben, wollte ich jetzt, bevor die tiefere Verweiflung eintritt, hier um Rat fragen.
Der css code sieht bisher wir folgt aus:
#nav ul {list-style-type:none;
padding-top:10px;
padding-bottom:10px;
padding-left:0px;
padding-right:0px;
margin:0px;
}
#nav li {margin:0px;
padding:0px;
height:16px;
width:98px;
}
#nav a {display:block;
padding:0px;
margin:0px;
width:98px;
height:16px;
background-color:#FFFFFF;
color:#000000;
text-decoration:none;
}
#nav a:link, #nav a:visited {text-decoration:none;
color:#000000;
margin:0px;
padding:0px;
}
#nav a:hover {text-decoration:none;
color:#FFFFFF;
background-color:#000000;
margin:0px;
padding:0px;
}
FF macht keine Probleme, aber, wir gesagt, der IE. Wie ihr im code sehen könnt, möchte ich keinerlei Abstand zwischen den einzelnen <li>elementen. Außerdem auch keinen nach links und rechts. Trotz aller dieser Angaben im code (padding + margin auf 0px) baut der IE IMMER zwischen <li> und dem Rand des <div>, in dem die Liste steckt, zwei Pixel zwischen rein.
Der code des <div>, in dem die Liste steckt:
#nav {position:relative;
top:0px;
left:0px;
width:100px;
overflow:hidden;
text-align:center;
margin:0px;
padding:0px;
}
Wer kann mir weiter helfen? Wo steckt mein dummer Fehler? Oder macht der IE bei Listen das grundsätzlich?
Dank an die Helfenden. MfG.
-
Hellihello
ist das ok, dass du zb #nav li hast, ist das nicht eher #nav ul li und #nav ul li a?
Gruß, Frankx
-
Hallo.
Ich nehme mal an, dass das ok ist. Zum einen habe ich das bereits einmal so gemacht (dort trat das Problem nicht auf), zum anderen werden ja auch die anderen Eingaben (Farbe, Breite, etc) übernommen.
Trotzdessen Danke.
-
Hellihello
dann sehe ich noch ein position:relative. das setzt ein relativ oder absolut postitioniertes Elternelement voraus. Der IE 6 kapiert beim Body aber nur postition:relative soweit ich weiß. Wenn das ansonsten schonmal woanders geklappt hat, wieso dann jetzt das Problem?
frankx
-
-
Moin
ist das ok, dass du zb #nav li hast
ist OK, gilt für alle li innerhalb von #nav, egal ob sie direkte Kindelemente, Enkel- oder Urenkelkindelemente sind.
Gruß
rfb
-
-
Hi,
wenn ich Dein CSS kopiere und auf ein Markup der Form
<div id="nav"> <ul> <li><a href=".">Eins</a></li> <li><a href=".">Zwei</a></li> </ul> </div>anwende, kann ich den Fehler im IE6 _nicht_ nachvollziehen, sieht OK aus, sowohl im Quirks- als auch im standardkonformen Modus.
Unabhängig davon würde ich ein paar Dinge anders machen:
Das umgebende <div> scheint mir überflüssig, die Formatierungen kann man doch direkt für <ul> notieren.Bei solchen Menüs gebe ich für <li> und <a> überhaupt keine width oder height an.
Wenn das Problem noch besteht: kannst Du die betreffende Seite hochladen, bzw. mit welcher IE-Version treten die Probleme auf?
Shepard
-
He.
anwende, kann ich den Fehler im IE6 _nicht_ nachvollziehen, sieht OK aus, sowohl im Quirks- als auch im standardkonformen Modus.
»»
Der Hacken sind allerdings auch nur zwei Pixel, also vielleicht auch nicht gleich sichtbar.Wenn das Problem noch besteht: kannst Du die betreffende Seite hochladen, bzw. mit welcher IE-Version treten die Probleme auf?
IE-Version 7. Hochladen kann ich die Seite leider nicht. Der Text in den <li>elementen hat dei Größe 14px; auch hier sind im IE unverständlicherweise margins, obwohl die in der Textfornatierung ausgeschlossen wurden.? (font-weight:bold; ist dsa ein Problem?)
MfG.
-
Der Hacken sind allerdings auch nur zwei Pixel, also vielleicht auch nicht gleich sichtbar.
OK, hab die Augen mal auf Makro geschaltet, im IE6 habe ich links und rechts jeweils 1 Pixel zu wenig.
Das verschwindet, wenn Du aus li und a die fixen Höhen- und Breitenangaben rausnimmst.
Der IE6 ist jetzt allerdings so doof zu glauben, die Dinger hätten gar keine Größe, darum gibt dem <a> einfach height:1%.
IE7 hab ich z.Z. leider nicht verfügbar und browsershots.org auch gerade nicht. Ich bin mir nicht sicher, wie der IE7 auf das height:1% reagiert...
-
-