los div en firefoxf no me toman el alto de los div que contiene

[vitogq]

Hola, tengo una web q en ie va bien, pero en firefox no funciona bien;

He usado div para definir cada una de las partes de la web, tengo un div id=fondo donde tengo un background que repito verticalmente, dentro de ese div tengo el div id = cabecera donde me pone la imagen que uso de cabecera dentro de estre div tengo el div id =pie donde esta la imagen del fondo de la web y el contenido de la misma.

El problema me da en que el background del fondo no se saca, es decir no se ve

Os indico el codigo:

Código:

<div id=contenedor> //posiciona la web en el centro de la pantalla
   <div id=fondo> //ponemos el fondo de la Web background:transparent url(/imagenes/linea.png) repeat-y scroll 0 0
      <div id=cabecera> //la cabecera de la web   background:transparent url(/imagenes/cabeza.jpg) no-repeat scroll 0 0
         <div id=pie> //el pie de la web   background:transparent url(/imagenes/pie1.jpg) no-repeat scroll center bottom
            Cuerpo de la Web
         </div>
      </div>
   </div>
</div>

La idea de hacerlo asi es para la posicion del pie como no se el contenido del cuerpo, se carga dinamicamente y varia en funcion de la pagina, en ie va estupendamente, pero en firefox no funciona, el pie se pega a la cabecera y el fondo no se repite, quedando el contenido sin background.

Mis preguntas son:

• como hacer que el height del div fondo sea la suma de lo que hay dentro de él
• como alinear background del pie al fondo.

[salbatore]

Hola vitogp,

A mi me ocurria lo mismo cuando empece con esto del css... me volvia loco de remate!... un dia descubri que si ponia display:table... se veia correcto... pero otro dia... pregunte aqui en el foro... y me arrojaron luz!... jeje



Te explico:

Para que que el div se comporte adecuadamente cuando no tiene contenido... o medidas... pon:

Código PHP:

  overflow:auto;  
   

Es como si un div se almodase a lo que tiene en su interior. Asi que no pongas display:table... pon overflow:auto.


Bueno la verdad es que no se si es esto lo que quieres... pero eso de que la altura sea la suma de los div's de su interior me ha sonado tanto a mis inicios... que no me he podido repremir escribirte.

Hasta pronto... espero que te sirva!... sino explica un poco mas!.

[vitogq]

Hola Salvatore,

gracias por tu respuesta, funciona pero no del todo...

Ahora lo que me falla es un background que no consigo alinear por abajo

ya controlo las alturas pero no ese alineamiento vertical...

de nuevo gracias

en el div id=pie es donde tengo todo el contenido de la Web

[salbatore]

Hola de nuevo vitogp,

La verdad es que es un poco dificil ayudarte sin ver el codigo subido algun lado, jeje... asi que si te animas lo subes y te ayudo... yo algunas veces subo los archivos a tripod que es un hosting gratuito, ahora que lo veo le han cambiado el nombre a multimania...

Bueno... la verdad es que no entiendo tu problema con el fondo... si eso pon mas codigo, jeje

Hasta pronto!... por lo menos la altura se soluciono.

[Tecna]

Buenas,

yo restructuraría el código, no le veo mucho sentido a que el contenido esté dentro del pie, el pie dentro de la cabecera, y todo dentro de los otros dos divs que no te hacen falta para nada. Con dos divs sin anidar, uno para la cabecera y otro para el contenido sería suficiente. En el del contenido pones la imagen posicionada en el centro del margen inferior como quieres hacer y el fondo que se repite y para centrar la página puedes usar body directamente, que es un elemento mas y que ya de por sí contiene todo.

[vitogq]

Iniciado por salbatore

Hola de nuevo vitogp,

La verdad es que es un poco dificil ayudarte sin ver el codigo subido algun lado, jeje... asi que si te animas lo subes y te ayudo... yo algunas veces subo los archivos a tripod que es un hosting gratuito, ahora que lo veo le han cambiado el nombre a multimania...

Bueno... la verdad es que no entiendo tu problema con el fondo... si eso pon mas codigo, jeje

Hasta pronto!... por lo menos la altura se soluciono.

Hola Salbatore, ya lo he resuelto el truco esta en usar owerflow de diferente forma en ie y ff y jugando con min-height: 150px; hight:auto !important;hight:150px;

[vitogq]

Iniciado por Tecna

Buenas,

yo restructuraría el código, no le veo mucho sentido a que el contenido esté dentro del pie, el pie dentro de la cabecera, y todo dentro de los otros dos divs que no te hacen falta para nada. Con dos divs sin anidar, uno para la cabecera y otro para el contenido sería suficiente. En el del contenido pones la imagen posicionada en el centro del margen inferior como quieres hacer y el fondo que se repite y para centrar la página puedes usar body directamente, que es un elemento mas y que ya de por sí contiene todo.

Hola Tecna, lo que tu dices seria valido si el cuerpo de la web fuera en el cuerpo, pero no es tan facil, te comento

el background de la cabecera se rellena con parte del cuerpo de la web,
y el background del pie forma parte del cuerpo de la Web, es decir tengo que ajustar la cebecera y el pie para que entre todo el texto.y cuando se separan pongo el background del cuerpo.

En Web mas sensillas donde la cabecera y el pie es de unos pocos pixel 10 ó 12 pixeles si puedo hacer lo que dices, pero ene este caso estamso hablando de un pie de 150 pixel de alto que debe rellenarse. Cuando tengamso publicada la Web pondre la direccion para q lo podais ver.

Un saludo

[Tecna]

Buenas,

yo lo que digo es que no llamar a las cosas por su nombre te puede liar y llevar a cometer errores, ¿que es eso de que si el cuerpo fuera el cuerpo? No he visto el resto del código pero el trozo que mostrabas se puede simplificar bastante y cuanto mas sencillo sea, mucho mejor. Mira el ejemplo que he puesto en el otro hilo, que me he liado con las respuestas.