[css] ID non funzionanti

Salve, avrei un problema con gli id...

#menulink {width: 6.25%; background-image: url('http://residentprojectd.altervista.org/bottone2.png');}
#menulink:hover {background-color: red;}

Questo è il css

<link src="style.css" rel="stylesheet" type="text/css">

questo è il modo in cui è stato inserito (in Questa pagina)

<div align="center">

<div id="menulink">PROVAA</div>

</div>

e questo invece è l'elemento interessato
se passate il mouse noterete che cambia colore in rosso, quindi l'hover funziona, perchè il resto no?

EDIT: l'hover funziona solo con google chrome

[dreadnaut]

Gli apici in url(...) non dovrebbero essere li.

[javascripter]

Gli apici in url(...) non dovrebbero essere li.

Ma è davvero un errore? ( io ho sempre saputo che fosse una sintassi valida )
Gli unici errori che riporta la console di firefox son questi:

20:41:35:109: Avviso: Proprietà sconosciuta 'font-face'.  Dichiarazione tralasciata. File sorgente: http://residentprojectd.altervista.org/index.php Linea: 135, Colonna: 10 Categoria: CSS Parser
20:41:35:137: Avviso: Combinatore non terminato.  Insieme di regole ignorato a causa del selettore errato. File sorgente: http://residentprojectd.altervista.org/index.php Linea: 0, Colonna: 18 Categoria: CSS Parser
20:41:35:144: Avviso: Raggiunta in modo inatteso la fine del file durante la ricerca della chiusura } di un insieme di regole non valido. File sorgente: http://residentprojectd.altervista.org/index.php Linea: 0, Colonna: 23 Categoria: CSS Parser

@ResidentProJectD: cosa cerchi di fare di preciso?

@Javascripter
far funzionare gli id
l'hover funziona quindi credo di poter integrare la parte di prima direttamente al div con l'attributo ( o come si chiama ) style
spero funzioni
@dreadnaut ho provato con le virgolette (") e senza niente ma non va lo stesso
eppure avevo letto da qualche parte che bisognava usare gli apici comunque adesso provo come ho detto prima e poi edito grazie per le risposte

Edit:

<div style="width: 6.25%; background-image: url(http://residentprojectd.altervista.org/bottone2.png);" id="menulink">PROVA</div>

ora non funziona l'hover...

[karl94]

Per quanto riguarda le virgolette, basta controllare le specifiche: http://www.w3.org/TR/CSS/syndata.html#uri
Per il resto: cosa vuoi fare?

ma non ci vuole il punto e virgola?
l'id non funziona vorrei sapere il perchè...

[karl94]

ma non ci vuole il punto e virgola?

Dove?

l'id non funziona vorrei sapere il perché...

Il selettore funziona correttamente. Se parli del fatto che lo sfondo non cambia ci sono due motivi:

1. Se imposti le proprietà CSS tramite l'attributo style dell'HTML, queste avranno precedenza assoluta, non potranno essere quindi sovrascritte tramite la pseudo classe :hover.
2. Tu cambi il colore di sfondo, non l'immagine. Lo sfondo (nel CSS2.1) è formato da immagine+colore, l'immagine è sopra, il colore di sfondo sta sotto. Se l'immagine non è trasparente e non la elimini, il colore di sfondo sarà sempre nascosto da questa

Dove?

nel link che mi hai dato... qui

body { background: url("http://www.example.com/pinkish.png") }

Tu cambi il colore di sfondo, non l'immagine. Lo sfondo (nel CSS2.1) è formato da immagine+colore, l'immagine è sopra, il colore di sfondo sta sotto. Se l'immagine non è trasparente e non la elimini, il colore di sfondo sarà sempre nascosto da questa

ma se invece del colore mettessi una qualunque immagine di sfondo me la visualizzerebbe?

[karl94]

L'ultima dichiarazione del blocco non necessita del punto e virgola.

Tu hai già impostato un'immagine di sfondo, e la visualizza. Se vuoi impostare e far vedere il colore di sfondo hai due possibilità: usare la proprietà background e impostare solo il colore, così la proprietà background-image verrà automaticamente impostata su none; oppure puoi impostare background-image su none e background-color sul colore che ti serve.

no...veramente volevo sapere se mettessi un'immagine di sfondo sul comando hover, me la visualizza?

[karl94]

no...veramente volevo sapere se mettessi un'immagine di sfondo sul comando hover, me la visualizza?

Sì, :hover è una pseudo classe, identifica gli elementi che stanno sotto il cursore del mouse, il selettore

#my_id:hover

identifica l'elemento avente id my_id solo quando il cursore del mouse vi è sopra. Dentro il blocco (delimitato dalle parentesi graffe) puoi impostare tutte le proprietà che vuoi.

e perchè non va? scusa se ti assillo XD

#menulink:hover {background-image: url(bottone3.png) }

<div style="width: 6.25%; background-image: url(http://residentprojectd.altervista.org/bottone2.png);" id="menulink">PROVAA</div>

in cosa sbaglio?

[karl94]

L'ho scritto nel post #7, CSS è l'acronimo di Cascading Style Sheet (foglio di stile a cascata), la cui caratteristica principale è appunto la "cascata", l'ordine nel quale vengono prese in considerazione le proprietà. La priorità massima è quella delle proprietà definite tramite l'attributo style dell'HTML, queste non possono essere sovrascritte. Devi usare il selettore #id e definirle, poi definisci le altre con il selettore #id:hover, queste altime avranno priorità maggiore poiché il selettore è più specifico (contiene la pseudo-classe hover).

ops scusa...grazie di tutto