Hola gente, después de largo rato intentando montones de cosas, decidí recurrir a este espacio para hacer un intento por resolver mi inconveniente.
El sitio web es este: www.acapilla.com.ar/angelazul
Yo utilizo como "header" un div incluido dentro del "container", con altura y ancho fijos, y la imagen a utilizar definida como background. Dentro de este "header" reside el div "menuBar", que encierra una serie de tags "<a>" que hacen de botones para el menú. Por lo que pude descubrir, aunque desconozco las razones, la presencia de un div interno en el div #header es lo que dispara este efecto indeseado en IE8, ya que cuando elimino ese div interno el #header se muestra adecuadamente.
Cabe destacar que tanto Firefox como Chrome e IE 7 renderizan perfectamente este código.
Les dejo con los respectivos códigos fuente de esa sección.
HTML:
Código HTML:
<div id="container">
<div id="header">
<div id="menuBar">
<a href="como-llegar-angelazul.html" target="_self">Cómo llegar?</a>
<a href="fotos-exteriores.html" target="_self">Fotos Exteriores</a>
<a href="fotos-interiores.html" target="_self">Fotos Interiores</a>
<a href="fotos-panoramicas.html" target="_self">Fotos Panorámicas</a>
<a href="vista-satelital.html" target="_self">Vista Satelital</a>
</div>
</div>
CSS:
Código:
.oneColFixCtrHdr #container {
width: 780px; /* el uso de 20px menos que un ancho completo de 800px da cabida a los bordes del navegador y evita la aparición de una barra de desplazamiento horizontal */
margin: 0 auto 10px auto; /* los márgenes automáticos (conjuntamente con un ancho) centran la página */
border: 1px solid #000000;
text-align: left; /* esto anula text-align: center en el elemento body. */
-webkit-border-top-left-radius: 12px;
-webkit-border-top-right-radius: 12px;
-moz-border-radius-topleft: 12px;
-moz-border-radius-topright: 12px;
border-top-left-radius: 12px;
border-top-right-radius: 12px;
}
.oneColFixCtrHdr #container #header {
background: url(../imgs/header/header.jpg);
padding: 0;
margin: 0;
width: 780px;
height: auto;
-webkit-border-top-left-radius: 10px;
-webkit-border-top-right-radius: 10px;
-moz-border-radius-topleft: 10px;
-moz-border-radius-topright: 10px;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
}
.oneColFixCtrHdr #container #header #menuBar a {
display: inline-block;
line-height: 35px;
padding: 0 10px;
float: left;
}
.oneColFixCtrHdr #container #header #menuBar a:link, .oneColFixCtrHdr #container #header #menuBar a:visited {
text-decoration: none;
font-family: "Palatino Linotype", Georgia, "Times New Roman", Times, serif;
font-weight:normal;
font-size: 0.8em;
color: #A4A4A4;
}
.oneColFixCtrHdr #container #header #menuBar a:hover {
color: #595959;
}
.oneColFixCtrHdr #container #header #menuBar a:active {
color: #dbdbdb;
}