Height en Internet explorer me va a matar algún día...

rhp07 · #1 (**permalink**) 29/12/2010, 08:30

Hola compañeros. Tengo un problema con el que vivo desde meses y no tengo manera de corregirlo. Ya me he pasado numerosos días buscando una solución al problema. Personalmente odio al Internet Explorer y por mi que lo dejaría como incompatible, pero dados los numerosos navegadores basados en el motor de internet explorer me veo obligado a hacerlo funcionar.. el problema es el siguiente.. aquí teneis el codigo:

CSS:

Código:

 
body {
	overflow: hidden;
	margin-left: 0px;
	margin-right: 0px;
	margin-top: 0px;
	margin-bottom: 0px;
	height: 100%;
	width: 100%;
 }
 
 html{
  height: 100%;
  width: 100%;
}

 #bottom {
	height: 50px;
	position: absolute;
	bottom: 0px;
	left: 0px;
	right: 0px;
	overflow: hidden;
	background-repeat: repeat-x;
}

 #top {
	height: 100px;
	position: absolute;
	top: 0px;
	left: 0px;
	right: 0px;
	overflow: hidden;
	background-repeat: repeat-x;
}

#bodypg {
/* HEIGHT AUTO FUNCIONA EN FIREFOX, PERO EN IE ES = 0px */
	height: auto;
/* HEIGHT AUTO FUNCIONA EN FIREFOX, PERO EN IE ES = 0px */
	width: 100%;
	top: 125px;
	bottom: 0px;
	position: absolute;
	overflow: auto;
	display: block;
}

#headermenu {
	background-color: #CCCCCC;
	height: 25px;
	overflow: hidden;
	position: absolute;
	left: 0px;
	right: 0px;
	text-align: left;
	top: 100px;
}
#bodypg p {
}
#bodypg #adleft {
	-moz-border-radius-topright: 10px;
	-moz-border-radius-bottomright: 10px;
	-webkit-border-top-right-radius: 10px;
	-webkit-border-bottom-right-radius: 10px;
	float: none;
	background-color: rgba(100, 100, 100, 0.1);
	height: 300px;
	width: 150px;
	position: absolute;
	left: 0px;
	top: 0px;
}

#bodypg #absolutebody {
	height: auto;
	position: absolute;
	left: 155px;
	right: 0px;
	display: block;
}

HTML:

Código HTML:

<head>
	<link rel="stylesheet" type="text/css" href="estilo.css">
</head>

<body>

	<div class="top" id="top"><a href=index.php><img src="logo.png"/></a></div>

	<div class="headermenu" id="headermenu"><MARQUEE>WELCOME A MI PAGINA PERSONAL</MARQUEE></div>

	<div class="bodypg" id="bodypg">

		<div class="adleft" id="adleft">
			<img src=media/flecha.png> <a href=index.php>INICIO</a><br><br>
		</div>
		
		<!-- CONTENIDO DE LA PÁGINA (LA QUE TRAE PROBLEMAS) -->
		<div class="absolutebody" id="absolutebody">
			<div align=center>Contenido de la página.. bla bla bla bla bla...
			<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
			Contenido de la página.. bla bla bla bla bla...
			</div>
		</div>
	</div>
	
</body>

El problema está en el estilo CSS.. llevo días modificandolo para que funcione lo mejor posible con internet explorer.. pero ya no sé como seguir adelante.. solo me queda un comando con el que se decide si funciona bien o no.. En firefox.. la parte de "bodypg" de muestra como una página (Como un iframe, pero sin páginas externas) que empieza a 125px desde arriba y llega hasta abajo de la página.. que muestra un scrollbar cuando se desborda... en firefox funciona de forma impecable, sin embargo en internet explorer la parte "bodypg" desaparece.. o simplemente se muestra como si "height" fuera "0px". El problema está en que no puedo poner "height=100%" por que no resta los 125px del 100% lo que hace que "bodypg" se desborde de la página en general y el scrol se esconde por debajo de la página.

Como puedo hacer que "bodypg" se muestre correctamente en Internet Explorer?? (El problema está en que no consigo adaptarlo al IE)

Un saludo.

GAST0N · #2 (**permalink**) 29/12/2010, 08:36

no le des estilo a la etiqueta HTML , crea un contenedor, un padre para todos los div que tenes

GAST0N · #3 (**permalink**) 29/12/2010, 08:38

porque hay tantos  

?

rhp07 · #4 (**permalink**) 29/12/2010, 08:44

Ya he intentado hacer lo del contenedor padre.. pero sigo teniendo el mismo problema con el height.. a lo mejor lo hago mal.. alguien me puede dar algun ejemplo que funcione con mi pagina?

y lo de los ... es para simular contenido.. para ver si el scrollbar funciona...

Un saludo.

P.D: Lo del BODY y HTML lo he hecho por que en IE se muestra un espacio a la izquierda y a la derecha (en firefox por defecto NO).

GAST0N · #5 (**permalink**) 29/12/2010, 09:24

Cita:

Iniciado por rhp07

Ya he intentado hacer lo del contenedor padre.. pero sigo teniendo el mismo problema con el height.. a lo mejor lo hago mal.. alguien me puede dar algun ejemplo que funcione con mi pagina?

y lo de los ... es para simular contenido.. para ver si el scrollbar funciona...

Un saludo.

P.D: Lo del BODY y HTML lo he hecho por que en IE se muestra un espacio a la izquierda y a la derecha (en firefox por defecto NO).

incluiste el DOCTYPE en el HTML ??

rhp07 · #6 (**permalink**) 30/12/2010, 06:18

:O
Eso era.. nunca hubiera pensado que ésto influyera tanto el comportamiento de las páginas..
Creía ke servía para los buscadores para identificar el tipo de contenido..
Se aprende toda la vida.. muchas gracias Gaston, ha funcionado 100%