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!!!