Horizontale Navigation - border top und bottom IE 7 fehlen

[Yuny]

@@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`{:.language-css}' so, wie der Menüpunkt der aktuellen Seite aussehen soll, und '`#navlist li a`{:.language-css}' so, wie alle anderen Menüpunkte aussehen sollen.  
>   
> Qapla'  
  
Huhu ich bins nochmal  
  
Also hab den Code nun geändert, sieht nun so aus:  
~~~html
<div id="navcontainer">  
<ul id="navlist">  
<li><a href="/~ecommerc/shop/inhalt.php?content=ueberblick">Überblick</a></li>  
<li><a href="/~ecommerc/shop/inhalt.php?content=programm">Programm</a></li>  
<li id="active"><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>  
<li id="navlist_abschluss" style="padding-right:104px"><span>&nbsp;</span></li>  
</ul>  
</div>

  
#navlist li  
{  
    border-top: 1px solid #cccccc !important;  
    border-bottom: 1px solid #999999;  
    border-left: 1px solid #cccccc;  
    border-right: 1px solid #cccccc;  
    border-collapse:collapse;  
    padding: 5px 8px;  
    line-height:21px;  
    margin:-3px;  
    z-index:10;  
    background-color:#ffffff;  
    display: inline;  
    list-style: none;  
}  
  
#navlist {  
    padding-left: 0px;  
    margin-left: 0px;  
}  
  
#navlist #active a  
{  
    color: #FF0000 !important;  
    text-decoration: none;  
    font-size: 12px;  
    font-weight: normal;  
}  
  
#navlist #active  
{  
    border-bottom:1px solid #ffffff !important;  
    border-left:  1px solid #999999 !important;  
    border-top:   1px solid #999999 !important;  
    border-right: 1px solid #999999 !important;  
    border-collapse:collapse;  
    padding: 5px 8px;  
    z-index:99;  
    margin: 0px !important;  
    line-height:21px;  
    background-color:#ffffff;  
}  
  
#navlist a  
{  
    color: #7d7d7d !important;  
    border-bottom: 1px solid #ffffff;  
    text-decoration: none;  
    font-size: 12px;  
    font-weight: normal;  
}  
  
#navlist #navlist_abschluss  
{  
    border-top: 1px solid #FFFFFF !important;  
    border-right: 1px solid #FFFFFF !important;  
    width: 50px;  
    border-collapse:collapse;  
}  

Das mit dem Link will der Kunde so. Und der Kunde ist ja bekanntlich König :P
Jedenfalls ist das letzte li dazu da, eine horizontale Linie bottom mithilfe des border-bottom zu setzen. Den kann ich nicht löschen, der wird gebraucht ;)
Mit euren Tipps sieht man mittlerweile die border-left und border-right beim IE auch, allerdings wird beim active (ja ich werds noch ändern) der border-right vom nachfolgenden Element überschrieben, was jedoch im FF und Safari nicht der Fall ist.
Vielleicht sehr ihr nochmals etwas?

Lieben Dank und viele Grüsse
Yuny