IE7 agrega espacio alrededor de las imágenes

K3NNY · #1 (**permalink**) 02/03/2007, 15:04

IE7 me agrega espacio abajo de unas imágenes que quiero queden una pegada a la otra, y no encontré forma de solucionarlo.

Para entender mejor a lo que me refiero, por favor vean esto...

http://delfuego.com.ar/test/test.html

...¿ven como el "li" de la segunda lista en IE7 tiene un espacio abajo de las imágenes? Solo ocurre con imágenes, con texto no pasa nada.

Ocurre lo mismo con unas simples imágenes flotadas, el IE7 les agrega espacio alrededor que no debería existir.

¿Alguna idea de como evitarlo?

AlZuwaga · #2 (**permalink**) 02/03/2007, 15:47

Pues la verdad que no sé, pero también se ve así en IE6.
Con un...

Código:

#test1 li{
	margin-bottom: -4px
}

... metido dentro de un comentario condicional para iE se soluciona. No sé si buscarás una manera más elegante o standard.. es lo único que se me ocurre ;)

Mikmoro · #3 (**permalink**) 02/03/2007, 16:06

Hola, K3NNY.

Prueba a ver si te sirve este código:

Código:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
  <title>Prueba</title>
  <style>
body, ul, li, img { border: medium none ;
margin: 0pt;
padding: 0pt;
}
ul li { background-color: rgb(255, 204, 153);
height: 19px;
overflow: hidden;
}
ul#test2 li { margin-bottom: 10px;
}
#test img { float: left;
}
  </style>
</head>
<body>
<h1>&iexcl;IE Sucks!</h1>
<h2>Lista de imagenes</h2>
<ul id="test1">
  <li><img src="menu_01.png" alt=""></li>
  <li><img src="menu_02.png" alt=""></li>
  <li><img src="menu_03.png" alt=""></li>
</ul>
<h2>Lista de imagenes con un margen inferior de 10px en cada "li"</h2>
<ul id="test2">
  <li><img src="menu_01.png" alt=""></li>
  <li><img src="menu_02.png" alt=""></li>
  <li><img src="menu_03.png" alt=""></li>
</ul>
<h2>Lista de palabras</h2>
<ul>
  <li>Lorem</li>
  <li>Ipsum</li>
  <li>Dolor</li>
  <li>Sit Amet</li>
</ul>
<h2>Imagenes flotadas hacia la izquierda</h2>
<div id="test">
<img src="menu_01.png" alt="" hspace="0"><img
 src="menu_02.png" alt="" hspace="0"><img
 src="menu_03.png" alt="" hspace="0"></div>
</body>
</html>

Mikel.

K3NNY · #4 (**permalink**) 02/03/2007, 17:12

Mil disculpas, el ejemplo fue demasiado "simplificado". Con el código que me pasaste mikel funciona bastante bien, pero si meto las imagenes dentro de un link y a ese link le aplico un "display: block" deja de funcionar.

Ahí actualicé el ejemplo.

Alguna idea alguien?

[EDIT]

Si, definitivamente el problema es con el "display: block" + IE.

Mikmoro · #5 (**permalink**) 02/03/2007, 17:57

¿Y para qué necesitas ese display: block? No creo que aporte nada.

Por otro lado, has vuelto a cambiar el height de los "li" del 19px que te he puesto a 18px que tenías antes. Seguramente habrás pensado que era un error, pero no es así; como puedes ver con explorer, si dejas el 18 te dibuja una fina línea entre los botones, mientras que con 19px desaparece.

ul li { background-color: rgb(255, 204, 153);
height: 19px;
overflow: hidden;
}

Con esta clase y sin display block yo lo veo perfectamente. Si tienes algún otro impedimento o tiene que ser 18px por narices, yo cambiaría de estrategia.

Mikel.

K3NNY · #6 (**permalink**) 02/03/2007, 19:22

Si, lo del 19 pensé que era un error, ahora lo corrijo.

Lo del display:block tiene que ir si o si, porque si no lo pongo solamente la imagen es "clickeable", en cambio con display:block todo el ancho del "li" (del "a" en realidad" se vuelve clickeable.

Mikmoro · #7 (**permalink**) 03/03/2007, 09:44

Ah, no imaginaba que querías que todo el ancho fuera un vínculo.

Entonces para mi quedan dos opciones (que se me ocurran):

1.- Usar un comentario condicional para el maldito:

(como ya apuntaba "Al Zuwaga").

2.- Cambiar radicalmente de estrategia y usar los botones como imágenes de fondo:

Código:

.boton1, .boton2, .boton3 {background-repeat: no-repeat;
height: 18px;
}
.boton1 {background-image: url(menu_01.png);
}
.boton2 {background-image: url(menu_02.png);
}
.boton3 {background-image: url(menu_03.png);
}
  </style>
</head>
<body>
<h1>&iexcl;IE Sucks!</h1>
<h2>Lista de imagenes</h2>
<ul id="test1">
  <li><a href="#" class="boton1"></a></li>
  <li><a href="#" class="boton2"></a></li>
  <li><a href="#" class="boton3"></a></li>
</ul>

Mikel.

K3NNY · #8 (**permalink**) 03/03/2007, 09:49

Argh, quería evitar a toda costa los "hacks" o "cc" pero no parece haber alternativa. Supongo que "cc" será, entonces.

Muchas gracias Al Zuwaga y Mikmoro por contestar ;)

Mikmoro · #9 (**permalink**) 03/03/2007, 10:14

Con la segunda solución no usas ni hack's ni cc's. Igual no te gusta por alguna otra cosa, pero para mi simplifica bastante el asunto.

Mikel.

AlZuwaga · #10 (**permalink**) 03/03/2007, 13:05

Es cierto y me olvidé de comentarlo en el mensaje anterior. Usá las imágenes de fondo y meté el texto dentro de los enlaces. A mi me parece lo más adecuado.

danielita_o · #11 (**permalink**) 07/05/2008, 13:17

que tal si pruebas con algo menos drástico

?

#idContenedor img{
vertical-align:bottom;
}

a mi me funciona con eso..pruébalo y me dices.
Saludos

JavierB · #12 (**permalink**) 07/05/2008, 14:16

El mensaje original es de hace más de 1 año. Por favor, no reviváis temas tan antiguos.

Saludos,