Foros del Web » Creando para Internet » CSS »

Problema con altura de DIV header en IE 8

Estas en el tema de Problema con altura de DIV header en IE 8 en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 23/12/2010, 06:26
 
Fecha de Ingreso: marzo-2008
Mensajes: 4
Antigüedad: 9 años, 8 meses
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;
}
  #2 (permalink)  
Antiguo 23/12/2010, 06:33
Avatar de loncho_rojas
Colaborador
 
Fecha de Ingreso: octubre-2008
Ubicación: En el mejor lugar del mundo
Mensajes: 2.704
Antigüedad: 9 años, 1 mes
Puntos: 175
Respuesta: Problema con altura de DIV header en IE 8

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
__________________
Ayudo con lo que puedo en el foro, y solo en el foro.. NO MENSAJES PRIVADOS.. NO EMAILS NI SKYPE u OTROS.

Antes de hacer un TOPICO piensa si puedes hallarlo en Google o en el Buscador del Foro...
  #3 (permalink)  
Antiguo 23/12/2010, 08:40
 
Fecha de Ingreso: marzo-2008
Mensajes: 4
Antigüedad: 9 años, 8 meses
Puntos: 1
Respuesta: Problema con altura de DIV header en IE 8

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!!
  #4 (permalink)  
Antiguo 23/12/2010, 10:28
 
Fecha de Ingreso: marzo-2008
Mensajes: 4
Antigüedad: 9 años, 8 meses
Puntos: 1
Respuesta: Problema con altura de DIV header en IE 8

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!

Etiquetas: altura, header
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 04:45.