Espacio en blanco al final de la página en IE

[i12caale]

Hola a todos,

Acabamos de diseñar y desarrollar una página web que funciona ya perfectamente en Firefox y demás. Ahora llega la hora de "arreglarla" para que se visualice bien en IE y nos hemos encontrado con un problema que parecía trivial pero que nos está llevando muchísimo más tiempo del previsto.

El tema es que nos deja un espacio en blanco muy grande en la parte inferior de la página. Sabemos que es porque metemos los DIV y luego con JavaScript los recolocamos. Entonces Firefox, al recolocar el DIV más arriba y quedarse la parte de abajo vacía, entiende que esa parte no vale para nada y no la muestra, pero IE interpreta que sigue siendo una parte visible de la página.

No sé si me habré explicado bien, pero estamos desesperados ya y cagándonos (con perdón) en la puta madre (con perdón) que parió al Internet Explorer (con perdón).

Todos vuestros comentarios serán bievenidos. Muchas gracias.

[Mikmoro]

Iniciado por i12caale

No sé si me habré explicado bien, pero estamos desesperados ya y cagándonos (con perdón) en la puta madre (con perdón) que parió al Internet Explorer (con perdón).

Buena frase, y muy ilustrativa de la desesperación (con perdón)

¿La tenéis subida a algún sitio donde poder verla? Imagino que es un asunto de pociones relativas, pero habría que verlo.

[Rafael]

Te recomiendo esta solución:

http://www.cssstickyfooter.com/es/

[i12caale]

Iniciado por Mikmoro

Buena frase, y muy ilustrativa de la desesperación (con perdón)

¿La tenéis subida a algún sitio donde poder verla? Imagino que es un asunto de pociones relativas, pero habría que verlo.

La página está en www(punto)uco(punto)es/~i12caale/talleres/ (el tema de que no se vean bien los caracteres especiales no es problema, es solo por la codificación de caracteres que usa por defecto el servidor donde está alojada ahora mismo, que es provisional)

Y por lo de la desesperación, es que estamos hartos de tener que hacer dos versiones de todas las páginas (una para todos los navegadores que respetan los estándares y una especial para IE). Supongo que no nos pasará solo a nosotros.

Muchas gracias, tío.

[i12caale]

Iniciado por Rafael

Te recomiendo esta solución:

cssstickyfooter

Rafa, lo que queremos es eliminar todo ese espacio en blanco que sobra y mete scroll vertical, no llevar el footer al final, jeje. Gracias de todas formas, muy interesante tu aportación para otros proyectos.

[Mikmoro]

Bueno, he de decirte que viendo la página, el problema no es tanto de IE6 como de que habéis estructurado la página de una forma más bien extraña: tienes un fondo izq, que tiene dentro un warp con el contenido, y que como no está flotado no permite nada a su lado, por eso al poner el fondo_centro lo tienes que desplazar -700px hacia arriba directamente para que se coloque arriba, donde debe ir, y ahí comienza el lio.

La verdad es que no es fácil arreglarlo, porque hay que mirarlo bien, pero sí que te recomiendo seguir siempre que puedas de manera lo más natural posible el flujo del documento.
Si puedo luego intento echarte una mano, pero hay un buen jaleo ahí. Y no sólo es la estructura, sino por ejemplo, el menú no funciona en IE6. ¿Por qué? es fácil. ¿Por qué un menú con divs en lugar de una lista (UL) y demás?.
IE6 es muy problemático, pero también hay que aprender a usar código lo más correcto, estandar y compatible posible.

[i02gojil]

Hola Mikmoro, ¿estaría bien definida la siguiente estructura?

<div id="contenedor" class="contenedor">
<div id="banner">
<div id="bannerizq" class="bannerizq"></div>
<div id="bannercentro" class="bannercentro"></div>
<div id="bannerder" class="bannerder"></div>
</div>

<div id="cuerpo">
<div id="cuerpoizq" class="bannerizq"></div>
<div id="cuerpocentro" class="bannercentro">
<div id="texto"></div> //AQUI VA EL CONTENIDO REAL DE LA PÁG.
</div>
<div id="cuerpoder" class="bannerder"></div>
</div>

<div id="pie">
<div id="pieizq"></div>
<div id="piecentro"></div>
<div id="pieder"></div>
</div>

</div>

Gracias

[Mikmoro]

A simple vista parece que sí, pero realmente todo depende de lo que se necesite, ya que no puede haber una estructura universal correcta, sino la correcta para tu objetivo. Depende de cómo sean los gráficos, las decoraciones de tus cajas, los contenidos, en fin, de cómo va a ser todo.

Una apreciación sería que no suele ser realmente necesario que cada div contenga un ID y una clase, pero digo en general; en tu caso concreto habría que estudiarlo y matizarlo.

[Mikmoro]

Por no dejarlo así y como pasatiempo, me he permitido mostrarte a qué me refería con que tenéis una estructra muy complicada, haciendo un ejemplo para que podáis ver lo sencillísima que puede (y debe) ser la estructura de vuestro diseño (sin javascript).

Ejemplo

Esta es la hoja de estilo, también sencillísima comparada con lo que había.

Os daréis cuenta de que haciendo las cosas bien, estandar y compatibles, no siempre es necesario un diseño específico para IE6, siendo en este caso casi idéntico al de Firefox (sólo está probado en FF y IE6).

