Hola, soy nueva en el foro y mi problema es que tengo un menu horizontal que esta formado por cinco imagenes, las cuales haga lo que haga me quedan con un espacio entre cada una de ellas, intente cambiando varias veces el codigo, les pude padding: 0; border: 0; margin: 0 . Tambien probe con border:none; font-size:0; letter-spacing:-1p. Ya no se me ocurre con que mas probar el espacio me lo deja igual. Aqui les mando el codigo a ver si me pueden ayudar a descifrar cual es mi problema.
Código css:
Ver original#barra {float:left; width:100%; padding: 0; margin: 0; border:none; font-size:0; letter-spacing:-1px}
#barra li{ list-style:none; float:left;}
.inicio a{background:url(images/inicio.jpg) no-repeat; text-decoration:none; display:block; width:116px; height:40px; border:none; font-size:0; letter-spacing:-1px
}
.inicio a:hover {background-position:bottom; background-image:url(images/inicio_over.jpg);border: 0;}
.galerias a{background:url(images/galerias.jpg) no-repeat; text-decoration:none; display:block; width:150px; height:40px; border: 0; }
.galerias a:hover {background-position:bottom; background-image:url(images/galerias_over.jpg); border: 0; }
.servicios a{background:url(images/servicios.jpg) no-repeat; text-decoration:none; display:block; width:159px; height:40px; border: 0; }
.servicios a:hover {background-position:bottom; background-image:url(images/servicios_over.jpg); border: 0; }
.mapa a{background:url(images/mapa.jpg) no-repeat; text-decoration:none; display:block; width:142px; height:40px; border: 0; }
.mapa a:hover {background-position:bottom; background-image:url(images/mapa_over.jpg); border: 0; }
Código HTML:
<ul id="barra">
<li><img src="images/relleno.jpg" />
<li class="inicio"><a href="#" class="inicio"></a></li>
<li class="galerias"><a href="#" class="galerias"></a></li>
<li class="servicios"><a href="#" class="servicios"></a></li>
<li class="mapa"><a href="#" class="mapa"></a></li>
Gracias
