Background-image

**Zxy** · 06-10-2010, 11:46

Salve!
Ho una paginetta semplicissima con un css semplicissimo, entrambi validati col W3C.

E provandola su 3 browser diversi (chrome, firefox e internet explorer) ottengo 3 risultati diversi.

Ho 3 div, che devono avere lo stesso identico comportamento: cambiare immagine di sfondo quando ci passo sopra col mouse.

Se creo una classe e assegno ai 3 div la stessa classe, l'effetto funziona solo con chrome.
Se assegno ai 3 div lo stesso id (cosa dal punto di vista della programmazione scorretta), l'effetto funziona su chrome e su firefox, ma non su IE.

Mi dite dove sbaglio?

Questo è il codice HTML:

codice:

<div class="m_item">
		        <span class="block">Pagina principale</span>
		</div>
		<div class="m_item">
			<span class="block">Sintesi</span>
		</div>
		<div class="m_item">
			<span class="block">Strutture</span>
		</div>
		<div class="m_item">
			<span class="block">Info</span>
		</div>

e questo è il codice CSS:

codice:

.m_item{
float: left;
background-image:url('images/4.png');
display:block;
}
.m_item:hover {
text-decoration: none;
background-image:url('images/1.png');
}

Grazie!

**ResianTaxidrive** · 06-10-2010, 11:55

Mah, gli hover non è che puoi usarli proprio ovunque. Se metti div:hover (quindi div al posto del nome della class) in FF dovrebbe funzionare ma in ie no. Dovresti cercare di applicare losfondo agli <a> e allora sei sicuro che ovunque vedi quello che vuoi.

**Zxy** · 06-10-2010, 12:16

Ho creato 2 classi, una per il div e una per l'<a>.

codice:

.d_item{
float: left;
display:block;
}
.a_item{
text-decoration: none;
background-image:url('images/4.png');
}
.a_item:hover {
text-decoration: none;
background-image:url('images/1.png');
}

E ho modificato l'html appositamente:

codice:

<div class="d_item">
	<span class="block">Sintesi</span>
</div>

Così funziona su IE (anche se non per tutta la lunghezza del DIV...), ma non funziona su Firefox ne su Chrome...

Qualche consiglio?

**ResianTaxidrive** · 06-10-2010, 12:47

prova a dargli a <a> display:block e magari le dimensioni. Potrebbe essere anche lo span interno che gli rompe le balle, al limite lo puoi eliminare, non credo di serva.

**Zxy** · 06-10-2010, 13:15

Risolto.

Il problema era nella codifica HTML.

Io avevo:

codice:

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

Ho sostituito con:

codice:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN">

Adesso si sono risolti anche altri problemi con i margini e la visualizzazione è molto più simile a quella di Firefox e IE.

**Zxy** · 06-10-2010, 13:21

Originariamente inviato da ResianTaxidrive
prova a dargli a <a> display:block e magari le dimensioni. Potrebbe essere anche lo span interno che gli rompe le balle, al limite lo puoi eliminare, non credo di serva.

Avevo provato sia a spostare il display:block che a toglierlo proprio, ma non cambiava nulla.

Comunque grazie lo stesso per la disponibilità.

Ciao!

Discussione: Background-image

Strumenti discussione

Ricerca discussione

Visualizza

Background-image

Permessi di invio