Eliminar molesto espacio en blanco en pie de la pagina web Centrar web CSS/HTML

[Dan_SB]

Buenos dias!!!

Estoy haciendo una pagina web (practicando) como se puede apreciar... corri la pagina (con el servidor que hice de byethost xd) y pude apreciar que en google chrome corre perfecto (Ordenador tanto como el móvil..) pero, a la hora de probarlo usando el navegador Internet Explorer, aparece dicho espacio en blanco en el pie de la pagina.. :/ (igual pasa al usar el navegador nativo de mi celular, el espacio maldito aparece!)... he intentado muchas sugerencias de varios lados pero lastimosamente ninguna me funciona...

¿Que tendria que insertarle a este CSS?

Código: [Seleccionar]

body{background-color:#87CEFA;}

p{margin: 20px;}

#centrar{
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
}

#header{
background-color: #FACC2E;
background-image: url(http://i.imgur.com/JzP6Z3C.jpg);
height: 150px;
width: 1350px;
border-radius: 50px 10px 50px 10px;
box-shadow: 2px 2px 2px 2px #AEB404;
position: relative;
z-index: 0;
}

#hed{
background-color: #F4E000;
border-right: 5px solid #DBA901;
border-left: 5px solid #DBA901;
margin-left: 50px;
width: 200px;
height: 150px;
position: relative;
z-index: 1;
}

#titulo{
height: 30px;
background-color: #F1FF9A;
margin-top: 14px;
border-top: 5px solid #DBA901;
border-bottom: 5px solid #DBA901;
}

#tet{
       text-align:center;
       font-family: Garamond;
       color: darkred;
       margin-top: 35px;
       margin-left: 170px;
}

#bloque{
height: 381px;
background-color: #F1FF9A;
        background-image: url(http://www.fondosypantallas.com/wp-content/uploads/2010/10/nubes-sobre-mar.jpg);
margin-top: 17px;
border-top: 5px solid darkred;
border-bottom: 5px solid darkred;
box-shadow: inset 3px 0px 3px 0px #AEB404;
}

#reloj{
       background-color: #FFF2C6;
       height: 150px;
       border: 2px solid #FACA20;
}

#item{
text-decoration:none;
text-align:center;
padding:11px 32px;
-webkit-border-radius:50px 0px 50px 0px;
border-radius: 50px 0px 50px 0px;
-moz-border-radius-topleft:50px;
-moz-border-radius-topright:0px;
-moz-border-radius-bottomleft:0px;
-moz-border-radius-bottomright:50px; 
font:18px Arial, Helvetica, sans-serif;
font-weight:bold;
color:#ffffff;
background-color:#f5bb29;
background-image: -moz-linear-gradient(top, #f5bb29 0%, #f2e127 100%);
background-image: -webkit-linear-gradient(top, #f5bb29 0%, #f2e127 100%);
background-image: -o-linear-gradient(top, #f5bb29 0%, #f2e127 100%);
background-image: -ms-linear-gradient(top, #f5bb29 0% ,#f2e127 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f2e127', endColorstr='#f2e127',GradientType=0 );
background-image: linear-gradient(top, #f5bb29 0% ,#f2e127 100%);   
width: 100px;
margin-left: 20px;
margin-top: 20px;
box-shadow: 2px 2px 2px 2px #FF8000;
}

a{text-decoration:none;}

#link{text-decoration: none; color: #8A0808;}
#titulo:hover{background-color: #F4FA58;}
#item:hover{background-color: #F5DA81; box-shadow: 2px 2px 2px 2px #8A0808;}
#link:hover{color: #F56565;}

#bady{
background-color: #FACC2E;
height: 700px;
width: 1350px;
border-radius: 10px 50px 10px 50px;
box-shadow: 2px 2px 2px 2px #AEB404;
}

#menu{
background-color: #F4E000;
border-right: 5px solid #DBA901;
border-left: 5px solid #DBA901;
margin-left: 50px;
width: 200px;
height: 700px;
position: relative;
z-index: 50;
}

#seccion{
width: 100%;
height: 100px;
background-color: #F4E000;
border-top: 5px solid #DBA901;
border-bottom: 5px solid #DBA901;
margin-top: -665px;
position: relative;
z-index: 0;
}

#pagina{
      margin-top: 15px;
      margin-left: 300px;
      width: 1000px;
      height: 500px;
      background-color: #F1FF9A;
      box-shadow: inset 3px 0px 3px 0px #AEB404;
      position: relative;
      z-index: 0;
}

#escrito{
      margin-left: 17px;
      width: 970px !important;
      overflow: auto;
}

#footer{
background-color: #FACC2E;
        background-image: url(http://i.imgur.com/JzP6Z3C.jpg);
height: 150px;
width: 1350px;
border-radius: 50px 10px 50px 10px;
box-shadow: 2px 2px 2px 2px #AEB404;
}

Muchas gracias de antemano...

[Dan_SB]

Chicos, actualización del problema:

Le he removido el codigo css para centrar la pagina (selector centrar) y se ha ido el problema del espacio en blanco, pero ahora sale el otro problema de querer centrear la pagina... como ustedes lograron eso con esta pagina web sin tener problemas en navegadores diferentes?

Encontre algo sobre el css reset (que ya inclui en el codigo) por si las moscas.

Ahora mi pregunta es, ¿Cual seria el código "perfecto" para centrear el div para todos los navegadores sin que aparezcan esos molestos espacios en blancos?

[Dan_SB]

Chiiiiicos!! ya pude solucionarlo finalmente:

Resulta ser que como les dije, el código para centrar la pagina entera me generaba ese molesto espacio en blanco en el pie de la pagina.

Y esta fue la solución a mi problema.. el código definitivo para centrar tu pagina web para todos los navegadores (O eso creo yo jajaja!):

Código: [Seleccionar]

  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -500px;
  margin-left: -675px;

¿Qué significa? o ¿Qué se supone que hiciste?

*La posición es absoluta para que el div capture todo el contenido dentro de el.
*top y left al 50% (lo que hace esto es correr el div a tu derecha inferior).
*Y por ultimo el margin-top y margin-left:
*Para asignarle valor al margin-top necesitaras dividir el alto de tu div (height) entre 2. Si nunca le asignaste el height al div (como me paso a mi  ... ), facil, simplemente sumas el height de cada caja de tu pagina (header, body, footer) y eso dará el alto (height) total de la pagina.
*Por ultimo, para el margin-left que seria el ancho de tu pagina (width) es lo mismo, divides el ancho del div entre 2. Si tampoco le asignaste un width al div, supongo que todas tus cajas (header, body, footer) deben tener el mismo ancho no?. (Y si no, divide el ancho de la caja mas grande de tu pagina, aunque creo que no saldrá totalmente simétrico eh...)

Quizá vuelva aquí con mas preguntas ... jeje

[Alex Rodríguez]

Hola Dan, veo que has resuelto el problema, sobre la pregunta de cómo está centrada esta y muchas otras páginas es usando una regla como esta:

div#wrapper {
    margin: 0px auto;
    min-width: 764px;
    max-width: 2300px;
}

El width asignado al contenedor es un ancho fijo en pixeles (por ejemplo 994 pixeles). El centrado se logra con margin: 0 px auto;

Esto está explicado dentro del curso de CSS en http://aprenderaprogramar.com/index.php?option=com_content&view=category&id=75&Itemid=203

Saludos

[Dan_SB]

Perfecto, me paso por ahi ahorita (ademas de que ese codigo lo voy a guardar tambien )...

Salu2!