Problema con altura de DIV header en IE 8

davidg90 · #1 (**permalink**) 23/12/2010, 06:26

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;
}

loncho_rojas · #2 (**permalink**) 23/12/2010, 06:33

bueno, he probado tu codigo y aparece esto
.oneColFixCtrHdr
que no se de donde sale..

Lo mas probable es que IE no este reconociendo tus HACKS que usas Ej:

-webkit-border-top-left-radius: 10px;
-webkit-border-top-right-radius: 10px;
-moz-border-radius-topleft: 10px;
-moz-border-radius-topright: 10px;

Donde el FF y el CHR si lo hacen.. creo que es eso

davidg90 · #3 (**permalink**) 23/12/2010, 08:40

Hola loncho! Esa clase que me marcás es la que se aplica a la etiqueta <body>, pero funciona únicamente con fines identificatorios para el selector, no aplica ninguna propiedad directamente. Pasé de incluirla en el código porque se extendería demasiado innecesariamente, pero acá va por las dudas el código CSS aplicado a la etiqueta body:

body {
font: 100% Verdana, Arial, Helvetica, sans-serif;
margin: 0; /* es recomendable ajustar a cero el margen y el relleno del elemento body para lograr la compatibilidad con la configuración predeterminada de los diversos navegadores */
padding: 0;
color: #000000;
background: url(../imgs/backBody.jpg);
background-color: #4646FF;
background-position: top;
background-repeat: repeat-x;
}

Respecto a los hacks, probé desactivandolos totalmente y el problema persiste. Alguna otra idea?

Un abrazo!!

davidg90 · #4 (**permalink**) 23/12/2010, 10:28

PROBLEMA SOLUCIONADO!

El conflicto lo estaba generando un div anterior a ese, ubicado fuera del #container. Lo único que tuve que hacer fue incluirlo dentro de él y se arregló el efecto no deseado.

Gracias de todas maneras por la predisposición. Pueden cerrar este tema si así lo quieren. Al que tenga un problema similar, páseme un PM y le comento la situación.

Slds!