CSS Rollover Navigations-Item verschwindet nach "Zurück"

[mimhakkuh]

Hallo, ich habe zum folgenden Problem leider keine Ansätze im Forum gefunden; vielleicht kann mir jemand weiterhelfen.

Ich habe eine Image-basierte Rollover-Navigation mit CSS (nach O'Reilly CSS Cookbook/Kap.6.11) erstellt:

http://tinyurl.com/4zv852

Das Menü-Item "deutsch" funktioniert folgendermaßen:

++++++(HTML)++++++
<div id="menu_lang_first">
<a href="index.php?id=6" title="deutsch">
<span>deutsch</span>
</a>
</div>

++++++(CSS)++++++
#menu_lang_first a span {
 display: none;
}
#menu_lang_first a:link {
 display: block;
 width: 60px;
 height: 20px;
 background-image: url(../images/elements/menu_lang_first_off.gif);
 background-repeat: no-repeat;
 background-position: top left;
}
#menu_lang_first a:link:hover {
 display: block;
 width: 60px;
 height: 20px;
 background-image: url(../images/elements/menu_lang_first_active.gif);
 background-repeat: no-repeat;
 background-position: top left;
}
#menu_lang_first a:link:visited {
 display: block;
 width: 60px;
 height: 20px;
 background-image: url(../images/elements/menu_lang_first_off.gif);
 background-repeat: no-repeat;
 background-position: top left;
}

Das Ganze funktioniert sehr gut; wenn ich jedoch nach dem Klick auf "deutsch" die Seite noch einmal besuche, verschwindet das "deutsch"-Element. Nach leeren des Browsercache funktioniert das Ganze wieder.

Zuvor hatte ich das gleiche über ein transparentes Gif-Image als Platzhalter im HTML (statt unsichtbarem <span> -Text) gelöst:

http://tinyurl.com/4klqef

Hier funktioniert ein wiederholtes Aufrufen, ich würde die <span> Lösung aber vorziehen, da das Menüobjekt dann auch textuell ausgezeichnet ist.

Hat jemand eine Idee, warum das Element verschwindet und wie ich dem beikommen kann?

Gruss & Vielen Dank schon einmal,

F.

[Thomas Luethi]

Hallo,

Du hast im CSS
http://u0063776338.user.hosting-agency.de/fileadmin/css/style_index.css
folgendes stehen:
#menu_lang_first a span { display: none; }

Und Du wunderst Dich, wenn bei diesem HTML
<div id="menu_lang_first">
 <a href="index.php?id=6" title="deutsch"><span>deutsch</span></a>
</div>
nichts angezeigt wird? SCNR

Mich erstaunt eher, dass beim ersten Laden überhaupt etwas
angezeigt wird. Naja, Du verwendest wohl so'n Image Replacement
Zeugs à la FIR oder so, und eine DIV-Suppe hast Du auch.
Diese Dinger haben es in sich, und ich mag mich nicht damit befassen.

Warum schreibst Du
a:link:visited
und nicht einfach
a:visited
wie es normalerweise getan wird? Vielleicht liegt dort
der Hund begraben, denn offensichtlich wird der Link
bzw. das Bild nur angezeigt, wenn die Seite noch nicht
besucht wurde, also a:link, aber nicht mehr, wenn die Seite
schon besucht wurde, also a:visited.

Thomas

[Gunnar Bittersmann]

@@mimhakkuh:

http://tinyurl.com/4zv852

Forums-Hilfe, Formatierung von Postings ist doch über dem Eingabefeld kaum zu übersehen. (Allerdings frage ich mich, ob man darunter wirklich auch Verweise einbinden vermutet. Ich werd’s mal den Bugtracker fragen.)

Das Ganze funktioniert sehr gut; wenn ich jedoch nach dem Klick auf "deutsch" die Seite noch einmal besuche, verschwindet das "deutsch"-Element.

Dein Problem muss also was mit schon besuchten Links zu tun haben.

Nach leeren des Browsercache funktioniert das Ganze wieder.

Damit löschst du auch die Liste schon besuchter Links. Dein Problem muss also was mit schon besuchten Links zu tun haben.

Also schauen wir uns mal den Selektor an: #menu_lang_first a:link:visited

Was selektiert denn die Pseudoklasse ':link'? [CSS2 §5.11.2] (Die Bezeichnung ist irreführend; man hätte sie besser ':unvisited' nennen sollen.)

Dein Selektor trifft also auf Links zu, die sowohl besucht als auch unbesucht sind. Also nicht auf deinen Link, dessen 'background-image'-Eigenschaft demzufolge den Wert 'none' hat. (Das hättest du mit geeignetem Werkzeug wie Firebug oder DOM Inspector auch selbst herausfinden können.)

ich würde die <span> Lösung aber vorziehen

Ich halte sie für blö^Wbedenklich. Was passiert bei Nutzern, deren Browser (Screenreader) keine Bilder anzeigt, aber dein Stylesheet beachtet? Weißer Adler auf weißem Grund.

Live long and prosper,
Gunnar

[suit]

ich würde die <span> Lösung aber vorziehen

Ich halte sie für blö^Wbedenklich. Was passiert bei Nutzern, deren Browser (Screenreader) keine Bilder anzeigt, aber dein Stylesheet beachtet? Weißer Adler auf weißem Grund.

das ist ein dilemma - darum ist die phark-methode oder die gilder-levin-methode praktikabler

phark arbeitet mit negativem text-indent den scrennreader wie jaws offenbar nicht in die "sichtbar/nicht sichtbar"-berechnung einbeziehen - nachteil: css an, bilder aus führt dazu, dass kein text mehr angezeigt wird

gilder-levin arbeitet mit einem span, der den eigentlichen text überdeckt
css aus, bilder an funktioniert zwar, aber dafür ist die lösung nicht ie6 kompatibel (die links flackern beim mouseover) und die bilder müssen eine solide hintergrundfarbe haben

eine halbwegs praktikable lösung ist ein ausnahmestylesheet für den internet explorer 6 - alle browser bekommen gilder-levin zu sehen, beim ie6 wird die phark-methode angewandt