Aminorar la distancia de separación entre los elementos de las listas

Es curioso, pues aunque en la hoja de estilo le habiamos indicado al navegador que pusiera todos los márgenes a cero (con la famosa línea del asterisco) ahora nos encontramos con un margen en esa lista y además bastante grande (al menos usando el Internet Explorer). Vamos a probar el truco aquel que te conté, el de poner todo el código html de la lista en la misma línea, recuerdas? Ha de quedar así:

<div id="pieuno">
<ul>
<li><a href="#">Foro Ejemplo</a></li><li><a href="#">Contactos</a></li><li>....
</ul>
</div>

Y lo mismo para la otra lista, la de la capa #pietres, oki?

<div id="pietres">
<ul>
<li><a href="#">Directorio</a></li><li><a href="#">TopSite</a></li><li><a......
</ul>
</div>

Pues sí, era eso, je je je.

Aún puedes disminuir algo más el espaciado entre los enlaces de esas capas. El problema es que no sabría explicártelo muy bien, pues a simple vista no tiene mucho sentido, pero el caso es que funciona. En fin, te digo cómo y pasamos de la explicación por el momento pues me llevaría unas cuantas páginas convencerte del porqué, je je. Además en el ejemplo no lo dejaremos así, sino como lo tenemos hasta ahora, oki? Sería añadiendo la propiedad font-size:12px a la línea de definición de la capa #pieuno. Si en lugar de 12px disminuyes ese valor verás como el tamaño del texto no varia (pues ese tamaño está definido en la capa #pie li) pero sí decrece el espacio entre los tres enlaces. Pero repito, eso no lo hacemos en este ejemplo, oki? Úsalo tú en tus cosas si lo necesitas.

Con esto queda por terminado por el momento el pie de página. Así que quita ya el color gris claro (silver) que habíamos puesto a la linea de la capa #piedos (elimínale el ; background-color: silver), guarda la hoja de estilo y haz vista previa para ver cómo ha quedado.