Listen und valides XHTML

Status
Nicht offen für weitere Antworten.

Harzteufel

Erfahrenes Mitglied
Hallo,
ich bin gerade dabei eine Website unter XHTML 1.0 strict zu erstellen. Bisher läuft auch alles ganz gut, nur bei einem Problem komm ich einfach nicht weiter... Im FF ist alles schick, nur der IE mag mal wieder nicht. Ich habe, wie im nachfolgenden Code ersichtlich, eine Navigation mit Hilfe von Listen (Liste mit Unterliste) erstellt und diese mit CSS formatiert. Um valides XHTML zu schreiben, muss ich doch die Unterliste in einen Listenpunkt der übergeordneten Liste packen, oder? ...und genau hier macht der IE eine Lücke (sicherlich der "leere" Listenpunkt der eigentlich die Unterliste beinhaltet).

Wie kann ich dies verhindern bzw. wie kann ich dies ändern, damit es im IE auch ohne Lücke dargestellt wird?

HTML:
<div id="navcontainer">
	<ul id="navlist">
		<li><a href="#">Punkt 1</a></li>
		<li><a href="#">Punkt 2</a></li>
		<li><a href="#">Punkt 3</a></li>
		<li><ul id="subnavlist">
			<li><a href="#">Punkt 3-1</a></li>
			<li><a href="#">Punkt 3-2</a></li>
			<li><a href="#">Punkt 3-3</a></li>
		</ul></li>
		<li><a href="#">Punkt 4</a></li>		
		<li><a href="#">Punkt 5</a></li>	
	</ul>
</div>

Code:
#navcontainer { 
	margin-top: 40px;
	z-index: 10;
}
#navcontainer ul {
	list-style-type: none;
}
#navcontainer li {
	margin: 4px 0 4px 0;
}
#navcontainer a {
	padding: 2px 4px 2px 30px;
	color: #E2DFD9;
	text-decoration: none;
}
#navcontainer a:hover {
	color: #E2DFD9;
	background-color: #000;
	text-decoration: none;
}
#navcontainer ul ul a {
	padding: 2px 4px 2px 60px;
	color: #E2DFD9;
	text-decoration: none;
}
#navcontainer ul ul a:hover {
	color: #E2DFD9;
	padding: 2px 4px 2px 60px;
	background-color: #000;
	text-decoration: none;
}
 
Hi,

als erste Gegenmaßnahme gehören die inneren und äußeren Polsterungseigenschaften der Listenelemente auf null zurückgesetzt, da diese in den Browsern unterschiedliche Initialwerte besitzen.

Im zweiten Schritt wird der Bug im IE gefixt, indem beispielsweise für das Submenü eine Breite festgelegt wird, damit die Listenpunkte mit float:left ausgezeichnet werden können, ohne dass sie sich selbst umfliessen:

Code:
<!--[if IE]>
<style type="text/css">
#subnavlist {
width:200px;
}
#subnavlist li {
float:left;
}
</style>
<![endif]-->
mfg Maik
 
Danke, die Lücke ist weg, aber wie kann ich dann die Punkte der untergeordneten Liste einrücken, wenn ich margin und padding rausnehmen soll? Das hab ich noch net ganz verstanden...
 
Du hast doch schon für die Links der ersten und zweiten Menüebene einen entsprechenden linken Innenabstand gesetzt.

mfg Maik
 
Ok, ich denke, so passt es jetzt... jedenfalls sieht die Navigation im IE 5 und 6 genauso aus, wie im FF und der XHTML-Check wurde auch bestanden. Also, vielen Dank für Deine Hilfe.
 
Status
Nicht offen für weitere Antworten.
Zurück