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.

  3. Con questa riga nel css a me funziona benissimo anche su IE

    img {
    border-width: 0;/* leave or IE puts a border around links */
    }

Lascia un commento

Il tuo indirizzo email non sarà pubblicato.

You can add images to your comment by clicking here.