bordo a href

**Gio2011** · 12-06-2012, 11:36

Ciao a tutti,

ho il solito problema di bordo dotted che fa da contorno agli <a href> sul click/focus.

La struttura stili è:

codice:

#accordion{ visibility:hidden; margin-top:15px;}
#accordion h3 { cursor:pointer;padding:10px 0px 0px 0px;}
#accordion h3 .indent{ font-family: 'Abel', sans-serif;font-size:18px;font-weight:normal; color:#000; text-decoration:none; text-transform:uppercase; margin-top:0px;  }

Listato:

codice:

<div id="accordion">
<h3>blablabla</h3>
<div>



//contenuto
</p>
</div>

Ho provato:

codice:

h3 a:focus {
outline:none;
}

codice:

* a:focus {
outline:none;
}

codice:

* a:focus {
outline:0;
}

a mettere

codice:

outline:none;

nella classe indent ma non funziona. Sul primo click mi fa la bordatura, mentre se riclikko sparisce...Qualcuno ha qualche idea?

**scimmiaparlante** · 12-06-2012, 12:12

aggiungendo outline:none a #accordion h3 .indent{..} si dovrebbe risolvere..(a me in ie9 ie8 chrome firefox e opera va a posto)...sempre levando visibility:hidden sennò non si vede nulla

codice completo

codice:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<style>
#accordion{/*visibility:hidden;*/ margin-top:15px;}
#accordion h3 { cursor:pointer;padding:10px 0px 0px 0px;}
#accordion h3 .indent{ font-family: 'Abel', sans-serif;font-size:18px;font-weight:normal; color:#000; text-decoration:none; text-transform:uppercase; margin-top:0px;  }
#accordion h3 .indent{outline:none;}
</style>
</head>
<body>
<div id="accordion">
<h3>blablabla</h3>
<div>



nuibnubyubyu
</p>
</div>


</body>
</html>

**Gio2011** · 12-06-2012, 12:19

Ciao scimmiaparlante, ho (ri)provato per scrupolo ma non funziona, mi "borda" lo stesso sul primo clik.

Per quanto riguarda il visibility è un fix per IE sul jquery che uso nella pagina.

**scimmiaparlante** · 13-06-2012, 19:08

non saprei cosa dire..a me scompare in tutti i browser

**Gio2011** · 14-06-2012, 09:56

Questo è come si presenta ora:

codice:

	h3 a:focus {outline:none;}
	.mail {text-decoration:none; color:#CD0A0A; font-family: 'Abel', sans-serif; font-size:14px; font-weight:normal;}
	.mail:hover{text-decoration:underline;}
	#accordion{ visibility:hidden; margin-top:15px;}
	#accordion h3 { cursor:pointer;padding:10px 0px 0px 0px;}
	#accordion h3 .indent{ font-family: 'Abel', sans-serif;font-size:18px;font-weight:normal; color:#000; text-decoration:none; text-transform:uppercase; margin-top:0px;  }
	#accordion p { font-family: 'Abel', sans-serif;font-size:14px;font-weight:normal; color:#828282; margin:0px; padding:5px 0px 15px 0px; }
	#accordion div { font-family: 'Abel', sans-serif;font-size:14px;font-weight:normal; color:#828282; margin:0px; padding:0px; }
	#accordion h3 .indent{outline:none;}

e

codice:

<div id="accordion">
   <h3>1. Titolo</h3>
   <div>
       


          contenuto 
       </p>
   </div><h3>2. Titolo</h3>
   <div>
       


          contenuto 2
       </p>
   </div>
</div>

e questo è il risultato dopo il primo click, quello con cui scelgo il "paragrafo" da aprire. L'unica cosa che mi vine da pensare è che vada in confusione perchè al titoli/paragrafi c è applicato un jquery.

lo fa sia su IE che su firefox che su chrome (bordo giallo)............

**Gio2011** · 14-06-2012, 10:02

Provati anche

codice:

a:focus{
outline:none;
}

e

codice:

a:active, a:hover{
outline:none;
}

ma niente da fare

**Gio2011** · 14-06-2012, 10:05

Risolto con

codice:

h3:focus{
   outline:none;
}
h3:active{
   outline:none;
}

**Gio2011** · 15-06-2012, 14:49

Riprendo da quà senza aprire un nuovo topic, in caso di risoluzione posterò ex-novo.

Trattasi sempre di un "bug" generale, che si manifesta sui div/span. Qaundo clicco (e per tutti è uguale) su un div contenente un testo, dove clicco appare la barretta di scrittura testo che lampeggia. E' possibile far evitare questa cosa?

Cioè che se anche clicco (una volta) il testo, è possibile non farla apparire?

Discussione: bordo a href

Strumenti discussione

Ricerca discussione

Visualizza

bordo a href

Permessi di invio