Dos cosas: 1) veréis un pequeño error de color en el pie, y es porque no habéis usado exactamente el mismo degradado que para el cuerpo; 2) para el fondo he hecho una imagen que coloco como fondo del body, lo que simplifica enormemente todo lo que intentábais con los lados derecho e izquierdo.

Espero que esto os dé una pista de por dónde continuar.

Saludos.

[i02gojil]

Gracias de antemano por tu tiempo. Estoy revisando el código y ya estoy viendo varias cosas en las que has simplificado mi diseño (la mayoría por no saber por mi parte de su existencia).

Creo que esto va a estar complicado pero ¿conoces algún manual/guía/faq/bugs, vamos un todo en uno?

[i02gojil]

Otra cosilla relacionada con el problema del color de la parte izquierda con respecto al central y de la cual viene el utilizar parte izquierda, parte central y parte derecha.

La cuestión surge porque de izquierda a derecha de toda la pantalla el fondo debe tener un degradado progresivo, pero claro, queremos siempre mostrar centrada en la pantalla la parte central (banner centro, fondo centro y pie centro).

Las imágenes bannerizq, fondoizq y pieizq tienen un ancho predefinido de 325px y, en función del ancho de la pantalla utilizada, el div que las contiene, y por tanto ellas mismas, deben redimensionarse a la anchura adecuada (de ahí uno de los usos de js).


Lo que pasa ahora es que las 3 imágenes de la izquierda comienzan mostrando su pixel 0 que es el que tiene el menor degradado y terminan mostrando su píxel igual a la anchura calculada para que la parte central quede correctamente. Dicho píxel no tiene el degradado que acompañaría al píxel 0 de la parte central. El último pixel mostrado por la parte izquierda debería ser el píxel 325 y el primero el correspondiente a restar 325-anchuraCalculadaParaLaParteIzquierda.

¿Os surge alguna idea?

[Mikmoro]

Iniciado por i02gojil

Gracias de antemano por tu tiempo. Estoy revisando el código y ya estoy viendo varias cosas en las que has simplificado mi diseño (la mayoría por no saber por mi parte de su existencia).

Creo que esto va a estar complicado pero ¿conoces algún manual/guía/faq/bugs, vamos un todo en uno?

Como supongo imaginarás, una cosa como esta no creo que se aprenda sencillamente en un libro/manual/guía/faq/bugs. Al igual que tú eres programador (o eso me pareció por tu web), esto son bastantes horas de vuelo con la maquetación y un millón de problemas resueltos, como en cualquier rama.

Aquí hay un par de tutoriales en el foro de CSS que quizá te pueden empezar a pistas sobre lo que buscas:

Guía de migración I
Guía de migración II

Sobre el problema que relatas con el fondo, realmente no lo entiendo, porque no sé si te refieres a que lo tienes con tu maquetación actual de izquierda-centro-derecha o con mi propuesta de hacer un fondo.
Desde luego, tal y como estaba no es como yo lo resolvería (y menos si eso me obligara a usar javascript para algo tan simple como centrar la página), pero eso es cuestión de cada uno.

Lo siento pero no sé en qué punto estás ahora y a qué se refiere la consulta.

[i02gojil]

Se refiere a mi maquetación. La propuesta tuya de hacer fondo tiene el mismo "problema" que la mía ahora mismo y es que al centrar en la pantalla la parte central se "come" gran parte de la parte derecha del fondo. Si nosotros tenemos un degradado hecho en el fondo, evidentemente la parte de la derecha queda oculta por tanto aparece un salto entre el fondo visible y la parte central. No sé si me explico bien :S.

[Mikmoro]

Ya, pero es que en tu página la parte derecha del contenido, la cabecera y el pie no tiene degradado, sino que ha llegado ya al blanco, y con poner ese fondo blanco es suficiente para que la parte derecha sobrante, sea el tamaño que sea, quede encajada perfectamente.

Hay otras soluciones posibles, pero si tras ver eso haces una consulta sobre tu maquetación actual es que tienes claro que es la que vas a usar, y ahí no tengo idea de cómo ayudarte.

[Mikmoro]

Mira a ver ahora si lo ves como quieres o no:

http://www.araudi.net/forosdelweb/i12caale.html

[Mikmoro]

Otra cosa: no me parece nada buena idea usar imágenes relevantes como background, como es el caso de tu cabecera, porque en el caso de que por alguna razón no se viera (falla la hoja de estilo, la imagen, se usa lector de pantalla, navegador de texto, etc.), ni siquiera se verá el texto de sustitución (alt), quedando un espacio en blanco y perdiendo algo tan vital como el logo, nombre y slogan de la empresa. Es preferible poner las imágenes relevantes incrustadas con la etiqueta img, y dejar como fondos las decoraciones.
También deberías usar ALT (texto aternativo) en todas tus imágenes incrustadas.

[jomaruro]

Hola:

Iniciado por Mikmoro

Imagino que es un asunto de pociones relativas

¡que atrasado estoy! yo conocia las pociones mágicas pero no las relativas

Saludos.

[Mikmoro]

Sí: las relativas son para un sólo asunto y las absolutas para siempre.
Si quieres te mando un poción absoluta que corrige la tendencia a hacer chistes malos

[jomaruro]

¡y yo que pensaba que sólo era un chiste fácil!