Estaba creando un simple layout con CSS y pues todo parecia perfecto, tenia mi pie de pagina estatico al final de la pagina y el contenido encajaba perfecto debajo de la cabecera y en caso de que sea mas grande que la pantalla entonces con las barras de desplazamiento bajabas, pero el pie de pagina siempre se mantiene en su lugar.
Quise probar la pagina en IE y fue una sorpresa no grata porque NO funciona! primero porque no me salen las barras de desplazamiento, segundo porque el contenido de la pagina, cuando es mas grande que la pantalla, se "escode" detras del pie de pagina y aun mas importante, el pie de pagina no se va al final de la pagina.
Alguien me podria ayudar con esto? Por que es que funciona en FF pero no en IE?
A continuacion pongo el codigo de la pagina:
Código HTML:
<!-- Quirk on --> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>Sticky Footer</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <style type="text/css"> body { margin:0 0 25px 0; padding:0; } div, p { margin:0; padding:0; } #header { width:100%; height:25px; background-color: #CCC; text-align:center; } #pageContent { width:100%; } #footer { position: fixed; bottom:0px; left:0px; width:100%; height:25px; background-color: #CCC; text-align:center; } </style> <!--[if IE]> <style type="text/css" media="screen"> body { overflow-y: hidden; } #pageContainer { height:100%; } </style> <![endif]--> </head> <body> <!-- start main --> <div id="pageContainer"> <div id="header"> This is where the header goes </div> <div id="pageContent"> <p>Groovy page content goes here</p> <p>Groovy page content goes here</p> <p>Groovy page content goes here</p> <p>Groovy page content goes here</p> <p>Groovy page content goes here</p> <p>Groovy page content goes here</p> <p>Groovy page content goes here</p> <p>Groovy page content goes here</p> <p>Groovy page content goes here</p> <p>Groovy page content goes here</p> <p>Groovy page content goes here</p> <p>Groovy page content goes here</p> <p>Groovy page content goes here</p> <p>Groovy page content goes here</p> <p>Groovy page content goes here</p> <p>Groovy page content goes here</p> <p>Groovy page content goes here</p> <p>Groovy page content goes here</p> <p>Groovy page content goes here</p> <p>Groovy page content goes here</p> <p>Groovy page content goes here</p> <p>Groovy page content goes here</p> <p>Groovy page content goes here</p> <p>Groovy page content goes here</p> <p>Groovy page content goes here</p> <p>Groovy page content goes here</p> <p>Groovy page content goes here</p> <p>Groovy page content goes here</p> <p>Groovy page content goes here</p> <p>Groovy page content goes here</p> <p>Groovy page content goes here</p> <p>Groovy page content goes here</p> <p>Groovy page content goes here.</p> </div> </div> <!-- end main --> <!-- start footer --> <div id="footer"> Developed by Bonnie Thurber, Bob Davis and Grace Basilio. Maintained by Grace Basilio </div> <!-- end footer --> </body> </html>
