Foros del Web » Creando para Internet » CSS »

IE7 agrega espacio alrededor de las imágenes

Estas en el tema de IE7 agrega espacio alrededor de las imágenes en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 02/03/2007, 15:04
Avatar de K3NNY
Colaborador
 
Fecha de Ingreso: marzo-2004
Ubicación: ARGENTINA!
Mensajes: 1.493
Antigüedad: 13 años, 9 meses
Puntos: 20
IE7 agrega espacio alrededor de las imágenes

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?
__________________
delFuego.com.ar
mi tumblelog sobre diseño

La dedicación en mi respuesta es directamente proporcional a la dedicación en tu pregunta.
  #2 (permalink)  
Antiguo 02/03/2007, 15:47
Avatar de AlZuwaga
Colaborador
 
Fecha de Ingreso: febrero-2001
Ubicación: 34.517 S, 58.500 O
Mensajes: 14.550
Antigüedad: 16 años, 9 meses
Puntos: 535
Re: IE7 agrega espacio alrededor de las imágenes

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 ;)
__________________
...___...
  #3 (permalink)  
Antiguo 02/03/2007, 16:06
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: IE7 agrega espacio alrededor de las imágenes

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.
  #4 (permalink)  
Antiguo 02/03/2007, 17:12
Avatar de K3NNY
Colaborador
 
Fecha de Ingreso: marzo-2004
Ubicación: ARGENTINA!
Mensajes: 1.493
Antigüedad: 13 años, 9 meses
Puntos: 20
Re: IE7 agrega espacio alrededor de las imágenes

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.
__________________
delFuego.com.ar
mi tumblelog sobre diseño

La dedicación en mi respuesta es directamente proporcional a la dedicación en tu pregunta.

Última edición por K3NNY; 02/03/2007 a las 17:19
  #5 (permalink)  
Antiguo 02/03/2007, 17:57
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: IE7 agrega espacio alrededor de las imágenes

¿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.
  #6 (permalink)  
Antiguo 02/03/2007, 19:22
Avatar de K3NNY
Colaborador
 
Fecha de Ingreso: marzo-2004
Ubicación: ARGENTINA!
Mensajes: 1.493
Antigüedad: 13 años, 9 meses
Puntos: 20
Re: IE7 agrega espacio alrededor de las imágenes

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.
__________________
delFuego.com.ar
mi tumblelog sobre diseño

La dedicación en mi respuesta es directamente proporcional a la dedicación en tu pregunta.
  #7 (permalink)  
Antiguo 03/03/2007, 09:44
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: IE7 agrega espacio alrededor de las imágenes

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:
<!--[if IE]> <style>#test1 li {margin-bottom: -4px;}</style><![endif]-->
(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.
  #8 (permalink)  
Antiguo 03/03/2007, 09:49
Avatar de K3NNY
Colaborador
 
Fecha de Ingreso: marzo-2004
Ubicación: ARGENTINA!
Mensajes: 1.493
Antigüedad: 13 años, 9 meses
Puntos: 20
Re: IE7 agrega espacio alrededor de las imágenes

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 ;)
__________________
delFuego.com.ar
mi tumblelog sobre diseño

La dedicación en mi respuesta es directamente proporcional a la dedicación en tu pregunta.
  #9 (permalink)  
Antiguo 03/03/2007, 10:14
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: IE7 agrega espacio alrededor de las imágenes

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.
  #10 (permalink)  
Antiguo 03/03/2007, 13:05
Avatar de AlZuwaga
Colaborador
 
Fecha de Ingreso: febrero-2001
Ubicación: 34.517 S, 58.500 O
Mensajes: 14.550
Antigüedad: 16 años, 9 meses
Puntos: 535
Re: IE7 agrega espacio alrededor de las imágenes

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.
__________________
...___...
  #11 (permalink)  
Antiguo 07/05/2008, 14:17
 
Fecha de Ingreso: mayo-2008
Mensajes: 1
Antigüedad: 9 años, 7 meses
Puntos: 0
Re: IE7 agrega espacio alrededor de las imágenes

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
  #12 (permalink)  
Antiguo 07/05/2008, 15:16
Avatar de JavierB
Colaborador
 
Fecha de Ingreso: febrero-2002
Ubicación: Madrid
Mensajes: 25.052
Antigüedad: 15 años, 9 meses
Puntos: 771
Re: IE7 agrega espacio alrededor de las imágenes

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

Saludos,
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.
Tema Cerrado




La zona horaria es GMT -6. Ahora son las 08:32.