Push-Nachrichten von MacTechNews.de
Würden Sie gerne aktuelle Nachrichten aus der Apple-Welt direkt über Push-Nachrichten erhalten?
Forum>Entwickler>falsche farben bei der linkdarstellung

falsche farben bei der linkdarstellung

pb_user
pb_user21.02.1015:46
ich suche eine erklärung für folgendes phänomen, das ich (kein website-profi, aber seit einigen jahren mit html und css befasst) noch nie beobachtet habe:

auf einigen mit html4 gestalteten seiten (css gesteuert) passiert es trotz eindeutiger auszeichnung, dass unbesuchte links (siehe unten menublacklink) beim ersten öffnen der betreffenden seiten im browser nicht die festgelegten farben haben, sondern die vom browser (firefox / safari) vorgegebenen (in diesem fall blau). in den browsereinstellungen ist "seiten das verwenden eigener farben ..." ausgewählt. alle anderen attribute desselben links werden css-gemäß korrekt wiedergegeben. übrigens auch alle anderen in den seiten verwendeten links werden wie notiert wiedergegeben und zeigen diesen fehler nicht!

das ist das beispiel:

.menublacklink {
font-family : "Lucida Grande", Arial, sans-serif;
font-size : 11px;
font-weight : bold;
text-decoration : none;
color : rgb(150, 150, 150);
background-color : rgb(0, 0, 0);
}
.menublacklink a:link {
font-family : "Lucida Grande", Arial, sans-serif;
font-size : 11px;
font-weight : bold;
text-decoration : none;
color : rgb(240, 180, 145)
background-color : rgb(0, 0, 0);
}
.menublacklink a:visited {
font-family : "Lucida Grande", Arial, sans-serif;
font-size : 11px;
font-weight : bold;
text-decoration : none;
color : rgb(240, 180, 145);
background-color : rgb(0, 0, 0);
}
.menublacklink a:active {
font-family : "Lucida Grande", Arial, sans-serif;
font-size : 11px;
font-weight : bold;
text-decoration : none;
color : rgb(240, 180, 145);
background-color : rgb(0, 0, 0);
}
.menublacklink a:hover {
font-family : "Lucida Grande", Arial, sans-serif;
font-size : 11px;
font-weight : bold;
text-decoration : none;
color : rgb(150, 150, 150);
background-color : rgb(0, 0, 0);
}
0

Kommentare

iThinkDifferent21.02.1015:51
Ich vermute mal, dass es was mit der Klasse "menublacklink" zu tun hat. Aus irgendeinem Grund ist der Container des Links nicht mit eben genannter Klasse versehen. Wird die Klasse vielleicht per JavaScript zugewiesen? Oder trägt der Link direkt die Klasse? Dann müsste es nämlich wie folgt heißen:
a.menublacklink:link
0
sierkb21.02.1017:29
Abgesehen davon, dass in der Tat interessant und zu prüfen wäre, wie konkret Dein Markup/HTML dazu aussieht an der betreffenden Stelle und ob die zugehörige CSS-Regel da überhaupt greifen kann (iThinkDifferents Kommentar spielt sicher auf sowas an) -- hast Du der folgenden goldenen Regel z.B. Beachtung geschenkt (ich meine: nein):

CSS2 Spezifikation: 5.11.3 Die dynamischen Pseudo-Klassen :hover, :active und :focus
Beispiel

A:link { color: red } /* nicht besuchte Links */
A:visited { color: blue } /* besuchte Links */
A:hover { color: yellow } /* Benutzer selektiert */
A:active { color: lime } /* Aktive Links */

Beachten Sie, dass die Regel A:hover nach den Regeln für A:link und A:visited platziert werden muss, weil die kaskadierenden Regeln sonst die 'color'-Eigenschaft der Regel für A:hover verbergen. Weil A:active hinter A:hover platziert ist, wird analog dazu die aktive Farbe (lime) angewendet, wenn der Benutzer das A-Element markiert und aktiviert.

Im engl.-sprachigen Original auch hier: nachzulesen.

Deine :hover-Pseudoklasse hingegen steht an letzter Stelle, also nach der :active-Pseudoklasse statt idealerweise vor ihr. Es sollte aber umgekehrt sein, damit alles reibungslos klappt.
0
pb_user
pb_user21.02.1023:59
zuerst danke für eure bemühungen.

die sachen sind nicht mit CSS2 notiert, sondern mit "normalem" CSS/HTML4.01 (daher auch die reihenfolge der verweis-zustände und die website existiert (und funktioniert) auch schon seit einigen jahren. sie wird nur immer mal wieder etwas ausgebaut und ergänzt. so ist jetzt zu dem standardmenü [menulink] auf bestimmten seiten aus inhaltlich/gestalterischen gründen ein zweites menü [menublacklink] hinzugekommen; aber auch andere textstile haben z.g.t. linkzuweisungen. die reihenfolge in allen CSS-zuweisungen ist so wie hier notiert ...

a:link
a:visited
a:active
a:hover

... und in keinem anderen fall gab es je, noch gibt es aktuell die genannten anzeigefehler (die auch nur dann auftreten, wenn die die seiten zum ersten mal nach geleertem cache aufgerufen werden. sobald die links einmal angeklickt wurden, sind die farben korrekt. sehr seltsam. ggf. werde ich die reihenfolge testweise in ...

a:link
a:visited
a:hover
a:active

... ändern, aber ob's wirklich hilft?
0
pb_user
pb_user22.02.1019:54
unglaublich, die lösung war einfacher als gedacht: es fehlte "lediglich" ein semikolon!

statt
.menublacklink a:link {
font-family : "Lucida Grande", Arial, sans-serif;
font-size : 11px;
font-weight : bold;
text-decoration : none;
color : rgb(240, 180, 145)
background-color : rgb(0, 0, 0);


muss es in der 6. zeile heißen
color : rgb(240, 180, 145);

vielen dank trotzdem für eure tipps ...
0
sierkb22.02.1020:20
pb_user
unglaublich, die lösung war einfacher als gedacht: es fehlte "lediglich" ein semikolon!

Ja, sowas kann durchaus mal das eine oder andere Fehlverhalten nach sich ziehen. Hätte mir auch als Erstes auffallen müssen, als ich Deinen Code grob überflog. Das fehlende Semikolon ist auch mir entgangen...

Deshalb empfehle ich Dir für die Zukunft (damit sowas nicht nochmal passiert):

W3C Markup Validation Service (zum Prüfen des HTML-Codes)
und
W3C CSS Validation Service (zum Prüfen des CSS-Codes)
oder
W3C Unicorn - The Web's Universal Conformance Checker (Experimentell, noch nicht offiziell freigegeben; zum Testen von HTML- und CSS-Code)

0
pb_user
pb_user23.02.1001:32
sierkb ja richtig, guter hinweis! habe ich in diesem moment echt vergessen, denn die validations-checks (tolles wort) mache ich eigentlich sonst immer. aber erst, wenn ich mit der seite fertig bin - also wäre ich irgendwann vermutlich auch auf diesem weg auf den fehler aufmerksam gemacht worden. so war es etwas mühsamer, aber immerhin hat es sich gelohnt und ich bin froh, dass jetzt wieder alles korrekt angezeigt wird.
0

Kommentieren

Diese Diskussion ist bereits mehr als 3 Monate alt und kann daher nicht mehr kommentiert werden.