Pie de página NO queda fijo!

[Boojak]

Hola!

Me gustaría ver si fuese posible que alguien me ayudasen con este problema:

Cuando entro a la página en concreto se ve bien y queda fijo. El problema viene cuando se hace click a un enlace interno (#blabla) porque entonces se desplaza un poco hacia arriba.

Para que les sea más fácil, les dejo una muestra gráfica:

Así es cuando se ve bien:



Así es cuando se ve mal:




Desconozco el porqué, pero me lo sube todo unos pixeles...

Aqui les dejo el código utilizado:

CSS:

body {
margin:0;
overflow: hidden;
}

#contenedor {
position: absolute;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
}

#cabecera {
width: 100%;
height: 3.34em;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size:18px;
color: white;
background: url(cabecera2.gif);
padding: 3px;
text-align: center;
overflow: hidden;
}

#cuerpo {
width: 82.5%;
height: 87%;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 1em;
background-color: #d8da3d;
padding: 3px;
padding-left: 14em;
padding-top: 1em;
text-align: justify;
overflow: auto;
}

#pie {
position: absolute;
left: 0px;
bottom: 0px;
width: 100%;
height: 1.5em;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size:11px;
background-color:#ff9933;
color: white;
padding: 6px;
text-align: center;
overflow: hidden;
}

#menu {
width: 10.5em;
border-style: solid solid none solid;
border-color: #D76100;
border-size: 1px;
border-width: 1px;
margin: 10px;
position: absolute;
top: 4.8em;
left: 0.5em;
font-family: Verdana, Arial, Helvetica, sans-serif;
}

#menu ul {
list-style: none;
margin: 0;
padding: 0;
}

#menu li a {
height: 32px;
voice-family: "\"}\"";
voice-family: inherit;
height: 24px;
text-decoration: none;
}

#menu li a:link, #menu li a:visited {
color: #9E3C02;
display: block;
background: url(menu.gif);
padding: 8px 0 0 30px;
}

#menu li a:hover {
color: #fff;
background: url(menu.gif) 0 -32px;
padding: 8px 0 0 30px;
}

#menu li a:active {
color: #fff;
background: url(menu.gif) 0 -64px;
padding: 8px 0 0 30px;
}


HTML (referente al pie de página):

<div id="pie">
<i>Pie de p&aacute;gina</i>
</div>


En fin, espero que me sean de ayuda!!

Muchas gracias por adelantado!!

[Impostor]

Revisa este ejemplo, espero te sirva de orientación.

Saludos¡¡

[Boojak]

Gracias! Pero lo siento porque ese ejemplo no me ayuda a tenerlo claro porque utiliza una programación que no estoy acostumbrado a usar...

Alguien sabe algo más sobre mi problema?

Gracias!

[Boojak]

Problema resuelto!!!

El problema era el padding que había en la cabecera, que me hacía subir el pie de página cuando clicaba en un enlace interno.

Gracias de todas formas!!!

[jomaruro]

Hola:

Me alegro que lo hayas solucionado, de todas formas te comento que la próxima vez deberías poner el HTML, que pongas el css no indica que sepamos como tienes estructurada la web y no es fácil dar con la solución a ciegas (por lo menos a mí).

Saludos.