Ver Mensaje Individual
  #1 (permalink)  
Antiguo 05/12/2005, 09:00
Avatar de PosProdukcion
PosProdukcion
 
Fecha de Ingreso: noviembre-2004
Ubicación: Manzanares el Real (Madrid)
Mensajes: 726
Antigüedad: 19 años, 5 meses
Puntos: 9
2 listas iguales aparecen diferentes (FireFox)

Hola, tengo dos listas UL que hace como menu de enlaces, algo como lo de arriba de esta pagina de Panel de Control/FAQ/Usuarios/etc. Una en una capa arriba del todo (DivEncabezado), comun a todo el sitio web y otra en una capa propia para cada seccion (DivMenuPagina). Las dos listas son de la clase .ListaHorizontal y en IExplore todo es correcto pero en FireFox la lista de pagina no aparece centrada ni ocupa todo el ancho de la pagina, como yo quiero.

Ahi van los codigos, el CSS (lo siento, no tengo una URL):

Código:
#DivEncabezado {
	left: 0px;
	top: 0px;
	width: 100%;
	height: 200px;
	border: 1px solid #000000;
	/*background-color: #FFCC00;*/
	position: absolute;
	z-index: 2;
}

#DivMenuPagina {
	text-align: center;
	left: 0px;
	top: 0px;
	min-width: 100%;
	height: 50px;
	border: 1px solid #000000;
	/*background-color: #FF9900;*/
	position: absolute;
	z-index: 3;
}

.ListaHorizontal{
	list-style-type: none;
	position: relative;
	display: block;
	border: 1px solid;
	left: auto;
	right: auto;
	top: 0px;
	width: 100%;
	margin-top: 5px;
	margin-bottom: 5px;
	padding: 0;
}

.ListaHorizontal li{
	margin-left: 5%;
	margin-right: 5%;
	padding: 0;
	border: 1px solid;
	display: block;
	float: left;
	position: relative;
	width: 10%;
	text-align: center;
	vertical-align: bottom;
	font-weight: normal;
}
Y el HTML, la primera en DivEncabezado se ve correctamente, 100% de ancho y elementos LI centrados y equidistantes:
Código:
<ul class="ListaHorizontal">
    <li><a href="#">Noticias</a></li>
    <li><a href="#">Lista de Correo</a></li>
    <li><a href="acciones.htm#Ciber">Contacto</a></li>
    <li><a href="acciones.htm#Conv">Convocatorias</a></li>
  </ul>
Y la otra, dentro de DivMenuPagina, en FireFox aparece a la izquierda de la capa y no centrada, todos los LI aparecen juntos:
Código:
 <ul class="ListaHorizontal">
      <li><a href="album_ev.htm">Album 1</a></li>
      <li><a href="album_ob.htm">Album 2</a></li>
      <li><a href="album_hu.htm">Album 3</a></li>
    </ul>
¿Alguien ve la diferencia? ¿Por qué no me centra y estira la segunda lista!!!!???

Gracias