Foros del Web » Creando para Internet » CSS »

Altura de <li> diferente para FF y IE

Estas en el tema de Altura de <li> diferente para FF y IE en el foro de CSS en Foros del Web. Hola, el siguiente codigo, muestra diferente las alturas del <li> en los ambos navegadores... mientras que en FF parece como que el texto se sale ...
  #1 (permalink)  
Antiguo 10/04/2008, 22:53
 
Fecha de Ingreso: febrero-2008
Mensajes: 578
Antigüedad: 9 años, 9 meses
Puntos: 3
Altura de <li> diferente para FF y IE

Hola, el siguiente codigo, muestra diferente las alturas del <li> en los ambos navegadores... mientras que en FF parece como que el texto se sale de la celda, en Explorer no se me achica a 13px como puse en el estilo.

O sea en ambos me aparece mal, alguien sabe por que ??

Código HTML:
<html>
<head>
<title></title>
<style type="text/css">
ul {margin:0;padding:0;} 
li {list-style:none;}

div {width:600px;border:1px solid #CC0000;position:absolute;}
div ul {width:250px;border:1px solid #4286B9;position:relative;float:left;}
div ul li {height:13px;border-bottom:1px solid #E5E5E5;}
div ul span {font:10px Arial,Helvetica,sans-serif;color:#000000;}
</style>
</head>
<body>
<div>
  <ul>
    <li><span>TEXTO VERTICALMENTE INFERIOR</span></li>
    <li><span>TEXTO VERTICALMENTE INFERIOR</span></li>
    <li><span>TEXTO VERTICALMENTE INFERIOR</span></li>
   </ul>
  <ul>
    <li><span>TEXTO VERTICALMENTE INFERIOR</span></li>
    <li><span>TEXTO VERTICALMENTE INFERIOR</span></li>
    <li><span>TEXTO VERTICALMENTE INFERIOR</span></li>
   </ul>
</div>
</body>
</html> 
  #2 (permalink)  
Antiguo 11/04/2008, 02:41
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
Re: Altura de <li> diferente para FF y IE

Creo que deberás intentar jugar con el line-height (altura de línea) más que con el height, ya que el texto tiene una altura mínima predefinida:

div ul li {border-bottom:1px solid #E5E5E5;line-height: 15px;}

Mikel.
  #3 (permalink)  
Antiguo 11/04/2008, 06:54
 
Fecha de Ingreso: febrero-2008
Mensajes: 578
Antigüedad: 9 años, 9 meses
Puntos: 3
Re: Altura de <li> diferente para FF y IE

Quien sino vos Mikel.

Muchas gracias, funcionó perfecto. Estuve buscando en internet este atributo pero no encontré mucha información al respecto. Cual sería la explicación concreta ??

Saludos y gracias Mikel.
  #4 (permalink)  
Antiguo 11/04/2008, 06:56
Avatar de hades87  
Fecha de Ingreso: diciembre-2007
Ubicación: Barcelona - España
Mensajes: 3.194
Antigüedad: 10 años
Puntos: 68
Re: Altura de <li> diferente para FF y IE

line-height es la diferencia entre una linea y la siguiente de un párrafo o dos lineas que esta, en el caso la distancia entre las lineas de la lista. Si le das mas valor el tamaño entre estas aumentará.
__________________
No diseñes usando tablas.
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 12:30.