Foros del Web » Creando para Internet » Diseño web »

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

Estas en el tema de Problema curioso con lista en firefox por culpa del HTML(?) en el foro de Diseño web en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 10/07/2009, 05:21
Avatar de iDkInf  
Fecha de Ingreso: junio-2009
Mensajes: 52
Antigüedad: 8 años, 6 meses
Puntos: 0
Problema curioso con lista en firefox por culpa del HTML(?)

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(?)
  #2 (permalink)  
Antiguo 10/07/2009, 08:32
 
Fecha de Ingreso: abril-2003
Mensajes: 1.129
Antigüedad: 14 años, 8 meses
Puntos: 34
Respuesta: Problema curioso con lista en firefox por culpa del HTML(?)

Igual dejanos el CSS para saber por donde buscar...
__________________
elGastronomo
  #3 (permalink)  
Antiguo 10/07/2009, 08:46
Avatar de Ronin46  
Fecha de Ingreso: junio-2009
Mensajes: 398
Antigüedad: 8 años, 5 meses
Puntos: 8
Respuesta: Problema curioso con lista en firefox por culpa del HTML(?)

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?
  #4 (permalink)  
Antiguo 10/07/2009, 10:33
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: Problema curioso con lista en firefox por culpa del HTML(?)

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
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml" lang="es-es">
  3. <title>Kseso? jugando con css </title>
  4. <meta http-equiv="Content-Type" content="text/html;charset=iso-8859-1" />
  5. <style type="text/css">
  6. * {margin:0;padding:0; outline:none; border:0; position: relative;}
  7. #contenedor_superior, #contenedor_inferior {
  8.   width: 80%;
  9.   margin: 0 auto;
  10.   overflow: hidden;
  11.   margin-bottom: 1em;
  12. }
  13. #contenedor_superior ul {background: #960;}
  14. #contenedor_superior ul li {
  15.   list-style-type: none;
  16.   display: inline;  
  17.   border-right: 1px solid #000;
  18.   }
  19. #contenedor_superior ul li a {
  20.   background: #060;
  21.   color: #cdcdcd;
  22.   font-size: 1.5em;
  23.   padding:0.2em;
  24. }
  25. #contenedor_superior ul li a:hover {
  26.   color: #cff;
  27. }
  28.  
  29. #contenedor_inferior ul {background: #960;}
  30. #contenedor_inferior ul li {
  31.   list-style-type:none;
  32.   float:left;  
  33.   border-right: 1px solid #000
  34. }
  35. #contenedor_inferior ul li a {
  36.   background:#060;
  37.   color:#CDCDCD;
  38.   font-size:1.5em;
  39.   padding:0.2em;
  40.   display:block;
  41. }
  42. #contenedor_inferior ul li a:hover {color:#CCFFFF;}
  43. </head>
  44. <div id="contenedor_superior">
  45. <ul>
  46. <li><a href="#">Item uno</a></li>
  47. <li><a href="#">Item dos</a></li><li><a href="#">Item tres</a></li>
  48. <li><a href="#">Item cuatro</a></li>
  49. <li><a href="#">Item cinco</a></li>
  50. </ul>
  51. </div>
  52. <div id="contenedor_inferior">
  53. <ul>
  54. <li><a href="#">Item one</a></li>
  55. <li><a href="#">Item two</a></li><li><a href="#">Item three</a></li>
  56. <li><a href="#">Item four</a></li>
  57. <li><a href="#">Item five</a></li>
  58. </ul>
  59. </div>
  60. </body>
  61. </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
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++
  #5 (permalink)  
Antiguo 10/07/2009, 20:37
Avatar de Ronin46  
Fecha de Ingreso: junio-2009
Mensajes: 398
Antigüedad: 8 años, 5 meses
Puntos: 8
Respuesta: Problema curioso con lista en firefox por culpa del HTML(?)

Interesante, no tenía ni idea de esos conceptos.
  #6 (permalink)  
Antiguo 11/07/2009, 02:09
Avatar de iDkInf  
Fecha de Ingreso: junio-2009
Mensajes: 52
Antigüedad: 8 años, 6 meses
Puntos: 0
Respuesta: Problema curioso con lista en firefox por culpa del HTML(?)

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!!
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta

SíEste tema le ha gustado a 1 personas




La zona horaria es GMT -6. Ahora son las 19:37.