Imágenes descolocadas en IE7

Senku · #1 (**permalink**) 11/04/2009, 03:58

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 :)

jomaruro · #2 (**permalink**) 11/04/2009, 09:25

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.

Senku · #3 (**permalink**) 11/04/2009, 12:47

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

Gracias de nuevo jomaruro!

jomaruro · #4 (**permalink**) 11/04/2009, 13:03

Cita:

Iniciado por Senku

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.

Senku · #5 (**permalink**) 11/04/2009, 13:55

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 :)