Foros del Web - Ver Mensaje Individual - Problema curioso con lista en firefox por culpa del HTML(?)

kseso? · #4 (**permalink**) 10/07/2009, 09:33

Pero eso no pasa sólo en ff, también en ie7, safari 4, opera 9.64, chrome 2 y en ietester emulando al 6.
Creo que se debe a la propiedad que hayas dado a los <li> para colocarlos uno al lado del otro.
Si lo haces con display:inline, la separación aparece, pero si utilizas float (que sería la apropiada) esa separación desaparece.
La respuesta posiblemente se encuentre en las llamadas "cajas anónimas". De hecho, si aplicas un margen negativo a 'li', anulas la dirección. Pero tampoco lo he seguido demasiado.

Puedes ver la diferencia según qué propiedades se utilicen en el siguiente código:

Código html:

Ver original<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="es-es">
<head>
<title>Kseso? jugando con css </title>
<meta http-equiv="Content-Type" content="text/html;charset=iso-8859-1" />
<style type="text/css">
* {margin:0;padding:0; outline:none; border:0; position: relative;}
#contenedor_superior, #contenedor_inferior {
  width: 80%;
  margin: 0 auto;
  overflow: hidden;
  margin-bottom: 1em;
}
#contenedor_superior ul {background: #960;}
#contenedor_superior ul li {
  list-style-type: none;
  display: inline;  
  border-right: 1px solid #000;
  }
#contenedor_superior ul li a {
  background: #060;
  color: #cdcdcd;
  font-size: 1.5em;
  padding:0.2em;
}
#contenedor_superior ul li a:hover {
  color: #cff;
}
 
#contenedor_inferior ul {background: #960;}
#contenedor_inferior ul li {
  list-style-type:none;
  float:left;  
  border-right: 1px solid #000
}
#contenedor_inferior ul li a {
  background:#060;
  color:#CDCDCD;
  font-size:1.5em;
  padding:0.2em;
  display:block;
}
#contenedor_inferior ul li a:hover {color:#CCFFFF;}
</style>
</head>
<body>
<div id="contenedor_superior">
<ul>
<li><a href="#">Item uno</a></li>
<li><a href="#">Item dos</a></li><li><a href="#">Item tres</a></li>
<li><a href="#">Item cuatro</a></li>
<li><a href="#">Item cinco</a></li>
</ul>
</div>
<div id="contenedor_inferior">
<ul>
<li><a href="#">Item one</a></li>
<li><a href="#">Item two</a></li><li><a href="#">Item three</a></li>
<li><a href="#">Item four</a></li>
<li><a href="#">Item five</a></li>
</ul>
</div>
</body>
</html>

Como verás, la diferencia está en la propiedad utilizada para colocar los <li> de forma adyacente entre sí. Si en los enlaces de '#contenedor_superior' aplicas 'display:block' verás lo que ocurre.

Un saludo