Separar elementos span de barra de navegación

[miguel867]

Hola, mis páginas las tengo maquetadas a través de divs. Tengo uno para el contenedor global, otro para la cabecera de arriba, otro para el menú de la izqda y otro para el contenido. Dentro de éste último tengo una barra de navegación con el código siguiente:

Código PHP:

  <div id="navigation"> 
 
<span class="navigation_agenda"><a href="ruta" class="texblancneg" title="Agenda">AGENDA</a></span> 
<span class="navigation_idioma"><a href="ruta" class="texblancneg" title="Idioma">CASTELLÀ</a></span> 
<span class="navigation_mapa"><a href="ruta" class="texblancneg" title="Mapa Web">MAPA WEB</a></span> 
<span class="navigation_opina"><a href="ruta" class="texblancneg" title="Opina">OPINA</a></span> 
<span class="navigation_guia"><a href="ruta" onclick="javascript:Start('ruta',760,567);" class="texblancneg" title="GUIA DE CARRERS">GUIA DE CARRERS</a></span> 
 
</div> <!-- de div navigation-->  
   

Hay cuatro elementos y me gustaría que estuvieran separados para que quedaran más o menos centrados. Para ello, no quiero utilizar tablas y he hecho uso de los siguientes estilos:

Código PHP:

  #navigation { 
    width:100%; 
    height:20px; 
    text-align: left; 
    background-color:#7C99C7; 
    font-family: Arial, Helvetica, sans-serif; 
    font-size:12px; 
    padding-top:1px; 
    padding-bottom:1px; 
} 
 
.navigation_agenda, .navigation_idioma, .navigation_mapa, .navigation_opina, .navigation_guia, { 
    width:20%; /*este ancho creo que no hace nada*/ 
    height:20px; 
    text-align: left; 
    background-color:#7C99C7; 
    font-family: Arial, Helvetica, sans-serif; 
    font-size:12px; 
    padding-left:50px; /*este padding es el que pongo para separar los elementos entre sí*/ 
}  
   

Con el padding-left de cada elemento se me visualizan bien separados en el IE, pero no en el Firefox.
¿Alguien me puede ayudar para solucionar este problema? Me gustaría separar estos elementos que tengo en el div de la barra de navegación sin tener que hacer uso de tablas.

Gracias y Saludos!!!

[Eourus]

Añade debajo del padding-left otra linea que contenta lo siguiente:

display:block;

Por otro lado puede sustituir lo siguiente:

.navigation_agenda, .navigation_idioma, .navigation_mapa, .navigation_opina, .navigation_guia, {

por

#navigation span {

[miguel867]

Hola Eourus,

El display:block me pone cada elemento en una fila distinta. Yo no quiero eso, quiero que estén en la misma fila pero que tengan una cierta separación para que queden equidistantes más o menos. Con el padding-left se ve bien en IE pero no en Firefox.

¿Alguien sabe cómo solucionarlo?
Gracias y saludos!!!

[Eourus]

Ups, se me olvido decirte algo mas jeje, perdón.

Metele tambien la propiedad float:left

Y luego, en el html, donde termina el último enlace y se cierra el span añade

<div style="clear:both"></div>

Espero que con eso te funcione

[miguel867]

Ok, perfecto ya todo funciona bien