Foros del Web » Creando para Internet » CSS »

Miren lo que pasa al sacar un borde-bottom

Estas en el tema de Miren lo que pasa al sacar un borde-bottom en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 12/05/2008, 09:53
 
Fecha de Ingreso: febrero-2008
Mensajes: 578
Antigüedad: 9 años, 9 meses
Puntos: 3
Miren lo que pasa al sacar un borde-bottom

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.
  #2 (permalink)  
Antiguo 12/05/2008, 13:11
Avatar de Raulmmmm  
Fecha de Ingreso: marzo-2007
Ubicación: En otro lugar que tú
Mensajes: 1.549
Antigüedad: 10 años, 8 meses
Puntos: 36
Re: Miren lo que pasa al sacar un borde-bottom

Prueba cambiando la línea comentada por esta otra:
Código:
div.menu ul li { border-bottom: 0 solid #fff; margin: 0; padding: 0; }
  #3 (permalink)  
Antiguo 12/05/2008, 13:43
 
Fecha de Ingreso: febrero-2008
Mensajes: 578
Antigüedad: 9 años, 9 meses
Puntos: 3
Re: Miren lo que pasa al sacar un borde-bottom

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 ??
  #4 (permalink)  
Antiguo 12/05/2008, 16:35
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: Miren lo que pasa al sacar un borde-bottom

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.
  #5 (permalink)  
Antiguo 13/05/2008, 16:02
 
Fecha de Ingreso: febrero-2008
Mensajes: 578
Antigüedad: 9 años, 9 meses
Puntos: 3
Re: Miren lo que pasa al sacar un borde-bottom

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 ?
  #6 (permalink)  
Antiguo 13/05/2008, 16:36
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: Miren lo que pasa al sacar un borde-bottom

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.
  #7 (permalink)  
Antiguo 13/05/2008, 18:04
 
Fecha de Ingreso: febrero-2008
Mensajes: 578
Antigüedad: 9 años, 9 meses
Puntos: 3
Re: Miren lo que pasa al sacar un borde-bottom

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.
  #8 (permalink)  
Antiguo 13/05/2008, 18:21
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: Miren lo que pasa al sacar un borde-bottom

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">&nbsp;</li>
</ul>
</div>
</body>
</html>
Mikel.
  #9 (permalink)  
Antiguo 15/05/2008, 14:53
 
Fecha de Ingreso: febrero-2008
Mensajes: 578
Antigüedad: 9 años, 9 meses
Puntos: 3
Re: Miren lo que pasa al sacar un borde-bottom

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
  #10 (permalink)  
Antiguo 15/05/2008, 16:21
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: Miren lo que pasa al sacar un borde-bottom

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 &nbsp; 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.
  #11 (permalink)  
Antiguo 16/05/2008, 13:50
 
Fecha de Ingreso: febrero-2008
Mensajes: 578
Antigüedad: 9 años, 9 meses
Puntos: 3
Respuesta: Miren lo que pasa al sacar un borde-bottom

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 "&nbsp;" 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 "&nbsp;" 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.
  #12 (permalink)  
Antiguo 18/05/2008, 13:39
 
Fecha de Ingreso: febrero-2008
Mensajes: 578
Antigüedad: 9 años, 9 meses
Puntos: 3
Respuesta: Miren lo que pasa al sacar un borde-bottom

jajaaj me parece que pregunte algo mas complicado o rebuscado, no ?
  #13 (permalink)  
Antiguo 18/05/2008, 16:00
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
Respuesta: Miren lo que pasa al sacar un borde-bottom

Cita:
Iniciado por Jamati Ver Mensaje
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.
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 08:29.