Fehlerhafte Umradung von Navi-Element

Hallo,

ich habe auf http://http://jutta-ebling.hype-on.de von 4.9.3 auf 4.9.5 aktualisiert.

Der Navi-Punkt KONTAKT war vorher im aktiven Zustand mit einer 1-Pixel Linie türkis umrandet.
Nun wird die Umrandung unterbrochen.

Ich hatte zudem bei der Schriftdarstellung Problem mit span / strong. Hat es ggf. auch damit zu tun?

#nav-main a.kontakt {
margin-right: 0;
color: #C42828;
border: 1px solid #C42828;
border-radius: 5px;
padding: 0.45em 1.75em;
}

#nav-main a:hover.kontakt, #nav-main span.kontakt, #nav-main strong.kontakt {
color: #009273;
border: 1px solid #009273;
border-radius: 5px;
padding: 0.45em 1.75em;
}


Herzlichen Dank für eure Hilfe!

Hallo guidoi,

die Linie wird vom Zustand :focus unterbrochen. Das ist ein Standard in Browsern und hilft, wenn Du z.B. eine Webseite nur über die Tastatur bedienst oder auf Screenreader oder andere Hilfsmittel angewiesen bist. Insofern sollte sich der :focus-Zustand immer von den anderen Link-Zuständen abheben, das muss natürlich keine unterbrochene Linie sein, sondern kann auch ein anderer Hintergrund sein etc.

Code:

---

#nav-main a:focus.kontakt {
        outline: none;
}

---

Viele Grüße
Hella

Vielen Dank Hella! :)

Ein Freund hat mir folgende Lösung vorgeschlagen:

Demzufolge hat der Selektor #nav-main span nicht ausgereicht, weil alle Navipunkte innerhalb des "a" noch einen span haben.
Damit diese spans nicht auch durch die Deklaration beeinflusst werden, musste der Selektor spezifischer sein.

So hat es dann auch geklappt:

#nav-main a, #nav-main span.active