Foros del Web » Creando para Internet » CSS »

Imágenes descolocadas en IE7

Estas en el tema de Imágenes descolocadas en IE7 en el foro de CSS en Foros del Web. Hola: Típico problema "En Firefox bien, en IE7 mal". La página tiene un título que es una imagen centrada y cuatro imágenes centradas y alineadas ...
  #1 (permalink)  
Antiguo 11/04/2009, 04:58
 
Fecha de Ingreso: abril-2009
Mensajes: 18
Antigüedad: 8 años, 8 meses
Puntos: 0
Imágenes descolocadas en IE7

Hola:

Típico problema "En Firefox bien, en IE7 mal". La página tiene un título que es una imagen centrada y cuatro imágenes centradas y alineadas horizontalmente (todavía pendiente de solucionar espaciado en pantallas panorámicas, pero eso está en otro tema de este Foro...). Todo esto se ve bien en ambos exploradores. Lo que sigue son dos botones, un poco más abajo, que enlazarían a dos versiones distintas de la web en dos idiomas distintos. Junto a estos botones hay un par de banderitas a cada lado. Bien, pues es el conjunto de estos botones y banderitas lo que se ve mal en IE7. Es curioso porque el botón y las dos banderitas de la izquierda están un poco más abajo que los de la derecha, pero en cualquier caso todo se monta un poco por encima de las cuatro imágenes de más arriba, que sí están bien posicionadas. Seguro que es alguna historia con algún float o yo que sé... Os dejo el código HTML y CSS:

HTML:
Código:
<body>
<div class="center"><img src="images/titel/haupttitel_text.gif" 
alt="blablabla" width="825" height="150" /></div>
<div id="hauptbilder">
<div class="bildbox"><img src="images/a01.jpg" alt="a" width="250" height="250" /></div>
<div class="bildbox"><img src="images/a03.jpg" alt="a" width="250" height="250" /></div>
<div class="bildbox"><img src="images/a04.jpg" alt="a" width="250" height="250" /></div>
<div class="bildbox"><img src="images/a02.jpg" alt="a" width="250" height="250" /></div>
</div>
<div id="sprachelinks">
<img class="flagge" src="images/flaggen/flagge_at.gif" alt="Flagge AT" width="32" height="32" />
<a href="deutsch/start.htm" titel="Deutsch"><img src="images/buttons/button_eingang.gif" alt="Eingang" width="144" height="44" /></a>
<img class="flagge" src="images/flaggen/flagge_de.gif" alt="Flagge DE" width="32" height="32" />
</div>
<div id="spracherecht">
<img class="flagge" src="images/flaggen/flagge_uk.gif" alt="Flag UK" width="32" height="32" />
<a href="english/start.htm" titel="English"><img src="images/buttons/button_entry.gif" alt="Entry" width="144" height="44" /></a>
<img class="flagge" src="images/flaggen/flagge_us.gif" alt="Flag US" width="32" height="32" />
</div>
</body>
CSS:
Código:
html { 
padding:0px;
margin:0px;
width: 100%;
height:100%;
}
body {
background-image: url("../images/hg_braun1.jpg");
background-repeat: repeat; 
background-color: #401300; 
margin: 0;
}
.center {
text-align:center; 
padding: 0.5% 0 0 0;
}
#hauptbilder {
margin: 0 auto;
width: 64em;
height: 15.63em;
}
.bildbox {
float: right;
margin: 0 auto;
padding: 5.5% 0 0 0.5%;
}
#sprachelinks {
float: left;
margin: 0 auto;
padding: 2em 0 0 15em;
}
#spracherecht {
float: right;
margin: 0 auto;
padding: 2em 15em 0 0;
}
.flagge {
margin: 0 auto;
padding: 0 0 2% 0;
}
a img {
border:0;
}
A ver si me podéis ayudar. Muchas gracias :)
  #2 (permalink)  
Antiguo 11/04/2009, 10:25
Avatar de jomaruro
Colaborador
 
Fecha de Ingreso: junio-2002
Ubicación: Naboo
Mensajes: 5.442
Antigüedad: 15 años, 5 meses
Puntos: 361
Respuesta: Imágenes descolocadas en IE7

Hola:

El problema de que las banderas te monten por encima de las imágenes superiores es que las imágenes superiores desbordan su contenedor, la forma de solucionarlo es ampliando el tamaño del contenedor o variando el padding de las imágenes.

Cuando tengas un problema de este tipo, yo por lo menos lo hago, pon (momentaneamente) un border a cada div (de distinto color), aunque esos bordes te descoloca toda la página te puede servir para saber que pasa con cada uno de los div (No se si me he explicado bien).

Saludos.

  #3 (permalink)  
Antiguo 11/04/2009, 13:47
 
Fecha de Ingreso: abril-2009
Mensajes: 18
Antigüedad: 8 años, 8 meses
Puntos: 0
Respuesta: Imágenes descolocadas en IE7

Ah estupendo, voy a probar y a ver qué animaladas he estado haciendo.

Gracias de nuevo jomaruro!
  #4 (permalink)  
Antiguo 11/04/2009, 14:03
Avatar de jomaruro
Colaborador
 
Fecha de Ingreso: junio-2002
Ubicación: Naboo
Mensajes: 5.442
Antigüedad: 15 años, 5 meses
Puntos: 361
Respuesta: Imágenes descolocadas en IE7

Cita:
Iniciado por Senku Ver Mensaje
Ah estupendo, voy a probar y a ver qué animaladas he estado haciendo.
La culpa la tiene la maquetación que nunca hace lo que nosotros queremos

Saludos.

  #5 (permalink)  
Antiguo 11/04/2009, 14:55
 
Fecha de Ingreso: abril-2009
Mensajes: 18
Antigüedad: 8 años, 8 meses
Puntos: 0
Respuesta: Imágenes descolocadas en IE7

Pues espérate que esta es muy buena.

Resulta que pongo los bordes a las diferentes capas y, sí, la capa de las 4 imágenes tenía que ser un poco más alta, pero eso no solucionaba el problema en el IE, que por alguna razón seguía mostrando las banderas y el botón de "English" más altas -y a diferentes alturas entre sí, que todavía tiene más tela- que las de "Deutsch"... y eso que todo está con las mismas medidas!

"Esto no puede ser, esto no puede ser..." Típico pensamiento cuando encuentras algo que no va en IE, claro. Así que me pude a buscar, en als "4 líneas de código que hay" -como quien dice-, qué cosa "distinta" hay que pueda provocar que dos cosas con las mismas propiedades se vean a distintas alturas. Y en esto que me fijo en esto:

Código:
.flagge {
margin: 0 auto;
padding: 0 0 2% 0;
}
El porcentaje... vale, todo está con em y eso es un %, pero leches, las 4 banderitas tienen lo mismo y las de la izquierda se ven bien, qué pasa con las de la derecha? Pues nada, cambio 2% por 0.2 em y se ve todo perfecto... O.o Lo peor es que cambiando la propiedad de las banderas, el botón "English" que acompaña a las de la derecha se arregla también...

Cómo puede ser eso?! Estas cosas solo pasan con "El explorador de las Bermudas" xD

En fin, solucionado, ahora se ve todo igual en ambos exploradores :)
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 12:02.