ul li

[fiorentinese]

sto effettuando un menu.con delle immagini fatto in questo modo
<div id="nav">
<ul>
[*][img]home.gif[/img][*][img]classifica-serie-a.gif[/img]
[/list]
</div>';


nel foglio di stile ho fatto così
#nav ul
{
margin: 0 0 0 0;
padding: 0 0 0 0;
list-style-type: none;
}

#nav li
{
margin:0 0 0 0;
padding: 0 0 0 0;

}

le immagini vanno una sotto l'altra e tutto va bene solo che rimangono staccate e non unite perfettamente lasciando uno spazio tra una e al'altra non desiderato.
come posso fare per eliminare questo problema?

[Mich_]

Anzitutto se usi i CSS non usare attributi di formattazione HTML (mi riferisco al border="0" del tag <img> )

Io metterei border:0 anche ai tag <a> e <img> dentro quel #nav:

#nav a, #nav img {
border:0;
padding:0;
}

Eventualmente prova anche a sistemare esplicitamente le pseudoclassi del link:
#nav a:link, #nav a:hover {
border:0;
padding:0;
}

[pierofix]

Io metterei le immagini come sfondi dei tag a. Questi ultimi li setterei così

a {
display: block;
width: tot px;
height: tot px;
}
a#uno {
background: url("img_link1.gif");
}
.
.
.

Può andare?

[fiorentinese]

ho provato così:
#nav a, #nav img {
border:0 0 0 0;
padding:0 0 0 0;
margin:0 0 0 0;
}

#nav ul {
border:0 0 0 0;
margin: 0 0 0 0;
padding: 0 0 0 0;
list-style-type: none;
}

#nav li {
border:0 0 0 0;
margin:0 0 0 0;
padding: 0 0 0 0;
}

ma niente continua a lasciare un bordo tra un'immagine ed un'altra

[Jerry Masslo]

aggiungi questo:

li img {border:0;
vertical-align:top
}

[fiorentinese]

#nav a, #nav img{
border:0;
margin:-1px;

}
ho risolto così anche se non mi sembra la migliore soluzione

[Jerry Masslo]

ma col vertical-align non si risolveva?

nelle prove che ho fatto andava a posto sia in ie che in firefox, il margin negativo mi pare non fosse efficientissimo specie ridimensionando i caratteri

[fiorentinese]

con vertical-align niente tra poco provo il tutto su tutti i browser e poi vediamo se va bene

[Cheope]

Image replacement?