problema con lista y div

asmodeo1 · #1 (**permalink**) 05/06/2008, 01:20

Quiero tener un div con una lista dentro y para ello tengo el siguiente código:

<style type="text/css" media="screen">
#uno { margin:0;padding:0;background-color:#99CC99;border:0; }
#uno ul {
margin: 0;
padding: 0;
}
#uno li {
display: inline;
padding: 0 20px 0 0;
margin: 0;
margin-right:1em;
background-color:#0033CC;
}
</style>
</head>
<body>
<div id="uno"><ul><li>hjhj</li><li>yuyuiu</li></ul></div>

El problema es que en Firefox, pero no en IE, me deja una pequeña separación superior e inferior entre la lista y el borde del div (como un padding). He puesto, como se puede ver, los márgenes y padding a cero de todos los elementos pero aún así no consigo quitar esa pequeña separación. ¿Alguna idea?

opzina · #2 (**permalink**) 05/06/2008, 02:45

margin y padding no van con px???, ahi veo q tenes un padding de 20px??....

asmodeo1 · #3 (**permalink**) 05/06/2008, 03:41

Cita:

Iniciado por opzina

margin y padding no van con px???, ahi veo q tenes un padding de 20px??....

No entiendo lo que me quieres decir, pero el 20px se refiere al margen derecho entre los li con lo que ese no es el problema. Si te refieres a que los ceros no llevan px, cuando son cero no hace falta poner ninguna medida (px, em, pt,...)

asmodeo1 · #4 (**permalink**) 05/06/2008, 04:11

Pongo una imagen para que se vea mejor el problema:

El color más verde inferior no es parte de la página

Mikmoro · #5 (**permalink**) 05/06/2008, 07:09

Quizá se trate del doctype que usas. Este código no deja ningún margen en FF:

Cita:

<!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>asmodeo</title>
<style type="text/css" media="screen">
#uno { margin:0;padding:0;background-color:#99CC99;border:0; }
#uno ul {
margin: 0;
padding: 0;
}
#uno li {
display: inline;
padding: 0 20px 0 0;
margin: 0;
margin-right:1em;
background-color:#0033CC;
}
</style>
</head>
<body>
<div id="uno"><ul><li>hjhj</li><li>yuyuiu</li></ul></div>
</body>
</html>

Mikel.

asmodeo1 · #6 (**permalink**) 05/06/2008, 07:54

Cita:

Iniciado por Mikmoro

Quizá se trate del doctype que usas. Este código no deja ningún margen en FF:

Mikel.

Gracias pero ¿seguro que no te lo deja? No se ve mucho pero si haces unos cuantos zooms se ve. Lo digo por que el DOCTYPE es el mismo (incluso he copiado todo lo que has puesto tal cual y sigue ese borde). También me pasa con Safari

Mikmoro · #7 (**permalink**) 05/06/2008, 08:26

Cierto, tienes razón. Era tan pequeño que no lo veía. Haciendo zoom x 40 lo he visto. Se debe tratar de algún error que no conocía con el display inline, porque curiosamente si te fijas, cuando vas haciendo el zoom, el margen va cambiando alternativamente de arriba a abajo.

Muy extraño, y merecerá que investigue a ver qué encuentro. Si localizo algo te lo digo.

No obstante, creo que nunca me he encontrado este problema porque nunca he hecho una lista de esta manera, es decir, o coloreo el ul o lo que haya dentro de los li (que suelen ser enlaces), pero nunca de esta manera. Si necesitas hacerlo exactamente así a la fuerza dilo, porque soluciones hay.

Mikel.

josdelaranda · #8 (**permalink**) 05/06/2008, 09:43

Hola,

Me parece que el problema es por el display inline, mejor prueba dándole float: left a los li que quieres que se desplieguen en linea y al div contenedor aplicale un clearfix para que no se pierda el background.

Saludos

Mikmoro · #9 (**permalink**) 05/06/2008, 16:50

Acabo de averiguar por qué no lo había visto antes: no ocurre con todos los tipo de letra. Por ejemplo, si pones:

font-family: Verdana;

verás que el espacio desaparece. Por ejemplo he visto que ocurre con la arial, pero no con la courier, y así unas cuantas más.

Mikel.

asmodeo1 · #10 (**permalink**) 06/06/2008, 05:33

Gracias a ambos. Con lo del float:left ya está y curioso lo que pasa según el tipo de letra