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.