Miren lo que pasa al sacar un borde-bottom

Jamati · #1 (**permalink**) 12/05/2008, 08:53

Tengo el siguiente codigo arreglado muy gentilmente por Mikmoro, un conocedor en todo sentido.

Pero miren lo que pasa si comento la línea del borde bottom del <li> (obviamente en FF funciona perfecto, pero miren en IE6):

Código HTML:

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

Si a esta línea le saco los comentarios para que la valide:
/*div.menu ul li {border-bottom: 1px solid #FFFFFF;}*/
funciona perfecto, pero si no quiero que tenga borde, se me agranda todo, que pasa ?

Y otra pregunta: el último <li> tendra una imagen de 10 px de alto, pero como hago para que el IE tome solamente esa altura?, porque si le pongo height:10px en FF no hay drama, pero en IE como mínimo siempre me deja alrededor de 17 u 18px... y yo quiero que solamente tenga 10 px de alto, como hago ??

Muchas gracias a todos.

Raulmmmm · #2 (**permalink**) 12/05/2008, 12:11

Prueba cambiando la línea comentada por esta otra:

Código:

div.menu ul li { border-bottom: 0 solid #fff; margin: 0; padding: 0; }

Jamati · #3 (**permalink**) 12/05/2008, 12:43

Gracias Raulmmmm.
No tuve exito, sigo en la misma. No entiendo porque al querer sacar el borde-bottom de <li> se agranda todo en el IE6.

alguna otra idea ?

y el ultimo punto sabes como se hace ?, hablo de tener en el li.inf una imagen de 10 px de alto, pero como hago para que el IE tome solamente esa altura?, porque si le pongo height:10px en FF no hay drama, pero en IE como mínimo siempre me deja alrededor de 17 u 18px... y yo quiero que solamente tenga 10 px de alto, como hago ??

Mikmoro · #4 (**permalink**) 12/05/2008, 15:35

Hola, Jamati.

A la primera cuestión, podrías no quitarle el borde y pintarlo del mismo color del fondo: div.menu ul li {border-bottom: 1px solid #D00;} Es un bug de IE6, que los li son problemáticos, y con un borde se reduce su tamaño.

A la segunda cuestión, podrías no dar altura al li.inf, sino hacer tu imagen de 10px y colocarla dentro: <li class="inf"><img src="tu_imagen.jpg" /></li>

Prueba por ahí, a ver qué tal.

Mikel.

Jamati · #5 (**permalink**) 13/05/2008, 15:02

Muchas gracias a todos. La primer cuestión la resolví... lo que hice fue poner como dijo Mikmoro: un borde del mismo color que el fondo.

La segunda cuestión, no lo resolví, lo que ha dicho Mikmoro aquí no funcionó y no estoy encontrando la forma... alguna otra sugerencia ?

Mikmoro · #6 (**permalink**) 13/05/2008, 15:36

Quizá no me expliqué bien: ponle esa imagen de 10px al li (dentro en html) y quítale los 10px de alto al li. Mira a ver si así te funciona, y si no es así, dí cómo la quieres poner, qué tamaño tiene la imagen, si habrá texto en el li, en html o en css como backgruond, etc., y buscamos solución.

Mikel.

Jamati · #7 (**permalink**) 13/05/2008, 17:04

Gracias por la inquietud, paso a detallar:

Probé como dijiste vos Mikmoro de ponerla dentro de codigo HTML, o sea me quedaba algo así:

li.inf {}

<li class="inf"><img src="tu_imagen.jpg" width:100 height:10 border:0></li>

Esto no me funcionó, ni en FF ni en IE.

-----------------------------------------------------------------

Probé casi lo mismo, salvo que le puse en el css algunos datos:

li.inf {height:10px;}

<li class="inf"><img src="tu_imagen.jpg" width:100 height:10 border:0></li>

esto solamente funcionó en FF, ya que en IE quedaba mas alto el li.inf

-----------------------------------------------------------------

Mi idea es hacerlo con CSS, o sea que quiero que la imagen que tendrá dentro el li.inf sea un background de li.inf... lo explico mejor con un ejemplo:

li.inf {height:10px;background:url(miiamgen.jpg);}

HTML:
<li class="inf"></li> solamente eso quiero tener en el codigo del HTML

Esto funciona solamente en FF, en IE aparece la imagen pero siempre el li.inf tiene mas altura, alrededor de 17px aprox. Entonces la única solución es ponerle: tambien:

li.inf {overflow:hidden;}

puede ser ??.... se me ocurrió esa sola solucion.

Mikmoro · #8 (**permalink**) 13/05/2008, 17:21

Vale, ahora está más claro. Pruébalo así:

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 #D00;}
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 {background: url(tumagen.jpg); font-size: 10px; color: #D00;line-height: 10px}
</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>

Mikel.

Jamati · #9 (**permalink**) 15/05/2008, 13:53

Hola Mikmoro, gracias nuevamente.

Tu respuesta puede ser valida, pero antes de probarla, supongamos que la imagen que deseo poner en el <li.inferior> sea de alto de unos 5 px solamente.

Ahora en este caso como sería ?

O sea, a lo que quiero llegar, es a saber como se hace para poner una imagen muy pequeña de alto en un <li> y que IE se adapte a dicho ancho, o poniendo:
li.inferior {height:5px;} por ejemplo

ya que siempre el IE no se achica a lo que le digas en un li.

Saludos y gracias nuevamente

Mikmoro · #10 (**permalink**) 15/05/2008, 15:21

Lo mejor es no poner alto al li, poner algo dentro y darle tamaño a ese "algo", que es la idea que he puesto. Como ves no es la imagen la que le da altura, sino el   que le he puesto dentro del li, con un font-size de 10px y un line-height de 10px. Si lo quieres de 5 basta con cambiar esos valores.

Para mi en general, y excepto determinadas circunstancias, es mejor no dar altura a los li, que en realidad no son más que contenedores, y darle el tamaño a su contenido.

Mikel.

Jamati · #11 (**permalink**) 16/05/2008, 12:50

OK, no darle altura a los <li> entendí perfecto.

Al final, lo dejé así:

Código HTML:

<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 #D00;}
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.inferior {background:url(localidadinf.gif); [COLOR="Red"]font:14px[/COLOR]; line-height:17px;}
[COLOR="Red"]div.menulocalidades ul li.inferior:after {content:".";visibility:hidden;}[/COLOR]
</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>

Tuve que sacar " " del <li class="inf"> porque tenía cientos de páginas y solamente tenía <li class="inf"></li> , y modificar todas me volvía loco. Entonces se me ocurrió hacer lo siguiente y es algo muy interesante (te lo marqué con rojo).

En FF funciona bien, porque si bien no tiene altura, ya al haber un "." se pone la altura automatica. En IE no hace falta poner nada dentro, pero lo que no entiendo es porque si quiero un alto de 17 px se lo aplico a line-height:17px y si varío el font de 14 px se agranda o achica, si no hay ningun elemento de texto, me explico?? para que tome 17px tuve que poner un font de 14, porque ? ya que un font de 12 se achicaba el <li>.

Una vez que entienda porque pasa esto, conviene usarlo así como dije yo o igualmente me tendré que hacer el esfuerzo de poner el " " en todos los <li class="inf"> e implementarlo como tu has dicho??

Saludos y gracias.

PD: puede ser que alguna explicacion que te di no sea realmente así, pero es lo que yo creo que sucede, cualquier cosa me puedes corregir y de paso aprendo cada día un poco mas.

Jamati · #12 (**permalink**) 18/05/2008, 12:39

jajaaj me parece que pregunte algo mas complicado o rebuscado, no ?

Mikmoro · #13 (**permalink**) 18/05/2008, 15:00

Cita:

Iniciado por Jamati

jajaaj me parece que pregunte algo mas complicado o rebuscado, no ?

Ah, es que no lo había leido.

Son las rarezas de explorer, que yo hace tiempo que no intento entender; me basta con aprender las que pueda y saber adaptarme a ellas.

Recuerda una cosa que te dije desde el primer mensaje: en el momento que pongas un DOCTYPE (que deberías), todo te va a cambiar, así que yo lo iría pensando.

Mikel.