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