Errore link in IE7

[fcw5]

Ciao a tutti,

oggi ho testato le pagine di un sito su IE7 (era stato testato su FF e IE6) ed ho notato un errore di visualizzazione dei link laterali
E' da stamani che ci sbatto la testa non riesco a risolverlo

HTML

<div id="navigazione">
<ul>
<li class="linea-0">CONVEGNO SCIENTIFICO
<li class="linea-2">xxx
<li class="linea-1">xxx
<li class="linea-2">xxx[/list]
</div>

CSS

div#navigazione {
width: 190px;
height: 390px;
float: right;
background-color: #001849;
background-image: url(nav-menu.gif);
background-repeat: no-repeat;
padding: 37px 5px 5px 5px;
}
.linea-0 {
color: #ccc;
font-size: 13px;
font-weight: bold;
display: block;
height: 1%;
line-height: 1.5;
padding: 2px 0 2px 5px;
background-color: #00377e;
}
.linea-1 a, .linea-1 a:visited {
color: #ccc;
font-size: 13px;
text-decoration: none;
font-weight: bold;
display: block;
height: 1%;
line-height: 1.5;
padding: 2px 0 2px 5px;
}
.linea-1 a:hover {
color: #fff;
background-color: #000d37;
text-decoration: none;
display: block;
}
.linea-2 a, .linea-2 a:visited {
color: #ccc;
font-size: 13px;
text-decoration: none;
font-weight: bold;
display: block;
height: 1%;
line-height: 1.5;
padding: 2px 0 2px 5px;
}
.linea-2 a:hover {
color: #fff;
background-color: #002159;
text-decoration: none;
display: block;
}

In pratica, invece di vedere il testo col colore di sfondo al passaggio del mouse, il colore mi sta giusto sopra il testo (tra quello evidenziato dal mouse e quello subito sopra).

consigli?

la pagina interessata per vedere l'errore è QUESTA nel menu laterale a sinistra.

Grazie Fcw

[Mich_]

Un errore di sintassi c'e`, ma non so se sia quello a dare il problema.
L'uso del segno meno (-) nei nomi delle classi (nessun nome di oggetti HTML puo` contenere segni aritmetici).
Prova a togliere quel segno.

[fcw5]

Ho trovato l'inghippo ma non lo so risolvere.

Scrivendo le liste così:
<li class="linea-2">xxx
<li class="linea-1">xxx
<li class="linea-2">xxx

ho dovuto aggiungenge la regola per i link
height: 1%;

per IE6 se no mi si visualizzava uno spazio tra una LI e l'altra, purtroppo lo interpreta diverso IE7, in cui dovrei scrivere
height: auto;
ma IE6 mi rivede nuovamente lo spazio in mezzo.

C'è una soluzione a livello di CSS o è meglio se inserisco un commento condizionale che mi inventerò a breve?

Grazie

Fcw

[Mich_]

IE (ma non so i dettagli delle versioni) non permette di avere blocchi piu` bassi del font, per cui se vuoi qualcosa di piu` piccolo devi anche inserire
font-size: 0; /* oppure 1px */

Non ho pero` capito se nel caso specifico la cosa e` attinente.

[fcw5]

Non voglio blocchi più bassi del font, semplicemente il colore di sfondo al font, dall'immagine si dovrebbe vedere la differenza tra i browser, io vorrei quello di sinistra.

Fcw

[fcw5]

Ho dimenticato la foto

[Mich_]

A cosa si riferisce il tuo
height: 1%;?
1% di cosa?

Il blocco #navigazione ha una altezza definita in px. La cosa non e` il massimo (che succede se un browser ha i fonti piu` grandi?), ma al momento non interessa per l'errore specifico.

Il blocco <ul> dentro il #naviagazione non ha un'altezza definita, per cui in alcuni brwoser puo` diventare "il piu` piccolo possibile". Se vuoi che l'<ul> occupi tutta l'altezza del #navigazione devi metterci:
height: 100%;

Poi i vari[*] hanno
height: 1%;
(di cui non capisco il motivo, ma citavi un hack per IE) e
line-height: 1.5;
(si intende una volta e mezzo l'altezza del font)

Dato che usi XHTML Strict, non dovrebbero essere necessari hack per IE6, non questi per lo meno, ma i misteri di IE possono essere imperscrutabili.

[fcw5]

A cosa si riferisce il tuo height: 1%;? 1% di cosa?

Non lo so, me lo suggerirono qui

http://forum.html.it/forum/showthrea...readid=1185081
e visto che nell'altro sito funzionò, credevo potesse andar bene per tutto

Il blocco #navigazione ha una altezza definita in px. La cosa non e` il massimo (che succede se un browser ha i fonti piu` grandi?), ma al momento non interessa per l'errore specifico.

C'è un motivo, così si vede sempre l'immagine di sfondo completa, è giusto alto come lei.

Ho provato a mettere UL con h=100% ma non è cambiato nulla, e il line-height: 1.5; l'ho messo solo per staccare una lista dall'altra, se no erano troppo appiccicate.

Per ora ho messo

height: 100%;

sulle regole dei link nel CSS e

.linea-1 a, .linea-1 a:visited {
height: 1%;}
.linea-2 a, .linea-2 a:visited {
height: 1%;}

come commento condizionale nella pagine html, ma so per certo che sto sbagliando arrampicandomi sugli specchi, si può fare tutto da CSS, basta capire come.

Faccio altre prove con le altezze, se risolvo aggiungo la soluzione, se hai altri suggerimenti sono ben accetti

Grazie 1000
Fcw