No muestra fondo en FF

rmoralr · #1 (**permalink**) 26/12/2007, 11:23

Hola a todos,

tengo una css que tiene una imagen de fondo que coge todo el ancho de la div container, dicha imagen puede tener la propiedad repeat-y, aunque la muestra incluso sin dicha cláusula.

el problema está que en IE muestra el background pero en FF no. sólamente muestra el bkg en FF si establezco altura en la div, pero claro, esa no es la solución porque la altura es variable.

¿alguna solución?

muchas gracias

juaniquillo · #2 (**permalink**) 26/12/2007, 15:25

¿Es un div sin contenido? Una vez pones contenido en el div se verá el background. Si no pones contenido ni defines ningún tamaño para el div es como si no existiera.

rmoralr · #3 (**permalink**) 27/12/2007, 01:22

Hola Juaniquillo, gracias por responder.

Sí que tiene contenido, voy a intentar explicar con más detalle el problema:

aquí está el .php :

Cita:

y aquí el css:

Cita:

BODY {
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
color: #003366;
background-color: #FFFFFF;
background-image: url(../images/bg.png);
text-align: justify;
}

#container {
width: 788px;
background-image: url(../images/bg_container.png);
background-repeat: repeat-y;
text-align: justify;
}

#headercontent {
width: 750px;
height: 208px;
background-color: #FFFFFF;
margin-left: 19px;
position: relative;
float: left;
}
/* IE 6 hack */
* html #headercontent {
margin-left: 10px;
}

#topheader {
width: 750px;
height: 16px;
background-image: url(../images/bg_top.png);
background-repeat: repeat-x;
padding-top: 14px;
position: relative;
float: left;
}

#bottomheader {
width: 750px;
height: 178px;
position: relative;
float: left;
}

#headerleft {
width: 176px;
height: 174px;
background-image: url(../images/menuleft.png);
padding-top: 4px;
position: relative;
float: left;
}

#headerright {
width: 574px;
height: 178px;
position: relative;
float: left;
}

#logo {
width: 574px;
height: 117px;
background-image: url(../images/image_top.png);
}

#bot_hdr_right {
width: 574px;
height: 61px;
background-image: url(../images/bot_hdr_right.png);
position: relative;
float: left;
}

#bodycontainer {
width: 750px;
height: auto;
position: relative;
float: left;
}

#bodycontent {
width: 740px;
height: auto;
padding-left: 25px;
padding-right: 25px;
padding-bottom: 25px;
position: relative;
float: left;
}

#footer {
width: 763px;
height: 27px;
background-image: url(../images/footer.png);
position: relative;
float: left;
padding-top: 13px;
padding-right: 25px;
text-align: right;
color: #FFFFFF;
}

el problema está en FF, en IE 6 y 7 funciona bien (¿normalmente es al contratio, no?).
El la div #container, si defino un height=800px, por ejemplo, FF SI muestra el fondo, si no pongo nada o height=100%, que es el valor que debería tener, FF NO muestra nada y IE sí.

la imagen bg_container.png de dicha div es un fondo de 788 px de ancho y 4px de alto.

qué opináis?

saludos,

Raul

juaniquillo · #4 (**permalink**) 27/12/2007, 09:08

Lo que pasa es que estás haciendo varios floats dentro del container. Según las especificaciones de la W3C un contenedor que contiene floats debe colapsar. Intenta poner:

Código HTML:

 overflow:auto

al container.

rmoralr · #5 (**permalink**) 27/12/2007, 10:30

Hola juaniquillo,

gracias de nuevo por la respuesta.

he probado con la propiedad overflow=auto, y muestra una scrollbar horizontal. si ponemos overflow=hiden, funciona también y no muestra barras de desplazamiento.

he encontrado esta tarde otra solución:
haciendo un position y un float de la div container, y envolviendo ésta con otra div para seguir conservando la propiedad <center>, también funciona.

no sé cuál de las 2 soluciones es la más elegante, o la que cumple mejor las especificaciones w3c, pero ambas son válidas.

muchas gracias por todo,

saludos

juaniquillo · #6 (**permalink**) 27/12/2007, 17:10

si usas xhtml creo que no puedes usar <center> (puedes verificarlo con el validor CSS), pero el overflow=hiden es perfectamente aceptable si usas alturas fijas en tus divs.