In IE8 wird aktiver Link nicht angezeigt

[Azra]

Sowas, dauernd helfe ich und nun habe ich tatsächlich selber ein dummes Problem.
Wie könnte es anders sein, es dreht sich um den IE8 (höchstwahrscheinlich auch alle Versionen darunter).

Problembeschreibung:
Wenn die Seite geladen wird, ist der aktive Navigationspunkt nicht sichtbar.
Der Text ist vorhanden, denn mit Strg+A wird er lesbar und bleibt es auch mit der korrekten Farbeinstellung, aber nur solange man nicht wieder mit dem Cursor einen hover auslöst.

Standarteinstellung für die Navigation ist wie folgt

Code: Alles auswählen

.current_page_item a {
   color: #fe4902 !important;
}

Dazu muss ich sagen dass es eine JavaScript (JQuery) Navigation ist, mit einer Linie die sich bei hover zum aktuellen Punkt, bzw. <li> bewegt.
Ich habe um ganz sicher zu gehen den Farbwert für link, visited, active und hover festgelegt, das hat jedoch nichts genutzt.

HTML

Code: Alles auswählen

         <ul id="navigation" class="group">
            <li class="current_page_item"><a href="index.php">Konzept</a></li>
            <li><a href="./content/umsetzung.php">Umsetzung</a></li>
            <li><a href="./content/referenzen.php">Referenzen</a></li>
            <li><a href="./content/kontakt.php">Kontakt</a></li>
            <li><a href="./content/impressum.php">Impressum</a></li>
            <li><a href="./content/portfolio.php">Weiteres Portfolio</a></li>
            <li id="magic-line" style="overflow: hidden; width: 63px; left: 0px; display: block;"></li>
         </ul>


CSS

Code: Alles auswählen

#navigation li {
   display: inline;
}
#navigation a {
   color: #FFFFFF;
   font-family: Helvetica,Geneva,Arial,SunSans-Regular,sans-serif;
   font-size: 14px;
   letter-spacing: 1px;
   display: block;
   float: left;
   padding: 0 16px 4px 16px;
   text-decoration: none;
   text-transform: uppercase;
}
#navigation a:visited {
   color: #FFFFFF;
   outline: none;
}
#navigation a:hover {
   color: #fe4902;
   outline: none;
}
#magic-line {
   position: absolute;
   bottom: -9px;
   left: 0;
   width: 100px;
   height: 19px;
   background: #FFFFFF;
   -moz-border-radius: 20px;
   border-radius: 20px;
}
.current_page_item a:link {
   color: #fe4902 !important;
}
.current_page_item a:visited {
   color: #fe4902 !important;
}
.current_page_item a:active {
   color: #fe4902 !important;
}
.current_page_item a:hover {
   color: #fe4902 !important;
}

Das Onlinebeispiel darf ich nicht zur Ansicht Freigeben, weitere Informationen natürlich auf Anfrage hier

[Azra]

Wie es scheint liegt es am <li> der Linie.
Ich habe sie mal auf doof per Entwicklertools entfernt und siehe da, der Link wird sichtbar.
Entweder ich behebe das nun (irgendwie) oder nehme die Linie per Browserweiche ganz heraus.

Wenn jemand etwas weiß, schreibt einfach.

[Azra]

Gut, die Lösung war recht simpel.
Dem IE hilft kein "display: inline;" sondern "display: inline-block;".

So, hier noch ein Keyword für dieses Problem:
jQuery MagicLine Navigation