Foros del Web » Creando para Internet » CSS »

No muestra fondo en FF

Estas en el tema de No muestra fondo en FF en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 26/12/2007, 11:23
 
Fecha de Ingreso: diciembre-2007
Mensajes: 3
Antigüedad: 16 años, 3 meses
Puntos: 0
No muestra fondo en FF

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
  #2 (permalink)  
Antiguo 26/12/2007, 15:25
Avatar de juaniquillo
Colaborador
 
Fecha de Ingreso: noviembre-2005
Ubicación: San Juan, Puerto Rico
Mensajes: 5.745
Antigüedad: 18 años, 4 meses
Puntos: 281
Re: No muestra fondo en FF

¿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.
__________________
Por fin.. tengo algo parecido a un blog
Y por lo visto ya estoy escribiendo...
  #3 (permalink)  
Antiguo 27/12/2007, 01:22
 
Fecha de Ingreso: diciembre-2007
Mensajes: 3
Antigüedad: 16 años, 3 meses
Puntos: 0
Re: No muestra fondo en FF

Hola Juaniquillo, gracias por responder.

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

aquí está el .php :
Cita:
<body>
<center>

<div id="container">

<div id="headercontent">
<div id="topheader">
<?php mosLoadModules('top',-2);?>
</div>
<div id="bottomheader">
<div id="headerleft">
<?php mosLoadModules('left',-2);?>
</div>
<div id="headerright">
<div id="logo"></div>
<div id="bot_hdr_right"></div>
</div>
</div>
</div>


<div id="bodycontainer">
<div id="bodycontent">
<?php mosMainBody(); ?>
</div>
</div>

<div id="footer">
<?php mosLoadModules('user1',-2);?>
</div>
</div>


</center>
</body>
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

Última edición por rmoralr; 25/02/2008 a las 09:38 Razón: .
  #4 (permalink)  
Antiguo 27/12/2007, 09:08
Avatar de juaniquillo
Colaborador
 
Fecha de Ingreso: noviembre-2005
Ubicación: San Juan, Puerto Rico
Mensajes: 5.745
Antigüedad: 18 años, 4 meses
Puntos: 281
Re: No muestra fondo en FF

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.
__________________
Por fin.. tengo algo parecido a un blog
Y por lo visto ya estoy escribiendo...
  #5 (permalink)  
Antiguo 27/12/2007, 10:30
 
Fecha de Ingreso: diciembre-2007
Mensajes: 3
Antigüedad: 16 años, 3 meses
Puntos: 0
Solucionado: No muestra fondo en FF

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
  #6 (permalink)  
Antiguo 27/12/2007, 17:10
Avatar de juaniquillo
Colaborador
 
Fecha de Ingreso: noviembre-2005
Ubicación: San Juan, Puerto Rico
Mensajes: 5.745
Antigüedad: 18 años, 4 meses
Puntos: 281
Re: No muestra fondo en FF

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.
__________________
Por fin.. tengo algo parecido a un blog
Y por lo visto ya estoy escribiendo...
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 23:47.