Problema curioso con lista en firefox por culpa del HTML(?)

iDkInf · #1 (**permalink**) 10/07/2009, 04:21

Buenas, tengo un error en mi codigo HTML no se si es por el editor (utilizo eclipse y tambien lo he probado con notepad++) pero si pongo los <li> separados en firefox le mete un margin-left de 9px si pongo los <li> junto se ve perfecto.

Os he hecho una imagen que ilustra perfectamente lo que sucede.

Código HTML:

http : // usuarios.lycos.es/keldrox/script/html/problema-lista.gif

No pongo el codigo CSS por que estoy 100% seguro que no es por eso. Si a lo largo del post lo necesitais lo pongo sin problemas.

Saludos y espero que entendais mi problema tan curioso(?)

American2010 · #2 (**permalink**) 10/07/2009, 07:32

Igual dejanos el CSS para saber por donde buscar...

Ronin46 · #3 (**permalink**) 10/07/2009, 07:46

Ostras, que raro, me imagino que el código CSS será el mismo en ambos casos.

¿No se supone que el html no tiene en cuenta los espacios en blanco ni los saltos de linea?

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

Ronin46 · #5 (**permalink**) 10/07/2009, 19:37

Interesante, no tenía ni idea de esos conceptos.

iDkInf · #6 (**permalink**) 11/07/2009, 01:09

Hola de nuevo, kseso? gracias por el post efectivamente es eso que comentas, muy bien redactado y con referencias. Tambien me ha resultado muy interesante el articulo "Modelo de formato visual".

Saludos!!