Problema a:hover

**Gorgo** · 25-01-2011, 21:02

Ragazzi ho un problema un po' strano.
Aprite questa pagina che sto creando:
http://youdavoli.altervista.org/vineria/index.htm

Passando il mouse sulle varie voci del "Menù alla Carta" dovrebbe sottolinearsi il link.
Il problema è che con FF (Win7 32) si sottolineano solo se passo il mouse dal basso verso l'alto e spesso rimane la sottolineatura a caso

Con IE invece funziona benissimo.

Come risolvo? Dov'è il problema?

**Ticio94** · 25-01-2011, 21:36

Il problema è qua:

codice:

<style>
.auto-style9 { 	color: #800000; 	text-decoration:none }
</style>

<div class="titolo">
Menu alla Carta
</div>
				
Le proposte del menu alla carta:
				
                                <ul>
					[*]<span class="auto-    style9">Gli Antipasti</span>
					...
				[/list]

Se tu assegni la classe "auto-style9" con un "text-decoration:none" annulli la sottolineatura!

Nel css hai dichiarato:

codice:

a:hover { 	text-decoration: underline;}

Questo codice va in contrasto con il "text-decoration:none" creando dei problemi di visualizzazione.
Correggi eliminando il "text-decoration". Comunque il codice della pagina è molto confuso, ti conviene sistemarlo meglio. Sopratutto inserendo tutte le dichiarazioni css in un unico foglio!

**Gorgo** · 25-01-2011, 23:22

Ho tolto il decoration:none ma senza successo

Comunque devo ancora fare un po' di ordine con i css

**Ticio94** · 25-01-2011, 23:28

Originariamente inviato da Gorgo
Ho tolto il decoration:none ma senza successo

Comunque devo ancora fare un po' di ordine con i css

Ok! Quando li hai sistemati vedremo di risolvere il problema, anche perchè quell'errore che ti ho fatto notare è il primo che mi è balzato all'occhio ma in tutto quel "caos" ce ne saranno sicuramente degli altri

**Ticio94** · 25-01-2011, 23:41

Intanto sostituisci questo:

codice:

a { 
text-decoration: none; 
} 
a:hover { 
text-decoration: underline; 
color:maroon
}

Con questo più corretto:

codice:

a:link {  
text-decoration : none ;  
color: maroon; 
} 
a:visited { 
text-decoration : none ; 
color: maroon;
} 
a:hover { 
text-decoration : underline ; 
color: maroon; 
}

**Gorgo** · 26-01-2011, 01:12

Ok ho sostituito

Aspetto tue direttive

**Ticio94** · 26-01-2011, 17:55

Ho scaricato tutti i tuoi file e provato e riprovato la pagina in locale con diverse modifiche. Alla fine il problema era molto più semplice di quanto pensavo! Non so se tu hai mai sentito parlare di doctype, comunque questo è molto importante dichiararlo correttamente: avevo dato per scontato questo ma invece la prima riga della pagina HTML (quella del doctype) era così:

codice:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
....
</html>

Dichiarando così il doctype ti rovini con le tue stesse mani! In quella riga tu hai scritto che il codice della pagina è in XHTML 1.0 e come tale dovrà essere trattata. Il problema è che quella pagina non è scritta in XHTML ma bensì in un caotico HTML.
Il codice XHTML prevede, ovviamente una sua conoscenza, ma sopratutto richiede di rispettare regole molto rigide e non fa per il tuo caso.

Nella prima riga inserisci questo:

codice:

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

Inoltre cancella tutto quello che c'è nel tag html e lascialo senza attributi.

Con queste modifiche dovrebbe essere tutto a posto. Prova

**Gorgo** · 28-01-2011, 11:01

Grazie mille

**Ticio94** · 29-01-2011, 00:21

Ti consiglio fortemente di sistemare e riorganizzare il codice della home page prima di procedere alla realizzazione di altre pagine

Discussione: Problema a:hover

Strumenti discussione

Ricerca discussione

Visualizza

Problema a:hover

Permessi di invio