Horizontale Navigation - border top und bottom IE 7 fehlen

[Gunnar Bittersmann]

@@yuny:

nuqneH

<div id="navcontainer">
<ul id="navlist">

Wozu ist der Container [@id="navcontainer"] gut? Genügt dir das Listenelement [@id="navlist"] nicht?

<li id="active""><a href="/~ecommerc/shop/inhalt.php?content=ueberblick" id="active_link">&Uuml;berblick</a></li>
<li id="inactive"><a href="/~ecommerc/shop/inhalt.php?content=programm" id="inactive_link">Programm</a></li>
<li id="inactive"><a href="/~ecommerc/shop/inhalt.php?content=referenten" id="inactive_link">Referenten</a></li>

Zum einen dürfen, wie MudGuard schon sagte, ID-Bezeichner nicht mehrmals in einem Dokument auftauchen.

Zum anderen ist die Auszeichnung unsinnig. Wenn (fast) alle Geschwisterelemente gleichartig sind, muss dies nicht im Markup hervorgehoben werden. Es können alle 'li'-Elemente (ohne zusätzliche ID bzw. Klasse) gestylt werden und für ein besonderes ("active" – mit ID bzw. Klasse) abweichende Angaben gemacht werden.

Da "active_link" nur innerhalb von "active" und "inactive_link" nur innerhalb von "inactive" vorkommt, bedürfen die 'a'-Elemente innerhalb der 'li'-Elemente überhaupt keiner ID bzw. Klasse; sie sind über Nachfahren- bzw. Kindselektor ansprechbar.

"active" soll der angewählte Menüpunkt sein? Die Benennung ist ungünstig, da namensgleich mit der CSS-Pseudoklasse :active, die etwas völiig anderes bewirkt.

Aber die aktuelle Seite soll im Menü überhaupt nicht verlinkt sein! (Punkt 10 der zehn meist-missachteten Homepage-Design-Richtlinien [Nielsen])

Außerdem ist es unsinnig, Zeichenescapes wie 'Ü' anstatt der richtigen Zeichen 'Ü' zu verwenden. [ESCAPES]

Auf den Syntaxfehler mit '""' sollte dich der Validator auch hingewiesen haben.

<li id="navlist_abschluss" style="padding-right:106px"><span>&nbsp;</span></li>

Und das hat im Markup überhaupt nichts zu suchen. Dein Menü sollte so aussehen:

<ul id="navlist">  
  <li>Überblick</li>  
  <li><a href="/~ecommerc/shop/inhalt.php?content=programm">Programm</a></li>  
  <li><a href="/~ecommerc/shop/inhalt.php?content=referenten">Referenten</a></li>  
  <li><a href="/~ecommerc/shop/inhalt.php?content=veranstaltungsort">Veranstaltungsort</a></li>  
  <li><a href="/~ecommerc/shop/USER_BESTELLUNG_1.php?darstellen=1">Anmeldung</a></li>  
</ul>

Jetzt stylst du '#navlist li' so, wie der Menüpunkt der aktuellen Seite aussehen soll, und '#navlist li a' so, wie alle anderen Menüpunkte aussehen sollen.

Qapla'