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?
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;
}