[CSS] Soliti problemi IE vs FF

paola.mi

[CSS] Soliti problemi IE vs FF

Ciao,
sono tre giorni che sbatto la testa su un problema, ho provato di tutto: togli di qui, aggiungi di là... ma niente...
Ho impostato un menù che, neanche a dirlo, con FF si vede perfettamente, con IE si vede una schifezza.
Vi mostro:

FF

[URL=http://img215.imageshack.us/my.php?image=ffaz3.jpg]

IE

[URL=http://img226.imageshack.us/my.php?image=ieer2.jpg]

Vedete?
qui il pezzo di css:

#menu {
float: right;
width: 30%;
background-color: #fff;
text-align: left;
font: normal 85% Verdana, Arial,sans-serif;
color: #000;
margin: 0 0 0 0;
padding: 10px 0px 0px 0px;
}

ul.menu {
list-style-type: none;
margin: 0px;
}

li.menu {
font: 100% Verdana, Arial, Helvetica, sans-serif;
color: #000000;
text-align: left;
}

.menu a {
display: block;
padding-left: 10%;
background-color: #FFF;
background-image: url(immagini/menu3.gif);
background-repeat: no-repeat;
background-position: 0 55%;
border-bottom: 1px dotted #009900;
padding-top: 1.5%;
padding-bottom: 1.5%;
font: 100% Verdana, Arial, Helvetica, sans-serif;
color:;
}

.menu a:link, .menu a:visited {
text-decoration: none;
}

.menu a:hover {
background-image: url(immagini/menu4.gif);
color:;
}

E qui. il pezzo xhtml:

<div id="menu">
<ul class="menu">
<li class="menu"><a class="menu" href="index.php" title="Torna alla Homepage" accesskey="0">Home (0)</a></li>
<li class="menu"><a class="menu" href="servizi.php" title="I Servizi offerti" accesskey="1">Servizi (1)</a></li>
<li class="menu"><a class="menu" href="accessibilita.php" title="Il Web accessibile a tutti" accesskey="2">Accessibilità (2)</a></li>
<li class="menu"><a class="menu" href="assistenza.php" title="Assistenza Tecnica" accesskey="3">Assistenza (3)</a></li>
<li class="menu"><a class="menu" href="portfolio.php" title="Portfolio Clienti" accesskey="4">Portfolio (4)</a></li>
<li class="menu"><a class="menu" href="accesskey.php" title="Navigare con la tastiera" accesskey="5">Accesskey (5)</a></li>
<li class="menu"><a class="menu" href="contatti.php" title="Per contattare lo Studio" accesskey="6">Contatti (6)</a></li>
<li class="menu"><a class="menu" href="dimensione_carattere.php" title="Come ridimensionare la grandezza del testo" accesskey="7">Dimensione testo (7)</a></li>
<li class="menu"><a class="menu" href="dichiarazione.php" title="Dichiarazione di accessibilità" accesskey="8">Dichiarazione accessibilità (8)</a></li>
</ul>
</div>

Potete aiutarmi, per cortesia? non ne vengo proprio a capo :bho:

fusionman

.menu a {
display: block;
padding-left: 10%;
background-color: #FFF;
background-image: url(immagini/menu3.gif);
background-repeat: no-repeat;
background-position: 0 55%;
border-bottom: 1px dotted #009900;
padding-top: 1.5%;
padding-bottom: 1.5%;
font: 100% Verdana, Arial, Helvetica, sans-serif;
color: #000000;
}

La riga evidenziata in rosso spostala nella classe "li.menu"

In realtà andrebbe fatto leggermente diverso il css...al posto di usare li.menu dovresti fare "#menu li" ma questo è un altro discorso

paola.mi

Grazie, FuSioNmAn
oltre a quello che mi hai suggerito, ho dovuto mettere così:

ul.menu {
list-style-type: none;
margin: 0px;
padding-top: 1.5%;
padding-bottom: 1.5%;
}

In IE non è proprio il massimo, ma almeno non è così distanziato...
Io odio IE.

vale76

@Paola_mi said:

Grazie, FuSioNmAn
In IE non è proprio il massimo, ma almeno non è così distanziato...
Io odio IE.

bisognerebbe proprio dare una svegliata a quelli di Redmond...
ma tu guarda un pò... chissà perché tutti i webmaster che si cimentano con gli standard e si fanno un mazzo tanto per ottimizzare al massimo i loro siti, prima o poi tutti, almeno una volta, sviluppano odio e rigetto psico epidermico nei confronti di IE....
Che dite, sarà casuale la cosa?