effetto hover su immagini (link) su IE6 che non va: come risolvere?

[blekm]

su tutti i browser funziona

<div id="thumb">[img]img.jpg[/img]</div>

#thumb
{
	width: 80px;
	height: 55px;
	margin-top: 20px;
	margin-left: 10px;
	float: left;
}
#thumb img
{
	width: 70px;
	height: 50px;
	border: 2px solid orange;
	margin: 4px;
	margin-left: 5px;
}

#thumb, a:hover
{

}

#thumb img:hover
{
	border: 2px solid white;	
}

bordo iniziale di 2px orange, che diventa bianco nel caso di hover.
So che IE6 non intepreta correttamente questa regola, come fare per far funzionare l'effetto su IE6?

[cane-nero]

forse devi fare:
elemento#nome_elemento:stato{...}

eccoti 2 links utili:

guida CSS (id e classi)

pseudo-classi

[blekm]

Originariamente inviato da cane-nero
forse devi fare:
elemento#nome_elemento:stato{...}

non ho capito questo...

[cane-nero]

così dovrebbe andar bene

<div id="thumb">[img]img.jpg[/img]</div>

#thumb
{
width: 80px;
height: 55px;
margin-top: 20px;
margin-left: 10px;
float: left;
}
img#thumb
{
width: 70px;
height: 50px;
border: 2px solid orange;
margin: 4px;
margin-left: 5px;
}

a#thumb:hover
{

}

img#thumb:hover
{
border: 2px solid white;
}

[H5N1_Aviaria]

IE6, di fatto, interpreta le pseudo-classi solo per elementi A.
Devi ricorrere a javascript o a behaviour (file htc) per fare ciò che hai descritto.
Utile, se non si ha dimestichezza con i behaviour, il Whatever:hover

[blekm]

Originariamente inviato da cane-nero
così dovrebbe andar bene

<div id="thumb">[img]img.jpg[/img]</div>

#thumb
{
width: 80px;
height: 55px;
margin-top: 20px;
margin-left: 10px;
float: left;
}
img#thumb
{
width: 70px;
height: 50px;
border: 2px solid orange;
margin: 4px;
margin-left: 5px;
}

a#thumb:hover
{

}

img#thumb:hover
{
border: 2px solid white;
}

questo è esattamente il mio codice

[salasir]

Così ottieni quello che volevi?

#thumb, a:hover,
#thumb a:hover img
{
	border: 2px solid white;	
}

[blekm]

Originariamente inviato da salasir
Così ottieni quello che volevi?

#thumb, a:hover,
#thumb a:hover img
{
	border: 2px solid white;	
}

cosi sballa tutto anche su ff.

http://blekm.altervista.org/layout.html

qua la pagina, vorrei ottenere lo stesso effetto che hanno tutti i browser su IE6

[gra-fichetto]

Originariamente inviato da blekm

qua la pagina, vorrei ottenere lo stesso effetto che hanno tutti i browser su IE6

Devi prevedere un foglio di stile per IE6 dove applicherai diverse regole. Quindi:
nella tua pagina html

<!--[if lte IE 6]>
<link rel="stylesheet" href="layout-ie6.css" type="text/css" media="screen" />
<![endif]-->

Nel foglio di stile per IE6 (che io ho chiamato layout-ie6.css):

a{
	border: 2px solid #FFF
}

a:hover{
	border: 2px solid orange
}
#thumb{
	width: 84px;
	margin-left: 8px;
}
#thumb img, #foto-centrali img{
	border: none
}
#foto-centrali{
	height: 104px
}
#foto-centrali img{
	margin: 2px 0 0 0
}

Fermo restando che avresti potuto utilizzare una lista non ordinata o di definizione per le immagini ed altre piccole cose.

[blekm]

grazie, cosi funziona con IE6.