Bordi interattivi di immagini cliccabili

[Pepepilota]

Ciao a tutti

Sapete quando si ha l'impressione che sia una fesseria e ci si arrabbia perchè non la si vede? Ecco il caso

Ho un div container per una serie di immagini cliccabili

.box_contatti {
	float: right;
	height: 290px;
	width: 160px;
	padding: 3px;

banalmente distanzio tutte le immagini che conterrà e assegno loro un bel bordo

.box_contatti img {
	border: 3px solid #efd950;
	margin-bottom: 15px;
}

Ora, in html le immagini hanno il loro bel tag <a> e vorrei semplicemente che il loro bordo cambiasse colore al passaggio del mouse, come a simulare dei pulsantoni. Una cosa tipo

.box_contatti img a:hover {
	border: 3px solid #e11110;
	
}

ma mi sto incartando col codice.

[fcaldera]

.box_contatti a:hover img { ... }

[Mich_]

Il codice HTML di solito e` fatto cosi:

[img]...[/img]

Con l'immagine contenuta DENTRO il tag <a>

Quindi il selettore per l'immagine deve essere:
a img { ... }
a:hover img { ... }
(e non viceversa come hai fatto tu)

Sapete quando si ha l'impressione che sia una fesseria e ci si arrabbia perchè non la si vede?

Appunto

[Pepepilota]

Belli di mamma!!!

Grazie

[Pepepilota]

Mannaggia, su IE6 non funziona (strano...)

[fcaldera]

allora prova così

.box_contatti a:hover img {
   border: 3px solid #e11110;
   direction: ltr;
}

[Pepepilota]

Purtroppo non cambia.

Il comportamento è in effetti diverso tra tutti i browser

In IE6 cambia il colore del bordo dell'immagine solo se clicco

in IE7 e Safari funziona tutto benissimo

in FF in apparenza funziona ma è cliccabile anche lo spazio separatore tra le immagini incolonnate, tanto da farmi apparire un bordino punteggiato quando clicco.

su Opera fa come in FF ma almeno non mi mostra il bordino punteggiato

[fcaldera]

posta un link alla pagina se puoi. Stai usando qualche markup particolare con commenti condizionali?

[Pepepilota]

No, purtroppo non posso pubblicarla

ma ti riassumo il codice allo stato attuale

html

<div class="box_contatti">    
[img]immagini/acquista.gif[/img]
[img]immagini/numero_verde.gif[/img]       
[img]immagini/scrivici.gif[/img]      
</div>

css interessato

html {
	padding:0;
	border:0;
	margin:0;
}

a img {
	border: 0;
}

............
............
..........

.box_contatti {
	float: right;
	height: 290px;
	width: 160px;
	padding: 3px;
}

.box_contatti img {
	border: 3px solid #efd950;
	margin-bottom: 15px;	
}


.box_contatti a:hover img {
   border: 3px solid #712700;
   direction: ltr;
}

box_contatti fa float in un normale div centrato nella pagina, senza markup particolari

Non è poi necessario che io utilizzi link associati a immagini, ma mi pareva la soluzione più pulita, visto che a regime le immagini cliccabili non saranno predefinite.

Sei gentilissimo ad aiutarmi

[fcaldera]

uhm... prova a dare float:left ai link E alle immagini