IE7 ¿ Rompe la Web? . Problema con Zoom y Capas position Relative.

obeiix · #1 (**permalink**) 22/12/2007, 09:47

Buenas:
-- ACTUALIZO --
Después de buscar y buscar por google... Veo que el problema de como "rompe la web" IE7 con su <ironia>Maravilloso</ironia> Zoom, ya lo ha tenido más de uno, pero la verdad no encuentro la solución.

Este código tan simple, como una capa contenedora y 2 capas dentro con position relative. SI haceis ctrl+ruedaraton(girarla) vereís como descuadra las imagenes incluso llega a montarse una sobre otra.

PORFAVOR alguien tiene alguna idea de como evitarlo?? he probado a establecer max heigh y max width, display inline-block... Y nada de nada.
Ejemplo :

Código:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Sin título 1</title>
</head>

<body>

<div style=" left: 10px; top: 15px; margin:0 auto 0 auto; height: 491px;" id="capa1">
<div style="position: relative; width: 100px; height: 100px; z-index: 1; display: inline-block; left: 0px; top: 0px; max-height: inherit; max-width: inherit;" id="capa2">
<img alt="dddd" src="igriferia.jpg" width="201" height="246" /></div>
<div style="position: relative; width: 100px; height: 100px; z-index: 2; left: 360px;  zoom:100%; max-height:100px; max-width:100px;  : -8px; display: inline-block; " id="capa3">
<img alt="" src="icentro1.jpg" width="201" height="195" /></div>
</div>

</body>

</html>

-- FIN ACTUALIZO --

Tengo una página montada con una capa contenedora que se centra en pantalla y luego todas las demás en relative. Indicando el Top left, etc.

Se ve todo correcto en ie, safari, ff (incluso en ff linux jeje) pero aún tengo un problema BIEN gordo que resolver:

Cuando se pulsa la tecla control más la rueda del ratón (que sirve para agrandar o encoger el texto) en internet explorer se desmonta la página :S. En FireFox no pasa, sólo aumenta el texto.

Creo que tiene que ver en como trata ie el relative

Las capas estan definidas casi todas así:
<div style="position: relative; width: 201px; height: 294px; max-height: 294px; z-index: 600; left: 770px; top: -1000px;" id="ofertas">

Muchas gracias!!