Levare il bordo attorno ai link

Può capitare in qualche browser – Explorer! – che al click sui link compaia un bordino tratteggiato; questo bordino si vede solamente al momento del click, non dovrebbe nemmeno dare fastidio perché subito dopo si passa alla pagina seguente, però…

A me è capitato di fare un sito, di creare dei bottoni su dei link testuali usando il solito ‘text-indent,display:block, background:ecc.‘.
Poi il cliente arriva e mi chiede come mai si vede quel bordo rosso!

Quale bordo rosso?!” … ecco, questa era la situazione 😐
Ovviamente si vede solo su Explorer+Windows, perché gli altri browser non lo mostrano.

Cerca-cerca, ho capito che il tutto si può disattivare tramite Css usando la proprietà outline, che in soldoni è come un bordo che sta però fuori dalle misure dell’elemento, quindi l’ho applicata al focus – che lo stato di un elemento selezionato – di tutti i link, ovvero ai tag a

Quindi: come si fa a togliere il bordo rosso che compare sui link in Explorer quando si clicca?

Ecco la righetta di codice:

* a:focus  { outline: none }

Siccome Explorer è la bestia nera nel mondo dei browser, e ovvio che ci siano dei Post Scriptum da sottolineare, cioè: Su Explorer 7 questo codice non porta a niente!

Per togliere il bordo punteggiato dai link in Explorer 7 la strada c’è, ma è un po’ diversa:

* a:focus  {
noFocusLine: expression(this.onFocus=this.blur());
}

Quindi basta unire le due righe in una singola regola css ed il gioco è fatto!

Link utile: w3org , haslayout , cssjunction

Altri sono arrivati qui cercando:
cancellare elenco lettura ipad.

13 pensieri su “Levare il bordo attorno ai link”

  1. La riga di codice non mi funziona. Ho il problema del bordo solo su Explorer, e non c’è verso di levarlo!
    La pagina in questione sta in un frame con dei link che aprono altre pagine nel frame accanto.

      1. Potrebbe essere. Il css è questo qua.

        a:link {
        color: #808080;
        text-decoration: none;
        font-weight: bold
        }
        a:visited {
        color: #808080
        }
        a:hover, a:active, a:focus, #sel {
        color: #ffffff;
        outline: none
        }
        a:link img, a:visited img {
        border: 5px solid #808080
        }
        a:hover img, a:active img, a:focus img, #sel img, #sel:hover img {
        border: 5px solid #ffffff;
        outline: none
        }

        Ovviamente ci sono delle parti che non riguardano il problema… L’ho messo tutto per chiarezza.

        1. Con questo css ci si fa poco: che ne sappiamo se c’è altro codice che va ad influire sulla resa a monitor? …era meglio se mettevi il link alla pagina dove si può vedere il problema, e spiegavi dov’è precisamente.

  2. La pagina non è ancora online, il sito è in costruzione. Appena avrò modo vedro di pubblicare una pagina-tipo, con lo stesso codice ma senza contenuti sensibili.

    Però se ci fossero dei conflitti, nell’articolo si dovrebbero dire, invece sembra che quell’outine: none sia la panacea del problema.

    1. Che io sappia non ci sono “conflitti”, comunque ho fatto una prova col tuo codice, a cui ho aggiunto, alla fine…
      a:focus { outline: none; }
      …e a me funziona.

Lascia un commento

Il tuo indirizzo email non sarà pubblicato.

Ricevi un avviso se ci sono nuovi commenti. Oppure iscriviti senza commentare.

You can add images to your comment by clicking here.