Foros del Web » Creando para Internet » CSS »

no puedo quitar margin o padding de <li>

Estas en el tema de no puedo quitar margin o padding de <li> en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 28/11/2008, 07:05
 
Fecha de Ingreso: diciembre-2005
Ubicación: Barcelona
Mensajes: 1.428
Antigüedad: 12 años
Puntos: 15
no puedo quitar margin o padding de <li>

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
  #2 (permalink)  
Antiguo 28/11/2008, 07:34
Avatar de willyfc  
Fecha de Ingreso: octubre-2008
Ubicación: Santa Cruz - Bolivia
Mensajes: 662
Antigüedad: 9 años, 2 meses
Puntos: 40
Respuesta: no puedo quitar margin o padding de <li>

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
  #3 (permalink)  
Antiguo 28/11/2008, 07:56
 
Fecha de Ingreso: diciembre-2005
Ubicación: Barcelona
Mensajes: 1.428
Antigüedad: 12 años
Puntos: 15
Respuesta: no puedo quitar margin o padding de <li>

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>
  #4 (permalink)  
Antiguo 28/11/2008, 07:59
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: no puedo quitar margin o padding de <li>

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?
__________________
Visita mi nueva web idplus.org
  #5 (permalink)  
Antiguo 28/11/2008, 08:42
 
Fecha de Ingreso: diciembre-2005
Ubicación: Barcelona
Mensajes: 1.428
Antigüedad: 12 años
Puntos: 15
Respuesta: no puedo quitar margin o padding de <li>

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)
  #6 (permalink)  
Antiguo 28/11/2008, 10:41
 
Fecha de Ingreso: diciembre-2005
Ubicación: Barcelona
Mensajes: 1.428
Antigüedad: 12 años
Puntos: 15
Respuesta: no puedo quitar margin o padding de <li>

quise decir "una página que funciona con el código que dejé más arriba"
  #7 (permalink)  
Antiguo 28/11/2008, 10:58
 
Fecha de Ingreso: septiembre-2008
Ubicación: En algun sitio del CyberSpacio
Mensajes: 150
Antigüedad: 9 años, 2 meses
Puntos: 2
Respuesta: no puedo quitar margin o padding de <li>

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
}
__________________
Visita la mejor web: http://infoadictos.net
  #8 (permalink)  
Antiguo 28/11/2008, 11:33
 
Fecha de Ingreso: diciembre-2005
Ubicación: Barcelona
Mensajes: 1.428
Antigüedad: 12 años
Puntos: 15
Respuesta: no puedo quitar margin o padding de <li>

no, no funciona
  #9 (permalink)  
Antiguo 28/11/2008, 11:49
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: no puedo quitar margin o padding de <li>

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")
__________________
Visita mi nueva web idplus.org
  #10 (permalink)  
Antiguo 01/12/2008, 05:24
 
Fecha de Ingreso: diciembre-2005
Ubicación: Barcelona
Mensajes: 1.428
Antigüedad: 12 años
Puntos: 15
Respuesta: no puedo quitar margin o padding de <li>

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

Última edición por chefnelone; 01/12/2008 a las 05:30
  #11 (permalink)  
Antiguo 01/12/2008, 06:00
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: no puedo quitar margin o padding de <li>

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>
__________________
Visita mi nueva web idplus.org
  #12 (permalink)  
Antiguo 01/12/2008, 09:42
 
Fecha de Ingreso: diciembre-2005
Ubicación: Barcelona
Mensajes: 1.428
Antigüedad: 12 años
Puntos: 15
Respuesta: no puedo quitar margin o padding de <li>

Perfecto.
gracias mikmoro.
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




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