no puedo quitar margin o padding de <li>

chefnelone · #1 (**permalink**) 28/11/2008, 07:05

Hola
me estoy volviendo loco para quitar los espacios que aparece entre estos <li> (solo en IE6)

se puede ver en esta imagen:

el css es este:

Código:

#footer ul li {
list-style-image:none;
list-style-position:outside;
list-style-type:none;
margin:0px;
}
#footer ul li a {
background-color:#ffffff;
border-bottom:1px solid #222;
color:#000000;
display:block;
padding:3px 6px;
text-decoration:none;
font-family: Verdana;
font-size: 11px;
font-style: normal;
font-weight: normal;
letter-spacing: 1px;
margin:0px;
}

y el html este:

Código HTML:

<div id="footer"
<ul style="width:280px;">
<li><a href="#">Conozca nuestra empresa</a></li>
<li><a href="#">Servicios integrales</a></li>
<li><a href="#">Nuestros trabajos</a></li>
</ul>
</div>

gracias saludos

willyfc · #2 (**permalink**) 28/11/2008, 07:34

lo que tienes que utilizar es line-height

por ejemplo:

Código:

#footer ul li {
list-style-image:none;
list-style-position:outside;
list-style-type:none;
margin:0px;
padding:0;
line-height: 15px
}

la medida del line-height la acomodas según necesites.

Espero te sirva.....creditos Mikmoro

chefnelone · #3 (**permalink**) 28/11/2008, 07:56

lo he probado pero no funciona, lo que me dices cambia el alto del <li>(lo que está en color blanco) pero no quita el espacio negro entre los <li>

Mikmoro · #4 (**permalink**) 28/11/2008, 07:59

Poin el resto de tu hoja de estilo, porque con lo que has puesto no se reproduce el error. Esto se suele solucionar con un borde en los "li".

De todas maneras, ¿tienes un doctype puesto en tu página?

chefnelone · #5 (**permalink**) 28/11/2008, 08:42

este es una pagina que contiene el codigo que dejé arriba:
http://www.diegorosenbergtherapy.com/este.php

(el espaciado entre los <li> solo se ve en IE6)

chefnelone · #6 (**permalink**) 28/11/2008, 10:41

quise decir "una página que funciona con el código que dejé más arriba"

shurshok · #7 (**permalink**) 28/11/2008, 10:58

creo que deberias agregar este hack de css:

_line-height: 0px

y recuerda no sacar nada, ponlo como ultimo valor de #footer ul li, ocea asi:

#footer ul li {
list-style-image:none;
list-style-position:outside;
list-style-type:none;
margin:0px;
padding:0;
line-height: 15px
_line-height: 0px
}

chefnelone · #8 (**permalink**) 28/11/2008, 11:33

no, no funciona

Mikmoro · #9 (**permalink**) 28/11/2008, 11:49

Como te decía, este error de IE6 se suele solucionar poniendo algún tipo de borde a los "li":

Cita:

#footer ul li {
list-style-image:none;
list-style-position:outside;
list-style-type:none;
margin:0px;
border-bottom:1px solid #222;
}
#footer ul li a {
background-color:#ffffff;
color:#000000;
display:block;
padding:3px 6px;
text-decoration:none;
font-family: Verdana;
font-size: 11px;
font-style: normal;
font-weight: normal;
letter-spacing: 1px;
margin:0px;
}
#footer ul li a:hover {
background-color:#6C1605;
color:white;
}

Prueba así.
(Sólo cambio el borde de los "a" a los "li")

chefnelone · #10 (**permalink**) 01/12/2008, 05:24

Funciona!
gracias!! mikmoro, no te había entendido lo que me decías.

Aprovecho que está el ejemplo. No se si verán que el hover funciona perfecto en firefox, pero en IE6 el hover funciona solo si pasamos el puntero sobre el texto (o sea sobre el elemento <a>).

O sea el efecto hover en firefox funciona cuando el puntero entra en el color blanco ( lo que estaría bien) pero en IE6 solo funciona cuando el puntero está sobre el texto.

Hay algun hack para hacerlo funcionar bien en EI6???

Saludos

Mikmoro · #11 (**permalink**) 01/12/2008, 06:00

Mira, sin hacks, esta la forma de que te quede igual en ambos navegadores:

Cita:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="es-es">
<head>
<title>Espacio li</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
#footer {background-color:#000;
padding:50px;
}
#footer ul {width:280px;
list-style-type:none;
margin: 0;
padding: 0;
}
#footer ul li {line-height: 18px;}
#footer ul li a {border-bottom:1px solid #222;
background-color:#ffffff;
color:#000000;
display:block;
padding:3px 6px;
text-decoration:none;
font-family: Verdana;
font-size: 11px;
width: 100%;
}
#footer ul li a:hover {
background-color:#6C1605;
color:white;
}
</style>
</head>
<body>
<h2>(el espaciado entre los --li-- que necesito quitar solo se ve en IE6)</h2>
<div id="footer">
<ul>
<li><a href="#">Conozca nuestra empresa</a></li>
<li><a href="#">Servicios integrales</a></li>
<li><a href="#">Nuestros trabajos</a></li>
</ul>
</div>
</body>
</html>

chefnelone · #12 (**permalink**) 01/12/2008, 09:42

Perfecto.
gracias mikmoro.
saludos