Horizontale Navigation - border top und bottom IE 7 fehlen

[yuny]

Hallöchen zusammen

Ich habe wieder ein kleines Problem. Nachdem die Seite nun soweit fertig ist habe ich gesehen, dass im IE 7 die border top und bottom nicht angezeigt werden. Leider kann ich keine Ursache dafür finden.

Vielleicht hat jemand von euch einen Input für mich =)
Vielen Dank und liebe Grüsse
Yuny

Code:

 $buff.= '<div style="padding-top: 20px; padding-bottom: 20px; color: #a2a2a2">'."\n";  
              $buff.= '<img src="'.get_webroot_path().'shop/Bilder/ecommerce_logo.gif"><br>';  
              $buff.= '3. März 2011'."\n";  
              $buff.= '</div>'."\n";  
              $buff.= '<div id="navcontainer">'."\n";  
              $buff.= '<ul id="navlist">'."\n";  
              $buff.= '<li '.$li_id_ueberblick.'"><a href="'.get_webroot_path().'shop/inhalt.php?content=ueberblick" '.$a_id_ueberblick.'>&Uuml;berblick</a></li>'."\n";  
              $buff.= '<li '.$li_id_programm.'><a href="'.get_webroot_path().'shop/inhalt.php?content=programm" '.$a_id_programm.'>Programm</a></li>'."\n";  
              $buff.= '<li '.$li_id_referenten.'><a href="'.get_webroot_path().'shop/inhalt.php?content=referenten" '.$a_id_referenten.'>Referenten</a></li>'."\n";  
              $buff.= '<li '.$li_id_veranstaltungsort.'><a href="'.get_webroot_path().'shop/inhalt.php?content=veranstaltungsort" '.$a_id_veranstaltungsort.'>Veranstaltungsort</a></li>'."\n";  
              if (ANMELDEFORMULAR_ANZEIGEN == true) {  
                  $padding_right = 106;  
                  $buff.= '<li '.$li_id_anmeldung.'><a href="'.get_webroot_path().'shop/USER_BESTELLUNG_1.php?darstellen=1" '.$a_id_anmeldung.'>Anmeldung</a></li>'."\n";  
              }  
              if ($nav == 'download') {  
                  $padding_right = 34;  
                  $buff.= '<li '.$li_id_rueckblick.'><a href="'.get_webroot_path().'shop/inhalt.php?content=download" '.$a_id_rueckblick.'>Download</a></li>'."\n";  
              }  
              $buff.= '<li id="navlist_abschluss" style="padding-right:'.$padding_right.'px"><span>&nbsp;</span></li>'."\n";  
              $buff.= '</ul>'."\n";  
              $buff.= '</div>'."\n";  

#navlist  
{  
    padding: 0px;  
    margin: 0px;  
    background-color: #FFFFFF;  
    font-family: verdana,sans-serif;  
    font-size: 12px;  
    font-weight: bold;  
    height: 21px;  
    width:532px;  
    padding-right:0px;  
    /* border: 1px solid #ffffff; */  
}  
  
#navlist li  
{  
    display: inline;  
    list-style: none;  
    /* padding: 0px; */  
    /* margin: 0px; */  
}  
  
#navlist #active_link  
{  
    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: -1px;  
    line-height:21px;  
    background-color:#ffffff;  
}  
  
#navlist #inactive_link  
{  
    color: #7d7d7d !important;  
    border-bottom: 1px solid #ffffff;  
    text-decoration: none;  
    font-size: 12px;  
    font-weight: normal;  
}  
#navlist #inactive  
{  
    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;  
    margin: 0 0px;  
    line-height:21px;  
    margin:-3px;  
    z-index:10;  
    background-color:#ffffff;  
}  
  
#navlist_abschluss  
{  
    text-decoration: none;  
    border-bottom: 1px solid #999999;  
    border-left: 1px solid #cccccc;  
    border-right: 1px solid #FFFFFF;  
    border-top: 1px solid #FFFFFF;  
    padding-top: 5px;  
    padding-bottom: 5px;  
    padding-left: 8px;  
    background-color: #FFF;  
    color: #7d7d7d;  
    line-height:21px;  
    margin:-3px 0px -3px -3px;  
    z-index:10;  
    font-size: 12px;  
    font-weight: normal;  
    width: 50px;  
    border-collapse:collapse;  
}

[ChrisB]

Hi,

Ich habe wieder ein kleines Problem. Nachdem die Seite nun soweit fertig ist habe ich gesehen, dass im IE 7 die border top und bottom nicht angezeigt werden. Leider kann ich keine Ursache dafür finden.

Dir sollte klar sein, dass es keine kluge* Idee ist, bei einem clientseitigen Problem serverseitigen Code zu zeigen.

Zeige uns bitte eine Online-Beispiel, an dem das Problem nachvollziehbar ist.
Sorge bitte vorher dafür, dass HTML und CSS valide sind.
</hilfe/charta.htm#tipps-fuer-fragende>

