Horizontale Navigation mit Listen

[kaya]

Hi,
hab grad ein Problem mit FF und IE, es geht um folgende Liste:

<div><ul>
 <li><a href="?page=A"><span>A</span></a></li>
 <li><a href="?page=B"><span>B</span></a></li>
 <li><a href="?page=C"><span>C</span></a></li>
 ...
 <li><a href="?page=X"><span>X</span></a></li>
 <li><a href="?page=Y"><span>Y</span></a></li>
 <li><a href="?page=Z"><span>Z</span></a></li>
</ul></div>

Also ne Nav mit den Buchstaben A-Z, die jetzt mti folgendem CSS in Opera und Safari auch korrekt 2 Zeilige angezeigt werden mit einem Umbruch nach dem M und zwar ca so:

A B .... L M
        N O .... Y Z

CSS:
div {
 height: 100px;
 margin: 0 auto 100px auto;
 width: 403px;
}
a {
 display: block;
 float: left;
 height: 25px;
 margin: 3px;
 width: 25px;
}
a:link,
a:visited {
 background: url(letter.jpg);
}
a:hover,
a:focus,
a:active {
 background: url(letter_hover.jpg);
}
span {
 display: block;
 font-family: Arial;
 font-size: 10pt;
 font-weight: bold;
 position: relative;
 text-align: center;
 top: 5px;
}

FF zeigt sämtliche Buchstaben nach dem M, übereinadner gelegt direkt hinter dem M an, wo ja nach der div width von 403 eigentlich gar kein Platz sein sollte. Der IE stellt das ganze als "Kunstobjekt" da. Ich hab sowas shconmal gemacht, aber irgendwie will es diesmal nicht so wie ich will. Hoffenltihc kann mir jemand helfen
mfg

[Steel]

Hi!

Wozu die <span>? Die machen nur wenig Sinn, oder? Was kannst du von den Formatierungen nicht im <a> oder <li> unterbringen?

Warum floaten die <a>? Es ist doch einfacher den <li> display:inline zu geben.

Damit koennte dein Problem schon erledigt sein.

[kaya]

Hi!

Wozu die <span>? Die machen nur wenig Sinn, oder? Was kannst du von den Formatierungen nicht im <a> oder <li> unterbringen?

Warum floaten die <a>? Es ist doch einfacher den <li> display:inline zu geben.

Damit koennte dein Problem schon erledigt sein.

Innerhalb der <a> gibts nochw as das ich formatieren muss, aber jetzt gehts ja, vielleicht überarbeite ich es irgendwann noch, aber wenns jetzt keine Probs mehr gibt, bin ich erstmal glücklich

[kaya]

li {
 float: left;
}
a {
 display: block;
 height: 25px;
 margin: 3px;
 width: 25px;
}
Mit dieser Änderung hab ichs gelöst, FF und IE spielen jetzt auch mit