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:
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.
Non è che magari stai commettendo qualche errore in fase di implementazione?
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.
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.
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.
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.
Avevi ragione! Con quel punto e virgola si sistema tutto!
Grazie, buon anno nuovo!
Ho parlato troppo presto.
Lo stesso codice, sul Windows 7 che ho in ufficio, lascia il bordo tratteggiato.
Non funziona su IE7…
ma va là!
Con questa riga nel css a me funziona benissimo anche su IE
img {
border-width: 0;/* leave or IE puts a border around links */
}
Caro Carlo,
tu stai parlando di una cosa diversa: stai parlando del bordo attorno alle immagini.
Doz hai ragione, vabbè spero serva a qualcun’altro. Chiedo scusa.