Altura de <li> diferente para FF y IE

Jamati · #1 (**permalink**) 10/04/2008, 21:53

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>

Mikmoro · #2 (**permalink**) 11/04/2008, 01:41

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.

Jamati · #3 (**permalink**) 11/04/2008, 05:54

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.

hades87 · #4 (**permalink**) 11/04/2008, 05:56

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á.