ungewollte border bei aktiven links

Gelöst barbarandrae
(@barbarandrae)

vor 1 Jahr, 1 Monat

Hallo!

Ich hab meine Seite mit Elementor erstellt und das Theme OceanWP verwendet. Hat alles auch wunderbar funktioniert bis vor ein paar Tagen bei verlinkten Icons ein Problem aufgetaucht ist:

Nach dem Klick auf die Icons entsteht dort eine border (oder zumindest sieht das so aus). Das bleibt dann auch so bis man irgendwo anders hinklickt. Ich hatte ursprünglich den Verdacht, dass das mit Hummingbird zusammenhängt, weil ich zu dem Zeitpunkt gerade an der Seitenperformance gearbeitet hatte, aber das ist wohl nicht das Problem. Auch nach Hummingbird Deinstallation bleibt der Fehler erhalten.
Ich hab dann versucht im css gegenzusteuern und evtl. borders, outlines, boxshadows,… herauszunehmen. Hat aber nichts verändert.

Könnte sowas auch durch ein Javascript verursacht werden? Bin dankbar für Tipps!

Liebe Grüße,
Barbara

Die Seite, für die ich Hilfe brauche: [Anmelden, um den Link zu sehen]

Ansicht von 8 Antworten - 1 bis 8 (von insgesamt 8)

Moderator Hans-Gerd Gerhards
(@hage)

vor 1 Jahr, 1 Monat

Hallo,
welche Icons meinst du? – ich kann auf der Seite keine Icons entdecken, bei denen das der Fall ist. Oder meinst du die Fotos (Kerzenleuchter, etc.) z. B. auf der Hauptseite?
Viele Grüße
Hans-Gerd

Thread-Ersteller barbarandrae
(@barbarandrae)

vor 1 Jahr, 1 Monat

Hallo!

Danke für die rasche Rückfrage. Es geht um die Social Media Icons und den gelben Pfeil ganz zu Beginn. Das Problem besteht allerdings nicht bei mobilen Endgeräten (hab ich vorhin leider vergessen dazu zu schreiben).

Liebe Grüße,
Barbara

Moderator Angelika Reisiger
(@la-geek)

vor 1 Jahr, 1 Monat

Hallo, das ist kein border sondern outline.

Bitte lies dazu:
https://medium.com/better-programming/a11y-never-remove-the-outlines-ee4efc7a9968

insbesondere das Kapitel „I Want to Remove the Outline in an Accessible Way“

Betroffen dürfte auf deiner Website in diesem speziellen Fall a:focus sein.

Einen gelben Pfeil sehe ich übrigens nicht.

Thread-Ersteller barbarandrae
(@barbarandrae)

vor 1 Jahr, 1 Monat

Super! Vielen Dank! Werd ich gleich ausprobieren!
pezi
(@pezi)

vor 1 Jahr, 1 Monat
Bei mir kam das auch mal vor, (aber nur mit Chrome Browser) und da half eben
.#element {outline:none;}
Evtl. geht auch
.#element {outline:0;}

PS: Wäre die Site nicht gesperrt, könnte man sich die 3 Elemente (Pfeil, Icons) per Untersuchen oä. genauer ansehen.
- Diese Antwort wurde geändert vor 1 Jahr, 1 Monat von pezi.
Moderator Bego Mario Garde
(@pixolin)

vor 1 Jahr, 1 Monat

und da half eben .#element {outline:none;}

… und wieso du genau das nicht machen solltest, hat Angelika bereits angesprochen.

pezi
(@pezi)

vor 1 Jahr, 1 Monat

Schon, aber bei mir gings um eine altmodische Imagemap. Da sind diese Linkrahmen echt enorm störend hässlich. Also area {outline:none;}

Thread-Ersteller barbarandrae
(@barbarandrae)

vor 1 Jahr, 1 Monat

Danke für eure Tipps! Es hat auf Angelikas Art auf Anhieb funktioniert, deshalb lass ich’s jetzt mal so…