Foros del Web - Propiedad display

Foros del Web (http://www.forosdelweb.com/)

- CSS (http://www.forosdelweb.com/f53/)

- - Propiedad display (http://www.forosdelweb.com/f53/propiedad-display-583970/)

Propiedad display

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>

Re: Propiedad display

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.

Re: Propiedad display

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

Re: Propiedad display

Ya sabía que me ibas a hacer estas preguntas :-D

Cita: