[Ovillo] Problemas con técnica footerStickAlt

Mie Oct 10 01:27:17 UTC 2007

Hola listeros:
Se que este tema se ha tratado cientos de veces en está lista pero aún así no le he encontrado solución posible. El caso es que estoy tratando de mantener el pie de página pegado al fondo de la página pero no hay forma de que lo logre. He seguido los pasos desde el principio y haciéndolo con una página sencilla sin muchos enredos. Les dejo aquí el HTML y el CSS y además una imagen para que vean el problema que tengo.

HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd <http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd> ">
<html xmlns="http://www.w3.org/1999/xhtml <http://www.w3.org/1999/xhtml> " xml:lang="sp" lang="sp">
<head>
    <title>Portal Dirección Técnica de IP</title>
    <meta http-equiv="Content-Type" content="text/html charset=iso-8859-1" />
    <link rel="stylesheet" type="text/css" href="web/css/style.css" media="screen" />
</head>
<body>
    <div id="nonfooter">
        <div id="cabecera">
            <div id="logotipo">&nbsp;</div>
            <div id="dir_tec">DIRECCIÓN TÉCNICA</div>
        </div>
        <div id="panel_navegacion">menu de navegacion horizontal</div>
        <div id="traza">traza</div>
        <div id="cont_central">
            <div id="navbarderecha">barra de navegacion derecha</div>
            <div id="central">contenido dinamico</div>
            <div id="navbarizquierda">barra de navegacion izquierda</div>
        </div>
    </div>
    <div id="footer">pie de pagina</div>
</body>
</html>

CSS:

* { margin: 0; padding: 0; }
html { height: 100%; }
body { height: 100%; }
#nonfooter { position: relative; min-height: 100%; }
* html #nonFooter { height: 100%; }
#content { padding-bottom: 9em; }
#footer { position: relative; margin-top: -7.5em; }
#cabecera, #logotipo, #dir_tec { height: 100px; }
#cabecera {  background-color: #000; width:100%; }
#logotipo { float: left; width: 25%; background-color: #CDEB8B; }
#dir_tec { float: left; width: 75%; background-color: #FFFF88; }
#panel_navegacion { clear: both; height:25px; width:100%; background-color:#C3D9FF; }
#traza { height: 25px; width: 100%; background-color:#000; }
#cont_central { clear: both; }
#navbarderecha { float: left; width: 25%; background-color:#FF7400; }
#central { float: left; width: 50%; background-color:#FF1A00; }
#navbarizquierda { float: left; width: 25%; background-color:#C79810; }
#footer { height:25px; width:100%; background-color:#356AA0; }

La imagen la pueden ver aquí: http://img3.freeimagehosting.net/uploads/3f32056b10.png 

Como podrán observar el pie de página nunca se pega al fondo como dice The Main in Blue que debe hacer. ¿Qué es lo que estoy haciendo mal?
Salu2 y gracias desde ya
Ing. Reynier Pérez Mira
Universidad de las Ciencias Informáticas