Link Klassen werden vom IE8 nicht korrekt dargestellt

[Tasnal]

Tag zusammen,

ich wieder mit einem Problem:

Und zwar werden auf meiner Seite Hyperlinks beim ersten Laden durch den IE8 noch richtig angezeigt, aber sobald man einem Hyperlink folgt und wieder zurückkehrt sind die meisten Links unformatiert ( blau bzw. violett und unterstrichen sowie verschoben ). Die Links, die vorher noch korrekt dargestellt wurden werden auch nach dem Aktualisieren nicht mehr korrekt dargestellt. Der IE8 scheint also auf irgendwelche Infos aus dem Browsercache zuzugreifen, die nicht mehr der korrekten Formatierung entsprechen.

Via K-Meleon-Browser ( müsste auf Firefox basieren ) wird alles korrekt dargestellt.

Hier kurz die Beschreibung der Hyperlinks und der Umsetzung:

Es handelt sich dabei um drei Navigationspunkte, die von links nach rechts verlaufen. Jeder einzelne Navigationspunkt hat eine eigene Farbe, die sich beim Drüberfahren ebenfalls verändert.

Anfangs hatte ich jedem Menüpunkt innerhalb des jeweiligen A-Tags einen entsprechenden Schrifttyp ( h1, h2, h3 ) zugeordnet. Die Formatierung erfolgte dann via CSS.

Das sah in etwa so aus...

<a href="index.html"><h1>Startseite</h1></a>
<a href="informationen.html"><h2>Informationen</h2></a>
<a href="kontakt.html"><h3>Kontakt</h3></a>

... und hat einwandfrei funktioniert ( IE8, K-Meleon ).

Jetzt will man ja alles richtig machen und dazu gehört wohl auch, dass ein Blockelement ala h1 und co. nichts innerhalb eines A-Tags zu suchen hat.

Aus diesem Grund habe ich versucht, den einzelnen A-Tags unterschiedliche Klassen zuzuweisen und diese dann via CSS die Eigenschaften der gewünschten Schriften zuzuweisen.

Das sah dann so aus:

<a class="h1" href="index.html">Startseite</a>
<a class="h2" href="informationen.html">Informationen</a>
<a class="h3" href="kontakt.html">Kontakt</a>

Und dementsprechend CSS ( stellvertretend jetzt nur eine Schrift ):

a.h1:link {
    text-decoration:none;
    color: #444;
    font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
    font-size: 18px;
    letter-spacing: 4px;
    margin-left: 25px;
    position:absolute;
    float:right;
    }

a.h1:hover {
    text-decoration:none;
    color: #FFF;
    font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
    font-size: 18px;
    letter-spacing: 4px;
    margin-left: 25px;
    position: absolute;
    float: right;
    }

Der Code geht jetzt zwar als valide durch und funktioniert in K-Meleon und beim ersten Ansurfen mit dem IE8 einwandfrei, aber dann treten eben die oben genannten Probleme mit dem IE8 auf.

Was ich schon probiert habe:

Die Hover-Variante zu den einzelnen Links weggelassen > keine Veränderung

Jede HTML-Seite hat eine eigene CSS-Datei zugewiesen bekommen und in jeder CSS-Datei wurden jeweils a.h1:link, a.h2:link und co. anders formatiert. Ich hatte dann die Idee, dass der IE8 womöglich die Formatierungen der einzelnen CSS-Dateien durcheinanderbringt, allerdings hat eine eindeutige Zuweisung ( h1, h2, h3 in der ersten CSS-Datei, h4, h5 und h6 in der zweiten CSS-Datei, usw. ) auch nichts gebracht.

Wie gesagt: Ich steh´ auf dem Schlauch und frage lieber hier noch mal nach, bevor ich zur funktionierenden, aber nicht validen ersten Variante zurückkehren muss.

Grüße,

Tasnal


EDIT (autom. Beitragszusammenführung):


Man findet hier und da in einigen Foren ein paar Einträge v.a. über ältere IE-Versionen die Ärger bei den unterschiedlichen Link-Klassen machen. Dort wird dann empfohlen mit IDs zu arbeiten.

Was ich jetzt mal ausprobiert habe und wiederum per Mozilla einwandfrei läuft - bei IE8 aber die selben Probleme verursacht:

<span id="h1">
<a  href="index.html">startseite</a>
</span>
<span id="h2">
<a  href="informationen.html">Informationen</a>
</span>
<span id="h3">
<a  href="kontakt.html">Kontakt</a>
</span>

#h1 a:link {
    text-decoration:none;
    color: #FFF;
    font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
    font-size: 18px;
    letter-spacing: 4px;
    margin-left: 25px;
    position:absolute;
    float:right;
    }

Nach wie vor: Sieht beim ersten Ansurfen mit dem IE8 einwandfrei aus, sobald man aber einen der Links anklickt ist Chaos.

Grüße,

Tasnal


EDIT (autom. Beitragszusammenführung):


Okay - da muss man aber auch erst mal drauf kommen:

