Ancora problemi con i CSS

Ciao ragazzi ho un piccolissimo problema con i CSS, soprattutto per quanto riguardano i "link". Io ho inserito queste linee nel file CSS:

a:active{
	background-color: #FFFFFF;
	color: #0000EE;
	text-decoration: none;
}

a:hover{
	background-color: #FFFFFF;
	color: #3080FF;
	text-decoration: underline;
}

a:link{
	background-color: #FFFFFF;
	color: #0000EE;
	text-decoration: none;
}

a:visited{
	background-color: #FFFFFF;
	color: #0000EE;
	text-decoration: none;
}

Il problema è che in Firefox 2.0 RC3 non viene nè sottolineato nè cambia colore la scritta quando ci si passa sopra, mentre in Internet Explorer funziona correttamente.

Invece in questo pezzo di codice:

.link:active{
	background-color: #FFFFFF;
	color: #0000EE;
	font-size: 13px;
	font-style: italic;
	font-weight: bold;
	text-decoration: none;
}

.link:hover{
	background-color: #FFFFFF;
	color: #3080FF;
	font-size: 13px;
	font-style: italic;
	font-weight: bold;
	text-decoration: underline;
}

.link:link{
	background-color: #FFFFFF;
	color: #0000EE;
	font-size: 13px;
	font-style: italic;
	font-weight: bold;
	text-decoration: none;
}

.link:visited{
	background-color: #FFFFFF;
	color: #0000EE;
	font-size: 13px;
	font-style: italic;
	font-weight: bold;
}

Che fa sempre riferimento a dei link, la sottolineatura al passaggio del mouse funziona, ma non cambia colore la scritta (nè in IE che in Firefox)...

Qualcuno sa dirmi perchè succede questo? Grazie in anticipo

leggi qui

primo LINK,
secondo VISITED,
terzo HOVER,
ci sarebbe poi anche un quarto FOCUS ed un quinto ACTIVE. Si deve rispettare questo ordine per evitare conflitti, se per esempio si invertisse HOVER con VISITED passando sopra ad un link già visitato non si avrebbe l'effetto hover ma soltanto quello Visited.

Credo dovrebbe funzionare se cambi l'ordine, ma non sono sicuro.

[dreadnaut]

(Mi riferisco al primo esempio, ma il concetto è lo stesso)

la C di CSS sta per cascading, e avvisa che le regole nel file css sono analizzate in successione. Per ogni elemento, il browser parte dall'alto e applica tutte le possibili regole che corrispondono ad esso.

prendiamo il tag <a href="pagina.php">Vai a pagina</a> e applichiamo le regole del tuo stile. Mettiamo che il mouse sia sul link ma non premuto.

• A:active - il link non è attivo, quindi non succede niente
• A:hover - il mouse è sul link, quindi applichiamo questa regola, in particolare text-decoration: underline;
• A:link - il tag contiene il campo href, quindi è un link; applichiamo la regola, in particolare text-decoration: none;
• ...

l'ordine delle regole fa si che il link venga sottolineato, e poi de-sottolineato basta che sposti la regola A:hover in fondo e sei a posto !

In più, dato che più regole possono essere applicate per ogni elemento, puoi risparmiare testo e scrivere:

A {
 background-color: #FFFFFF;
 color: #0000EE;
 text-decoration: none;
}

A:hover {
 text-decoration: underline;
 color: #3080ff;
} 

Così tutti gli A seguiranno la prima regola, e i link con sopra il mouse le seguiranno entrambe

Grazie adesso provo :)

P.s. Funziona alla grande ^_^