✔ links antabben (focus) funktioniert nur in FF und IE

G

Gast170816

Hallo,
ich dachte ich wüsste, wie das mit dem "focus" bei Links geht, also dass ich auch nur mit der Tab-Taste navigieren kann.

Jetzt hab ich festgestellt, dass das nur in IE und FF zu funktionieren scheint, aber bei Opera, Safari etc... passiert nichts, beim Drücken der Tab-Taste wird überhaupt nichts in der eigentlichen Webseite angesprochen.

Ich habe eine Seite, dort ein DIV header, darin eine Navigation UL navigation.
HTML: 
<div id="header">
	<ul class="navigation">
		<li><a href="index.html">start</a></li>
		<li><a href="referenzen.html">referenzen</a></li>
		<li><a href="links.html">links</a></li>
		<li><a href="kontakt.php">kontakt</a></li>
	</ul>  <!--ul navigation-->
	</div> <!--header-->

In IE und FF funktioniert es, dass die Navigationspunkte weiß sind und wenn ich tabbe, werden sie blau mit blauem Pünktchen-Rand.

Meine CSS:
Code: 
a:link, a:visited {
color: #fffffb;
text-decoration: underline;
}

a:hover, a:active, a:focus {
color: #0ebfe9;
text-decoration: underline;
}

.navigation  li  {
display: inline;
margin-left: 30px;
font-size: 0.9em;
}

.navigation a:link, 
.navigation a:visited,
.navigation a:active,
.navigation a:hover,
.navigation a:focus {
text-decoration: none;
}

#header ul li a:link,
#header ul li a:visited {
color: #cbcbcb;
}

#header ul li a:hover, 
#header ul li a:active, 
#header ul li a:focus {
color: #0ebfe9;
}

Was ist falsch?
HTML und CSS sind getestet und valide.

Hab ich irgendne falsche Reihenfolge? Macht das hier so entscheidend was aus? ...ich gebe zu, die CSS ist vermutlich etwas unaufgeräumt.

PS: Außerdem hab ich auch noch skip-links eingebaut.
Die funktionieren in FF (die skip-links werden beim Tab-drücken als erstes angesprungen)... aber in IE stürzt das Ding ab sobald ich Tab drücke.
 
Hi,

Opera und Safari stellen den Fokus nicht gleichermaßen dar, wie FF und IE mit dem typischen gepunkteten Rahmen, und wie es scheint, sind die Links in den beiden Browsern grundsätzlich nicht über die "Tab"-Taste erreichbar, was mich jetzt aber doch etwas verwundert.

Zumindest erreiche ich in Safari über diese Taste nur die Adresszeile und das Eingabefeld von "google", und in Opera wird damit die "Zoom"-Auswahlliste angesteuert.

Da ich diese Browser nur zum Testen verwende, weiß ich gar nicht, mit welcher Taste(nkombination) in ihnen die Navigation angesteuert werden kann.

mfg Maik
 
Okay, in Safari muß in den erweiterten Einstellungen die Option "Über Tabulator jedes Objekt auf einer Webseite hervorheben" aktiviert sein. So erreiche ich nun auch die Links, und die :focus-Pseudoklasse kommt zum Zuge.

Mußt halt mal schauen, wo die Entwickler diese Option in Opera versteckt haben.

mfg Maik
 
Stimmt, ich erreiche bei den Browsern auch nur Google-Zeile oder Zoom,
Aber hier ist eine Seite

http://www.herald.ie/breaking-news/national-news/small-plane-crashes-in-limerick-1862179.html

da kann man im Prinzip alles mit Tabs ansteuern, so wie aus FF und IE bekannt.
Ich hab ein bisschen versucht zu gucken, ob da was großartig anders gemacht ist bei den Links, aber ich kann nix entscheidendes finden :confused:

PS:
Und kennst du dass IE (mir scheint speziell IE6) beim anspringen von skip-links abstürzt?

Meine skip-links sehen so aus, einfach ins DIV "container" geschmissen, was die ganze Seite umgibt.
HTML: 
<ul id="skip-links">
		<li><a href="#navigation" accesskey="n">Skip to navigation [n]</a></li>
                 <li><a href="#content" accesskey="c">Skip to content [ c]</a></li>
		<li><a href="#label" accesskey="t">Skip to topnavigation [t]</a></li>
 </ul>

Und der Bereich in der CSS dazu sieht so aus:
Code: 
#skip-links { 
position: absolute; 
top: 0; 
left: -10001px; 
list-style: none; 
margin: 0; 
padding: 0; 
}

#skip-links li a:focus, 
#skip-links li a:active { 
display: block; 
position: absolute; 
left: 10001px; 
top: 0; 
z-index: 10001;
width: 200px; 
padding: 0; 
background: #AF31AA; 
color: #fff; 
font-size: 1.0em; 
text-align: center; 
}

Ich denke eigentlich, da kann man doch bald gar nix falsch machen.
Und dann hab ich mal in der CSS beim "#" noch "ul" davor geschrieben und dann gings ABER wenig später gings auch schon NICHT mehr.
(Habs sogar wieder ZURÜCKgeändert und dann gings wieder und dann später eben wieder nicht.)

PS: Ob da nur "ul" mit einer "id" ist oder noch ein "div" mit "id" drum dürfte ja egal sein, denk ich mal.

EDIT:
Das steht beim Fehlerprotokoll:
AppName: iexplore.exe AppVer: 6.0.2900.5512 ModName: mshtml.dll
ModVer: 6.0.2900.5848 Offset: 00120b6a
 
Zuletzt bearbeitet von einem Moderator:
Fantasmo hat gesagt.:
Aber hier ist eine Seite

http://www.herald.ie/breaking-news/national-news/small-plane-crashes-in-limerick-1862179.html

da kann man im Prinzip alles mit Tabs ansteuern, so wie aus FF und IE bekannt.
Zum Vergrößern anklicken....
Im Opera kann ich mich da nur durch die einzelnen Formulare tabben.

Fantasmo hat gesagt.:
PS:
Und kennst du dass IE (mir scheint speziell IE6) beim anspringen von skip-links abstürzt?
Zum Vergrößern anklicken....
Bei mir stürzt der IE6 nicht ab, wenn ich mich durch diese "Skip-Links" tabbe.

mfg Maik
 
Sodele, und hier folgt die Lösung für Opera :)

Code: 
<ul class="navigation">
                <li><a href="index.html" tabindex="1">start</a></li>
                <li><a href="referenzen.html" tabindex="2">referenzen</a></li>
                <li><a href="links.html" tabindex="3">links</a></li>
                <li><a href="kontakt.php" tabindex="4">kontakt</a></li>
</ul>


Siehe die Attribut-Referenz für das a-Element.

mfg Maik
 
Danke für den Tipp mit "tabindex", da hab ich das jetzt mal so gelöst!

Maik hat gesagt.:
Bei mir stürzt der IE6 nicht ab, wenn ich mich durch diese "Skip-Links" tabbe.
Zum Vergrößern anklicken....

Bei MEINEN skip-links?
Mmh, komisch (also müssten "skip-html" und "skip-css" selbst richtig sein?!).

Ich hab noch wo gelesen, dass in dieser "mshtml.dll" manchmal Fehler passieren, wenn man "@import" benutzt oder die "print.css" VOR der "screen.css" liegt, aber das hab ich schon geändert und da es das Erste ist, was in "container" kommt und nicht sonst wie kompliziert reingebastelt ist, kann man ja auch irgendwie nix falsch machen.

(Ich glaube, ich sollts einfach sein lassen, welcher IE-Nutzer guckt schon ob die skip-links funktionieren.)

EDIT:
Es könnt auch sein, dass es nur online zum Absturz führt, aber offline ganz normal funktioniert.
 
Zuletzt bearbeitet von einem Moderator:
Hier ist das:

skip link test

Ich hab das Layout und die CSS mal doll "ausgedünnt".

Bei mir geht der IE (6) beim Tab drücken zu.
Ich hatte vermutet, es ist irgendwas, bei den "ul" in der CSS. Wenn ich diesbezüglich was rauslösche gehts... jedoch nur in so fern, das IE nicht abstürzt... richtig sehen kann ich die skip-links nicht, ich sehe nur unten in der Statuszeile, dass sie "namentlich" angesprungen werden.

Auch gings mal, wenn ich die "htc" vom "iepngfix" lösche, aber wenn ich die "htc" DRINlasse und dafür in der CSS Sachen rausgelöscht hatte, gings auch.
(Also ich versuche Sachen zu löschen um das einzugrenzen, aber manchmal wenn ich "a" lösche und "b" drinlasse, funktioniert es genauso gut, wie wenn ich "b" lösche und "a" drinlasse. EINEN Schuldigen scheint es nicht zu geben.)

PS:
Mit "es ging" meine ich aber auch nur: "Es ist nicht abgestürzt, aber korrekt farblich abgehoben hat man die skip-links dann auch nicht gesehen."
 
Da würd ich als Autor der Seite postwendend den Problembericht an die Störungsstelle senden ;-)

ie6_problembericht.jpg

Sei getröstet, im aktuellen IE lässt sich absturzfrei durch die Skip-Links navigieren.

mfg Maik
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück