Propiedad display

Jamati · #1 (**permalink**) 07/05/2008, 12:36

Hola gente, tengo los siguientes problemas:

1) Estoy usando la propiedad display para los siguientes link, pero no me está tomando todo el ancho de la celda (en Explorer pasa esto), ya que si paso el mouse más a la derecha de donde está el texto, no me toma el link, en cambio en FF sí lo hace.

2) En IE también la fila que tiene la clase "inf" no me toma el alto determinado de 17 px que le puse en el estilo, y las demas filas, en vez de tener 17 px, tienen mas y no se porque (yo sé que dado el borde deberían tener quizas 18px, pero llegan a tener mas.... como hago para que tanto la ultima como las demas tengan: 17px ??

Por ejemplo, si escribo un link dentro del <li> me toma menos alto la fila que si no adjunto nada.

Este es mi codigo:

Código HTML:

<html>
<head>
<style type="text/css">
div.menu {width:50%;background:#DD0000;}
div.menu ul {margin:0;padding:0;}
div.menu ul li {height:15px;list-style:none;border-bottom:1px solid #FFFFFF;}
div.menu ul li a {font:10px Arial,Helvetica,sans-serif;color:#FFFFFF;display:block;text-decoration:none;}
div.menu ul li a:hover {background:#000000;}
div.menu ul li.inf {}
</style>
</head>
<body>
<div class="menu">
  <ul>
    <li><a href="#">Primera fila</a></li>
    <li><a href="#">Segunda fila</a></li>
    <li></li>
    <li><a href="#">Cuarta fila</a></li>
    <li class="inf"></li>
  </ul>
</div>
</body>
</html>

Mikmoro · #2 (**permalink**) 07/05/2008, 15:41

Esta es una manera de conseguir algo muy parecido en FF e IE6:

Cita:

<html>
<head>
<style type="text/css">
div.menu {width:50%;background:#DD0000;}
div.menu ul {margin:0; padding:0; list-style:none}
div.menu ul li {border-bottom: 1px solid #FFFFFF;}
div.menu ul>li {height: 18px;}
div.menu ul li a {font: 10px Arial,Helvetica,sans-serif; color:#FFFFFF; display:block; text-decoration:none; position: relative; line-height: 18px; vertical-align: middle;}
div.menu ul li a:hover {background:#000000;}
div.menu ul li.inf {}
</style>
</head>
<body>
<div class="menu">
<ul>
<li><a href="#">Primera fila</a></li>
<li><a href="#">Segunda fila</a></li>
<li></li>
<li><a href="#">Cuarta fila</a></li>
<li class="inf"></li>
</ul>
</div>
</body>
</html>

No obstante, al no usar ningún doctype los problemas generlamente se multiplican, porque IE6 entra en el modo básico (no recuerdo cómo se llama), que acarrea mayores problemas.

Mikel.

Jamati · #3 (**permalink**) 07/05/2008, 21:18

Gracias como siempre, pero respecto a tu posteo, te hago las siguentes preguntas:

1) div.menu ul>li:
es aceptado por IE6? cualquier navegador acepta esta propiedad ?

2) porque ponés position: relative al elemento div.menu ul li a ??

3) line-height: 18px:
esto que quiere decir ?... porque para el alto yo conocía solamente height:18px

4) vertical-align:
esta propiedad no se aplica solamente a los elementos <table> ??

5) cual es el line-height minimo que puedo poner para que disminuya el alto de un <li> ?? ... pregunto porque si le pongo 1px no creo que tenga de alto solamente 1px.

Bueno, muchas gracias nuevamente

Saludos

Mikmoro · #4 (**permalink**) 08/05/2008, 16:02

Ya sabía que me ibas a hacer estas preguntas

Cita:

Iniciado por Jamati

1) div.menu ul>li:
es aceptado por IE6? cualquier navegador acepta esta propiedad ?

No, justamente no es aceptado por IE6, y por eso lo uso para dar una propiedad al resto de navegadores y que IE6 no la entienda.

Cita:

Iniciado por Jamati

2) porque ponés position: relative al elemento div.menu ul li a ??

A menudo IE6 necesita una posición relativa para ganar la forma que otros navegadores ya dan sin esa posición. En tu caso, para que el enlace ocupe todo el ancho del div y no sólo la palabra, como te ocurría.

Cita:

Iniciado por Jamati

3) line-height: 18px:
esto que quiere decir ?... porque para el alto yo conocía solamente height:18px

Es el alto de línea. Se le aplica a un elemento de texto y con él puedes controlar la altura de la línea del texto y que no sólo dependa del tamaño de la fuente.

Cita:

Iniciado por Jamati

4) vertical-align:
esta propiedad no se aplica solamente a los elementos <table> ??

No, el IE6 aplica es propiedad también a elementos de bloque; el resto de navegadores no.

Cita:

Iniciado por Jamati

5) cual es el line-height minimo que puedo poner para que disminuya el alto de un <li> ?? ... pregunto porque si le pongo 1px no creo que tenga de alto solamente 1px.

Pruébalo y verás que Firefox hará que el texto tenga 1px de alto. IE6 ni se entera.

Recuerda lo que te he dicho del doctype, que al usar uno u otro las cosas cambian mucho. Acostúmbrate a ponerlo por defecto. Por ejemplo este, que es algo más permisivo que el estricto:

<!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>
<meta content="text/html; charset=ISO-8859-1"
http-equiv="content-type" />

Mikel.

Jamati · #5 (**permalink**) 09/05/2008, 14:02

Buenisima explicación Mikel, muchas gracias, funcionó perfecto.

Te hago una consulta mas: si yo tengo:

<li class="imagen"><img scr="xxxxxx.gif"<li>

donde supuestamente la imágen es de 10px, si hago:

li.imagen {height:10px} en FF me achica bien el <li> , pero IE es como mínimamente acepta disminuir hasta 17 u 18 px, puede ser ??

como hago para que el IE también me achique el li con el alto que yo le diga en la clase??

Bueno, muchas gracias de antemano y muy cordial en responder siempre este tipo de dudas.

Saludos a todos