MfG ChrisB

* sondern im Gegenteil, eine ziemlich dämliche.

[yuny]

Hi,

Ich habe wieder ein kleines Problem. Nachdem die Seite nun soweit fertig ist habe ich gesehen, dass im IE 7 die border top und bottom nicht angezeigt werden. Leider kann ich keine Ursache dafür finden.

Dir sollte klar sein, dass es keine kluge* Idee ist, bei einem clientseitigen Problem serverseitigen Code zu zeigen.

Zeige uns bitte eine Online-Beispiel, an dem das Problem nachvollziehbar ist.
Sorge bitte vorher dafür, dass HTML und CSS valide sind.
</hilfe/charta.htm#tipps-fuer-fragende>

MfG ChrisB

* sondern im Gegenteil, eine ziemlich dämliche.

Sorry, war vorher nicht allzu oft in Foren unterwegs =)
Also hier der Quelltext vom HTML:

  
<div id="navcontainer">  
<ul id="navlist">  
<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>  
<li id="inactive"><a href="/~ecommerc/shop/inhalt.php?content=veranstaltungsort" id="inactive_link">Veranstaltungsort</a></li>  
<li id="inactive"><a href="/~ecommerc/shop/USER_BESTELLUNG_1.php?darstellen=1" id="inactive_link">Anmeldung</a></li>  
<li id="navlist_abschluss" style="padding-right:106px"><span>&nbsp;</span></li>  
</ul>  
</div>  
  

Leider kann ich nicht den Code der ganzen Seite posten, da das ganze ein Online-Shop ist der insgesamt ca. eine viertelmillion Zeilen hat.
Ich rechne mit einem CSS Fehler, da ich dort noch einiges zu lernen habe ;)

[MudGuard]

Hi,

Zeige uns bitte eine Online-Beispiel, an dem das Problem nachvollziehbar ist.
Sorge bitte vorher dafür, dass HTML und CSS valide sind.

<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>

Schade - stand doch extra da, daß Du erst mal für Validität sorgen sollst.
id-Attributwerte dürfen nicht mehrfach im Dokument vorkommen.

cu,
Andreas

[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'

[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

[Der Martin]

Hallo,

@@yuny:
Qapla'

bitte nächstes Mal kein TOFU oder einer seiner Abarten wie FOTU. Danke.

Das mit dem Link will der Kunde so. Und der Kunde ist ja bekanntlich König :P

Geschmackssache. Ja, ich selbst finde es auch okay, wenn auch der Menüpunkt verlinkt ist, der zur aktuellen Seite führt. Es ist einfach konsequenter.

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 ;)

Ach was. Erstens existiert die Pseudoklasse :last-child; zweitens könntest du diesen Teilrahmen ebensogut dem ul-Element geben, wenn du auch Browser bedienen musst, die :last-child nicht kennen.

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.

IE im Quirks Mode?

Ciao,
 Martin

[Yuny]

Hi

Ach was. Erstens existiert die Pseudoklasse :last-child; zweitens könntest du diesen Teilrahmen ebensogut dem ul-Element geben, wenn du auch Browser bedienen musst, die :last-child nicht kennen.

Ok, werd ich mal versuchen.

IE im Quirks Mode?

Nein ich habe IE im normalen Modus der IE7 simuliert...

Sorry wenn ich halt noch nicht so Profi im HTML und CSS bin, hab die letzten Jahre nur PHP entwickelt und nie eine komplette Seite in HTML....
Gruss Yuny

[Gunnar Bittersmann]

@@Yuny:

nuqneH

Das mit dem Link will der Kunde so. Und der Kunde ist ja bekanntlich König :P

Ja, aber nicht dein Kunde, sondern dessen Kunden.

Ich glaube auch nicht, dass dein Kunde Usability-Experte ist. Er will „das mit dem Link“ nicht so, sondern er will eine gute Website. Punkt.

Da er selbst davon keine Ahnung hat, engagiert er einen Fachmann. Also erledige deinen Job! Gut!

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 ;)

Unsinn. Aber das sagte Der Martin ja schon. In _dem_ Punkt hat er recht.

Qapla'

[Gunnar Bittersmann]

@@Yuny:

nuqneH

Also hab den Code nun geändert, sieht nun so aus:

Ich hab (besser gesagt: ChrisB hat) noch einen wertvollen Tip für dich.

Und bitte auch den Des Martins Tip beachten und sinnvoll zitieren, nicht alles.

Qapla'

[Gunnar Bittersmann]

@@Gunnar Bittersmann:

nuqneH

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

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

In HTML5 gibt es für den Container das 'nav'-Element.

Für bessere Barrierefreiheit sollte eins de beiden Elemente das ARIA-Attribut @role="navigation" tragen. S.a. http://www.alistapart.com/articles/aria-and-progressive-enhancement/

Qapla'