Das Problem habe ich gelöst, indem ich neben a:link und a:hover auch noch a:visited festgelegt habe. a:visited hat dabei die gleichen Eigenschaften wie a:link.

Offensichtlich nutzt der IE ohne Vorgabe von a:visited die Standardformatierung. Mozilla und Co. verwenden ohne Vorgabe die gleiche Formatierung wie a:link ( wie es auch eher meiner Logik entsprechen würde ).

Wie gesagt: a:visited definiert und schon macht auch der IE8 keine Mätzchen mehr.

Grüße,

Tasnal

 

[Tasnal]

Um das Ganze hier abzuschließen nun die Lösung des Problems als entsprechender Code:

HTML:

<a class="h h1" href="index.html">Startseite</a>
<a class="h h2" href="informationen.html">Informationen</a>
<a class="h h3" href="kontakt.html">Kontakt</a>

Neben den einzelnen Klassen h1, h2 und h3 habe ich noch eine Klasse h definiert, die die Grundeigenschaften der verwendeten Link-Schrift vorgibt. h1, h2 und h3 stellen also jeweils nur die zusätzlichen Abweichungen von h dar.

Jedes angezeigte "Linkwort" erhält also die gleiche Standardformatierung h, sowie zusätzlich von Wort zu Wort varierenden Eigenschaften h1, h2 oder h3.

Im CSS sieht das Ganze dann z.B. so aus:

a.h:link {
    text-decoration:none;
    font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
    font-size: 18px;
    letter-spacing: 4px;
    position:absolute;
    float:right;
    }

a.h1:link {
    color: #FFF;
    margin-left: 25px;
    }
    
a.h2:link {
    color: #CCC;
    margin-left: 210px ;
    }
    
a.h3:link {
    color: #444 ;
    margin-left: 420px;
    }
    
a.h:visited {
    text-decoration:none;
    font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
    font-size: 18px;
    letter-spacing: 4px;
    position:absolute;
    float:right;
    }

a.h1:visited {
    color: #FFF;
    margin-left: 25px;
    }

a.h2:visited {
    color: #CCC;
    margin-left: 210px ;
    }
    
a.h3:visited {
    color: #444 ;
    margin-left: 420px;
    }

a.h1:hover {
    color: #669ECC;
    margin-left: 25px;
    }    
        
a.h2:hover {
    color: #338F23;
    margin-left: 210px;
    }
    
a.h3:hover {
    color: #7D5C3C;
    margin-left: 420px;
    }

Kurz zur Erklärung was im Einzelnen passiert:

Am Ende werden drei nebeneinander stehende Wörter angezeigt, die jeweils eine andere Farbe besitzen, jeweils eine andere Farbe beim darüberfahren erhalten, sowie als Hyperlink funktionieren.

Durch a.h:link wird erstmal die gewünschte Standardformatierung der Linkschrift erreicht. Also Schriftgröße, Schrifttyp etc.

a.h1/2/3:link bestimmten jeweils die Position der einzelnen Wörter als auch deren spezielle Farbe.

Um später keine Probleme mit dem Internet Explorer zu bekommen, legt man exakt die gleichen Definitionen für a.h:visited sowie a.h1/2/3:visited fest.

Dadurch erhalten einmal aktivierte Links die gleiche Formatierung wie vor der Aktivierung.

Durch die entsprechenden a.h1/2/3:hover Angaben wird das Aussehen jedes einzelnen Wortes beim Darüberfahren bestimmt.

Problematisch könnten noch im Einzelfall die Positionsangabe "absolute" sein. Diese gilt hier für alle Linkwörter und die eigentliche Position wird bei mir durch die entsprechenden Margin-Werte erreicht. Vermutlich gibt es da eine elegantere Möglichkeit, die Wörter dementsprechend nebeneinander anzuordnen. Auf Grund des Seitenlayouts musste ich die einzelnen Worte allerdings pixelgenau positionieren und das klappt auf diesem Weg jedenfalls einwandfrei.

Grüße,

Tasnal

 

[pixelflat]

Ungeordnete Liste nehmen, horizontal anordnen => margin- / position-Krampf sparen...

Du hast keine Berechtigung, den Link zu sehen, bitte Anmelden oder Registrieren

 

[Tasnal]

Ungeordnete Liste nehmen, horizontal anordnen => margin- / position-Krampf sparen...

In meinem speziellen Fall muss jedes "Linkwort" eine eigenständige ( vom anderen "Linkwort" unabhängige ) Position einnehmen. Ich muss die "Linkwörter" also pixelgenau positionieren können. Die horizontale Anordnung einer ungeordneten Liste würde da alleine nicht reichen.

Ich habe keine Ahnung von ungeordneten Listen, werde mich damit aber mal auseinandersetzen. Ich vermute aber, dass die exakte Anordnung der einzelnen Listenelemente auch nicht einfacher als der margin-/position-Krampf ist und vermutlich via CSS auch nicht ohne margin- oder padding-Angaben auskommen wird.

Grüße,

Tasnal