Problemi con il a:hover

[orphengt]

Salve ragazzi,
devo fare un bottone che quando passi sopra con il mouse si colora. Lo fatto già un'altra volta ma questa volta non ci sto riuscendo.

il bottone in html lo fatto così, senza mettere del testo nel link perchè non mi serve:

<div class="download"></div>

il css lo fatto così:

.download a{
background: #000 url('../immagini/download.jpg') no-repeat;
width: 260px;
height: 77px;
text-decoration: none;
}
.download a:hover{
background-position: 0 -77px;
width: 260px;
height: 77px;
text-decoration: none;
}

Con internet explore mi funziona perfettamente, invece con firefox quando passo sopra con il mouse non succede niente.
Dove sbaglio?
Spero di essere stato chiaro.

[uffissimo]

quando posti una domanda il codice va inserito tra gli appositi tag (prova a cliccare su "CODE")

comunque, prova a fare:

<div class="download"> </div>

[orphengt]

ho provato ma non funziona...non cambia niente quando passi sopra con il mouse

[Mich_]

Originariamente inviato da uffissimo
quando posti una domanda il codice va inserito tra gli appositi tag (prova a cliccare su "CODE")

comunque, prova a fare:

<div class="download"> </div>

NO! Questa sintassi non e` accettabile.
Un elemento block non puo` stare all'interno di un elemento inline.

@orphengt
Anzitutto evita di inserire elementi ambigui: la class="download" non ha senso attribuirla sia al <div> che al <a> contenuto.

Quindi l'HTML potrebbe diventare:

<div class="download">
  qui ci deve essere qualcosa
</div>

Poi occorre sistemare il CSS:

.download {
  width: 260px;
  height: 77px;
}
.download a {
  display block;     /* altrimenti non prende dimensioni */
  width: 100%;      /* grande quanto il suo contenitore (credo sia questo che vuoi)
  height: 100%; 
  background: #000 url(../immagini/download.jpg) no-repeat 0 0;  /* il path relativo al file CSS */
  text-decoration: none;
}
.download a:hover {          /* gli altri attributi non servono: prende gia` quelli a riposo */
  background-position: 0 -77px;
  text-decoration: none;
}

[orphengt]

ah ok ok....grazieee adesso funziona

[uffissimo]

Originariamente inviato da Mich_
NO! Questa sintassi non e` accettabile.
Un elemento block non puo` stare all'interno di un elemento inline.

Mich_ dato che pare ne sai più di me, io infatti ho imparato da autodidatta, molto anche grazie a questo forum, non scrivo molto solo perchè ho imparato ad usare il modulo di ricerca (che molti sembrann sappiano usare)

mi spieghi perchè "Un elemento block non puo` stare all'interno di un elemento inline"
premetto che non ho mai avuto bisogno di usarlo... ma mi incuriosisce capire il motivo...

[Mich_]

Vuoi la risposta ufficiale? La trovi nelle specifiche di HTML+CSS, nelle pagine del W3C; oppure lo trovi in molte guide (ad esempio la guida CSS di HTML.it al capitolo 2)

Vuoi una risposta ragionevole?
Non puoi mettere una scatola dentro un nastro; invece puoi mettere un nastro dentro una scatola.
E` (anche) questione di buon senso.

Un oggetto di tipo block lo devi immaginare come una scatola: ha delle misure, lo puoi spostare, lo puoi posizionare.
Un oggetto inline invece e` un nastro (una scritta): non ha dimensione propria, ma prende la dim del contenuto; lo puoi tagliare (quando arrivi a fine riga)

[uffissimo]

Grazie sei stato chiarissimo...