Foros del Web » Creando para Internet » CSS »

Problema al cambio de zoom en IE

Estas en el tema de Problema al cambio de zoom en IE en el foro de CSS en Foros del Web. Buenas, Bueno verán, estoy intentando diseñar una web de videos... y el problema que me surje es con el cambio de zoom en IE (8). ...
  #1 (permalink)  
Antiguo 27/08/2010, 08:12
Avatar de OsSk4R  
Fecha de Ingreso: octubre-2006
Ubicación: $this->home
Mensajes: 824
Antigüedad: 11 años, 1 mes
Puntos: 74
Problema al cambio de zoom en IE

Buenas,

Bueno verán, estoy intentando diseñar una web de videos... y el problema que me surje es con el cambio de zoom en IE (8).

Tengo esto:




Esta captura es de Firefox. En Chrome e IE8 se ve exactamente igual. Lo que sucede, como comente arriba es que si agrando el zoom en IE8 el div duración se va hacía la derecha.

Aquí la imagen:



Sin emargo, no siempre es así. O sea, si por ejemplo agrando el zoom a 150% se ve mal, pero si lo agrando a 200% se ve bien, si lo agrando a 205% se ve mal...

Aqui os dejo el código CSS y el pequeño html:

Código CSS:
Ver original
  1. #contenedor {width:50em; height:auto; border:1px solid #ff0000; margin-left:13.5%; margin-top:6em; z-index:0;}
  2. .resultados {height:10em; border:1px solid #1dff00; background-color:#f6f6f9; margin:0.2em;}
  3. .resultados .titulo {margin-left:9.8em; margin-top:0.2em; width:30em; border:1px solid #1dfddd; font-size:1em; font-weight:bold; color:#f705cc;}
  4. .resultados .votos {float:right; width:auto; border:1px solid #1d1d1d; margin-top:-1.4em}
  5. .resultados .img_video {width:9.5em; float:left; padding:0.2em; border:1px solid #1d1d1d;}
  6. .resultados .descripcion {margin-left:10.9em; margin-top:0.2em; width:30em; height:6em; font-size:0.9em; color:#2d2d2d; border:1px solid #1d1d1d;}
  7. .resultados .duracion {margin-left:0.2em; margin-top:1em; width:9.5em; border:1px solid #fdac84;}
  8. .resultados .tags {margin-top:-1.4em; margin-left:10em;border:1px solid #ff0000;}
  9. .resultados .comentarios {margin-top:-1.4em; float:right; border:1px solid #0c68ff;}
Código HTML:
Ver original
  1. <div id="contenedor">
  2.     <div class="resultados">
  3.         <div class="img_video"><img src="img/video.png"></div>
  4.         <div class="titulo">Un titulo bla bla bla bla bla bla...</div>
  5.         <div class="votos"><img src="img/votos.png"><img src="img/votos.png"><img src="img/votos.png"><img src="img/votos.png"><img src="img/votos.png"></div>
  6.         <div class="descripcion">Una descripcion bla bla bla bla bla bla bla</div>
  7.         <div class="duracion">Duracion: 10:00</div>
  8.         <div class="tags">
  9.         <img src="img/tags.png">&nbsp;f1,deportes,coches,ferrari,alonso
  10.         </div>
  11.         <div class="comentarios">Comentarios(0)</div>
  12.     </div>
  13.     <div class="resultados">
  14.         <div class="img_video"><img src="img/video.png"></div>
  15.         <div class="titulo">Un titulo bla bla bla bla bla bla...</div>
  16.         <div class="votos"><img src="img/votos.png"><img src="img/votos.png"><img src="img/votos.png"><img src="img/votos.png"><img src="img/votos.png"></div>
  17.         <div class="descripcion">Una descripcion bla bla bla bla bla bla bla</div>
  18.         <div class="duracion">Duracion: 10:00</div>
  19.         <div class="tags">
  20.         <img src="img/tags.png">&nbsp;f1,deportes,coches,ferrari,alonso
  21.         </div>
  22.         <div class="comentarios">Comentarios(0)</div>
  23.     </div>
  24.        
  25.        
  26.     </div> <!-- Fin de contenedor -->

Deduzco que quizá sea por la manera en que lo tengo estrucutrado... Así que atiendo consejos al respecto y/o si me ponen la manera correcta... encantado.

Muchas gracias,

PD: Para evitar problema con la resoluciones leí acerca de utilizar medidas relativas como em o %. Por tanto, es correcto el uso (en todo) de em? (Estaba mal acostumbrado a usar para todo px)
  #2 (permalink)  
Antiguo 27/08/2010, 15:45
Avatar de maycolalvarez
Colaborador
 
Fecha de Ingreso: julio-2008
Ubicación: Caracas
Mensajes: 12.120
Antigüedad: 9 años, 4 meses
Puntos: 1530
Respuesta: Problema al cambio de zoom en IE

por ahora no existe forma de controlar la característica zoom de cualquier navegador, pero creo que el problema se debe a que usas %, IE tiene un molesto bug al respecto que ocurre cuando redimencionas la ventana, entonces las capas porcentuales no ajustan debidamente y quedan unas debajo de otras, molesto, lo sé, pero la solución es simple y creo que te puede funcionar.

la solución es quitar décimas a una de las capas, por ejemplo supongamos que tengo 2 columnas, una de 20% y otra de 80%, a una le quito 0.1%, quedando: 19.99% y 80%, visualmente es imperceptible pero en IE funciona de maravilla, inténtalo, si no funciona a la primera, quitale 0.1 más: 19.98% y 80%, prueba y postea los resultados

PD: este truco lo ví en la plantilla global de joomla XD
  #3 (permalink)  
Antiguo 28/08/2010, 08:59
Avatar de OsSk4R  
Fecha de Ingreso: octubre-2006
Ubicación: $this->home
Mensajes: 824
Antigüedad: 11 años, 1 mes
Puntos: 74
Respuesta: Problema al cambio de zoom en IE

Muchas gracias :) te he etendido pero... no uso %. Uso em. Entonces, ¿lo cambio a %?, ¿o aplico lo que me has comentado a los em?

Saludos y gracias

Etiquetas: zoom, cambios
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 19:40.