[css] link hover: problemi compatibilità con IE6

**Homer_J.S.** · 25-07-2007, 14:59

Ave!

anzitutto posto il codice se no me lo dimentico

codice:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">

<html>

   <head> 
      <title>hover</title>
<style type="text/css">
body {
	margin: 0 auto;
	width: 100%;
	height: 100%;
	background-color: #FFFF99;
	font-size: 2em;
}

div.blocco_link{
	float:left;
	background-color: #CCFFFF;
	width: 400px;
	height: 400px;
	border: 1px solid #000000;
}

div.blocco_link:hover{
	background-color: #0000FF;
	color: #FF0000;
	}

div.blocco_link a span{
	position: absolute;
	width: 500px;
	height: 500px;
	color: #FF00FF;
	top: 0;
	left: 0;
}
</STYLE>

</head>
<body>

	<span>
		<a href="#">
			<div class="blocco_link">
				alksjgh laskfjgh sdlkfjgh sldkfjgh lsdkj ghsldkjh 
			</div>
		</a>
	</span>

</body>
</html>

(ho postato anche l'html così chi volesse può provare al volo

)
ora la questione:
quanto sopra scritto fa cambiare colore allo sfondo del div ed al testo in esso contenuto al passaggio del mouse nell'area del div stesso (vedasi span)...
...il mio problema è la compatibilità con Internet Explorer 6 (e 5.x ovviamente) che non ne vuol sapere di funzare

per ora ho testato con FF2, FF1, IE7, Opera 9.x, Netscape 8.x e non ho problemi.

Esiste per caso un qualche hack che mi sfugge?

ringrazio anticipatamente l'anima pia che mi verrà in soccorso!

nel fraddunque, con reverenza, mi eclisso

**gabip87** · 25-07-2007, 15:14

IE, nelle versioni precedenti alla 7, non interpreta lo stato hover su elementi diversi da <a>. personalmente non conosco alcun metodo (corretto semanticamente) per aggirare il problema. aspettiamo altri interventi.

**Homer_J.S.** · 25-07-2007, 16:06

ciao gabip e intanto grazie per il cosulto

in effetti temevo la non interpretazione di hover

aggiungo alla questione una precisazione: qualora fosse possibile eviterei di usare javascript...o meglio sarebbe l'ultima spiaggia in caso di mancanza di altre soluzioni

**Mich_** · 26-07-2007, 12:32

IL tuo codice HTML e` sbagliato: non e` possibile inserire un elemento di blocco (div) dentro un elemento inline (a). Lo so che i browser visualizzano lo stesso, ma poi interpretano i CSS come meglio (o peggio) possono. Se vuoi usare bene i CSS, e` necessario che il codice HTML sia corretto sia dal punto di vista sintattico che semantico.

Vedi questa modifica:

codice:

<body>
  ...
  <div class="blocco_link">
    alksjgh laskfjgh sdlkfjgh sldkfjgh lsdkj ghsldkjh
  </div>
  ...
</body>

Con il CSS:

codice:

...
#blocco_link a {
  display: block;
  width: 100%; height: 100%;
  ...
}
#blocco_link a:hover {
  ...
}

Nota che il tuo CSS non e` corretto per il codice HTML proposto.

**Homer_J.S.** · 26-07-2007, 14:21

Anzitutto ringrazio Mich_ per le toppe che m'han fatto ottenere il risultato desiderato

Posto di seguito il codice con le correzioni qualora servisse a qualcuno in futuro

codice:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">

<html>

   <head> 
      <title>hover</title>
<style type="text/css">
body {
	margin: 0 auto;
	width: 100%;
	height: 100%;
	background-color: #FFFF99;
	font-size: 2em;
}

#blocco_link a {
	float:left;
	background-color: #CCFFFF;
	width: 400px;
	height: 400px;
	border: 1px solid #000000;
	display: block;
}
#blocco_link a:hover {
	background-color: #0000FF;
	color: #FF0000;
}
</STYLE>

</head>
<body>

  <div id="blocco_link">
    alksjgh laskfjgh sdlkfjgh sldkfjgh lsdkj ghsldkjh
  </div>
</body>
</html>

la storia del "div" all'interno di "a" è stata una clamorosa svista dovuta agli innumerevoli tentativi (alla fine quasi casuali

VVoVe: )

poi ho visto che non serviva più lo "span" (forse per il display: block;? ) ;

infineho sostituito la classe con l'id (anche se il risultato era lo stesso)...così, tanto per...!

Rinnovando reverenzialmente i miei ringraziamenti mi ritiro a passo di fagocero brillo :berto:

**Mich_** · 26-07-2007, 14:34

Il tuo codice probabilmente funziona, ma non e` il modo corretto per realizzarlo.

In pratica tu utilizzi il tag <a> come un blocco, mentre secondo logica (e secondo semantica) il tag <a> e` un semplice link, che non ha quindi possibilita` di definire dimensioni.

Le dimensioni (e anche il float) andrebbero definite nel <div>, mentre le variazioni cosmetiche possono stare nel <a>.
Poi il trucco di definire display: block ad <a> e quindi definire width e height al 100% e` anch'esso un trucco che ha riflessi solo cosmetici (serve per dare lo sfondo e il colore corretti nelle condizioni :link e :hover).

Un browser che avesse un supporto parziale ai CSS, nel tuo caso potrebbe non riuscire a rendere cio` che il programmatore voleva, dato che il <div> non e` dimensionato e non e` posizionato, mentre il <a> potrebbe non essere posizionabile e dimensionabile.

Discussione: [css] link hover: problemi compatibilità con IE6

Strumenti discussione

Ricerca discussione

Visualizza

[css] link hover: problemi compatibilità con IE6

dènghiu!

Permessi di invio