Ver Mensaje Individual
  #1 (permalink)  
Antiguo 23/12/2010, 06:26
davidg90
 
Fecha de Ingreso: marzo-2008
Mensajes: 4
Antigüedad: 16 años
Puntos: 1
Exclamación Problema con altura de DIV header en IE 8

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