Ver Mensaje Individual
  #1 (permalink)  
Antiguo 19/08/2011, 12:46
laexpo
 
Fecha de Ingreso: mayo-2011
Mensajes: 22
Antigüedad: 9 años, 6 meses
Puntos: 1
Problema para centrar una imagen en tabla con IE7

Hola a todos!

Tengo un problema bastante molesto para centrar una imagen con max-width dentro de una tabla cuando lo veo en IE7. Como la imagen viene desde la base de datos, no sé su proporción ni tamaño, por ende es necesario que se ajuste a su contenedor (que debe tener 200px x 200px) con la propiedad anteriormente citada. Cuando la imagen es de proporción vertical el max-height funciona perfectamente en todos los navegadores, pero cuando es horizontal y actúa max-width, IE7 corre la imagen a la derecha. Les paso códigos y una imagen de lo que sucede.

Espero alguien me pueda ayudar a detectar y resolver el error.

HTML
Código HTML:
<div class="thumbnail">
  <table width="200px" height="200px" border="0" cellspacing="0" cellpadding="0">
    <tr>
      <td style="vertical-align:middle; text-align:center">
        <img class="mini_image" src="imgs/image-500-horizontal.jpg" />
      </td>
    </tr>
  </table>
</div> 
CSS
Código HTML:
.thumbnail {
	height: 200px;
	width: 200px;
	border: 2px solid #000000;
	margin-top: 50px;
	margin-left: 50px;
	float: left;
}
.thumbnail .mini_image {
	max-height:200px;
	max-width:200px;
	margin: 0px auto;
	width: expression(this.width > 200 ? 200: true);
	padding:0;
}
Ejemplo del error: