CSS y Firefox, problemas con el background color

[Alexis De la Cr]

Estimados Colegas:

Estoy tratando de desarrollar una pagina web exclusivamente con objetos de diseño(divs) pero tengo un problema con el color de fondo del div principal, ya que aunque en internet explorer funcionan perfectamente en firefox el color de fondo no aparece por ningun lado

utilizo un div principal que es el contenedor de todos los demas divs que componen la pagina que son 3 divs mas, encabezado, cuerpo y pie, obviamente dentro de esos tres divs hay mas divs, como el encabezado es una altura fija, se la asigno y el div principal efectivamente se ajusta al encabezado y puedo ver el color de fondo. como el div cuerpo es de altura variable, no le asigno ninguna altura y es aqui donde tuerce la puerca el rabo, ya que el div principal ya no se ajusta al div cuerpo y por lo tanto el color de fondo ya no se ve. Mucho menos se ve en el div pie.

como les dije en internet explorer funciona perfecto, pero en firefox, el color de fondo desaparece.

El codigo a grandes rasgos es el siguiente

<div id="contenedor">
    <div id="encabezado">El encabezado de altura fija</div>       
    <div id="cuerpo">Altura Variable, dependiendo de la informacion contenida</div>
    <div id="pie">altura fija</div>
</div>

Es correcto integrar en uno solo div el encabezado, el cuerpo y el pie, o se deben tratar por separado?

yo lo integre en un div pensando que el color de fondo del div contenedor aplicaria a todos los divs que van dentro.

Gracias por au ayuda

Alexis De la C

[roman]

Yo lo veo sin problemas, tanto en IE como en FF. Si pones la hoja de estilo quizá nos podamos dar una mejor idea.

// Saludos

[[kayetano]]

Estoy con roman, sin el css no hay nada que hacer.

[Alexis De la Cr]

Gracias roman y Cayetano por su ayuda, disculpen que no haya respondido mas rapido, pero ha sido una semana fatal.


aqui esta mi codigo css

@charset "utf-8";
/* CSS Document */
body
{
    background-color: #791515;
    background-image: url(../img/html_bgcp.gif);
    background-repeat:  repeat-x;
    margin-top:18px;
}
a {
    text-decoration: none;
}
#contenedor
{
    width: 780px;
    margin:auto;
    background-color: #FFFFFF;
}
#encabezado
{   position:relative;
    background-color: #333333;
    width: 780px;
    height:206px;
    float:left;
}
.espacio
{
width:780px;
height:28px;
}
.fecha {
    height:23px;
    font: 11px "Trebuchet MS", Arial, Helvetica, sans-serif;
    text-align:right;
    padding-right: 5px;
    padding-top: 5px;
}
#cuerpo
{
    position:relative;
    width:780px;
    position: relative;
    float:left;
}
#izquierda
{
    width: 200px;
    float:left;
    
}
.cuadro
{
    background-color: #DEE4E7;
    width: 180px;
    margin-top: 10px;
    margin-right: auto;
    margin-bottom: auto;
    margin-left: auto;
}
.cuadroamarillo
{
    width: 180px;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 12px;
    color: #FFFFFF;
    padding-top: 5px;
    padding-bottom: 5px;
    background-color: #333333;
}
.vineta{
    margin-right: 5px;
    margin-left: 5px;
    float: left;
    margin-top: 3px;
}
#menuv {
    
    width: inherit;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 11px;
    width: 180px;
}
#menuv ul, li {
    list-style-type:none;
}
#menuv ul {
    margin: 0;
    padding: 0;
}
#menuv li {
    border-bottom-width: 1px;
    border-bottom-style: dotted;
    border-bottom-color: #6e6e6e;
}
#menuv a {
    color: #333333;
    display: block;
    padding-top: 4px;
    padding-right: 6px;
    padding-bottom: 4px;
    padding-left: 14px;
    }
#menuv a:hover {
    text-decoration: none;
    color: #FFFFFF;
    padding-left: 10px;
    background-color: #660000;
}
#centro
{
    width: 580px;
    background-color: #FFFFFF;
    float:left;
}
#centro p {
    margin-top:0px;
    margin-bottom: 0px;
}
#centro2
{
    width: 580px;
    float:left;
}
.cuadrogrande
{
    background-color: #DEE4E7;
    width: 560px;
    margin-top: 10px;
    margin-right: auto;
    margin-bottom: auto;
    margin-left: auto;
}
.cuadroamarillogd
{
    width: 560px;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 12px;
    color: #FFFFFF;
    padding-top: 5px;
    padding-bottom: 5px;
    background-color: #333333;
}
.fuente
{
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 11px;
    color: #333333;
    text-decoration: none;
    padding-top: 0px;
    padding-right: 10px;
    padding-bottom: 10px;
    padding-left: 10px;
}
#pie
{   
    background-color: #333333;

    margin-top: 10px;
    float:left;
}
.fuentepie
{
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 11px;
    color: #FFFFFF;
    text-decoration: none;
    padding: 8px;
}

el codigo html es el siguiente:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>.:.Construyendo para el Futuro.:.</title>
<script type="text/javascript" src="test/swfobject.js"></script>
<link href="css/construyendo.css" rel="stylesheet" type="text/css" />
<script src="Scripts/AC_RunActiveContent.js" type="text/javascript"></script>
</head>

<body>
<div id="contenedor">
  <div id="encabezado">
    <div class="espacio"><div class="fecha"><script languaje="JavaScript">

var mydate=new Date()
var year=mydate.getYear()
if (year < 1000)
year+=1900
var day=mydate.getDay()
var month=mydate.getMonth()
var daym=mydate.getDate()
if (daym<10)
daym="0"+daym
var dayarray=new Array("Domingo","Lunes","Martes","Miercoles","Jueves","Viernes","Sabado")
var montharray=new Array("Enero","Febrero","Marzo","Abril","Mayo","Junio","Julio","Agosto","Septiembre","Octubre","Noviembre","Diciembre")
document.write("<font color='#FFFFFF' face='Verdana, Arial, Helvetica, sans-serif'>"+dayarray[day]+" "+daym+" de "+montharray[month]+" de "+year+"</font></small>")

    </script></div></div>
    <div><img src="img/cabezacf.jpg" /></div>
    <div class="espacio">
      <script type="text/javascript">
AC_FL_RunContent( 'codebase','http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0','width','780','height','28','src','flash/scrollcf','quality','high','pluginspage','http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash','movie','flash/scrollcf' ); //end AC code
</script><noscript><object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0" width="780" height="28">
        <param name="movie" value="flash/scrollcf.swf" />
        <param name="quality" value="high" />
        <embed src="flash/scrollcf.swf" quality="high" pluginspage="http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash" width="780" height="28"></embed>
      </object>
    </noscript></div>
  </div><!--fin encabezado-->
  
  <div id="cuerpo" >
    <div id="izquierda">
      <div class="cuadro">
        <div class="cuadroamarillo"> <div class="vineta"><img src="img/arwcf.gif" /></div>Nuestra Empresa</div>
        <div id="menuv">
         <ul>
          <li><a href="/">Inicio</a></li>
          <li><a href="/">Somos</a></li>
          <li><a href="/">Misión</a></li>
          <li><a href="/">Visión</a></li>
          <li><a href="/">Valores</a></li>
         </ul>
        </div>
      </div> <!--fin cuadro -->
      <div class="cuadro">
        <div class="cuadroamarillo"> <div class="vineta"><img src="img/arwcf.gif" /></div>
        Presentaciones</div>
        <div id="menuv">
         <ul>
          <li><a href="libertadfinancieracf.php">Libertad Financiera</a></li>
          <li><a href="videos/actividadcf.php">Actividad Empresarial</a></li>
         </ul>
        </div>
      </div> <!--fin cuadro -->
      <div class="cuadro">
        <div class="cuadroamarillo"> <div class="vineta"><img src="img/arwcf.gif" /></div>
        Contáctanos</div>
        <div id="menuv">
         <ul>
          <li><a href="http://www.top10benefits.com/WTP_BIZ_LP/LP07-a.asp?qrm=1176">Pronto nos comunicaremos</a></li>
         </ul>
        </div>
      </div> <!--fin cuadro -->
    </div> <!--fin izquierda-->
    <div id="centro2">
      <div class="cuadrogrande">
        <div class="cuadroamarillogd"><div class="vineta"><img src="img/arwcf.gif" /></div>¡Bienvenido!</div>
        
        <div align="center"><p id="player1"><a href="http://www.macromedia.com/go/getflashplayer">Get the Flash Player</a> to see this player.</p>
        <script type="text/javascript">
    var s1 = new SWFObject("/test/flvplayer.swf","single","408","306","7");
    s1.addParam("allowfullscreen","true");
    s1.addVariable("file","/test/octavio1.flv");
    s1.addVariable("image","/test/preview.jpg");
    s1.addVariable("width","408");
    s1.addVariable("height","306");
    s1.write("player1");
</script></div>
        <div align="justify" class="fuente">¿Qué  es lo que se te viene a la mente cuando escuchas las palabras: despidos,  reducción de personal, re-estructuración? ¿Te preocupa ser víctima de uno de  ellos? O, ¿ya te ha sucedido?<br /><br />
          Parece  ser que en estos días, el ser vulnerable a este tipo de cosas se ha convertido  en un estilo de vida para muchas personas. Nadie tiene el trabajo -así como el  futuro- asegurado. El retiro viene únicamente después de largos años de trabajo  y sacrificios -en el mejor de los casos-. Y los pocos afortunados que logran  jubilarse&nbsp;reciben una pensión que solamente es suficiente para sobrevivir.<br />
          <br />
          <strong>Entonces, ¿esto dónde te deja?</strong> ¿Estás  buscando mayor seguridad? ¿Estás buscando un ingreso que aumente año tras año?  ¿Quieres tener mayor libertad financiera y disponer de más tiempo libre? Tal  vez es tiempo de que te conviertas en tu propio jefe. Iniciar tu nuevo negocio.  ¿Suena atemorizante? Tal vez. Pero continúa leyendo. Esto se pone  mejor. <br />
          <br />
          Nosotros  buscamos diligentemente para encontrar el negocio perfecto, uno en el que no  pudiéramos esperar a levantarnos por la mañana para ir a trabajar y que nos  diera la libertad financiera y el tiempo libre que estábamos buscando. Bueno,  lo hemos encontrado. Y ahora estamos construyendo ese negocio perfecto. En el  proceso descubrimos las tres palabras más porderosas del español: <br /><br />
          <strong>&quot;Si yo puedo&quot;</strong> Honestamente  no entendíamos el poder de estas palabras antes de iniciar nuestro negocio.  Creo que se podría decir que la mayoría de nosotros no éramos negociantes. Pero  rápidamente nos encontramos rodeados por otras personas en este negocio. Para  nuestra sorpresa, ellos no nos vieron como su competencia. Ellos nos veían como  miembros de su equipo y nos dieron todo su apoyo. Estas son las grandes razones  por las que nos gusta esta actividad. <br />
          <br />
          ¿Si te damos todas las herramientas, la instrucción y todo el apoyo que  necesitas, podrías decir: <br /><strong><br />
          &quot;Si yo puedo&quot; ser LIBRE FINANCIERAMENTE?</strong> Lo  curioso es que nuestros &quot;clientes&quot; no piensan que nosotros somos unos  negociantes, o vendedores. Ellos nos tratan más como consultores en los que  confían. Una razón más por la que nos gusta este negocio. <br /><br />
          <strong>Nuestro  propósito hoy y todos los días por venir es ayudarte a conseguir lo que quieres. </strong>Hemos  aprendido que cuando una persona de las que “hacen las cosas pasar” quiere  hacer un cambio en su vida- lo quiere AHORA! Si tu eres de ese tipo de  personas - estoy disponible para ti. Por favor siéntete libre de contactarnos  usando nuestro número de teléfono  o correo puesto hasta arriba de esta página o haz clic en <a href="http://www.top10benefits.com/WTP_BIZ_LP/LP07-a.asp?qrm=1176"><strong>Contáctame</strong></a>. <br />
          <br />Antes  que nada, el objetivo principal de nuestra actividad empresarial es ayudarte a  ti y a nuestros amigos a alcanzar su LIBERTAD FINANCIERA, así que nos gustaría  compartir contigo lo que nosotros entendemos por esta LIBERTAD FINANCIERA. <br /><br />
          Te invitamos a saber más de nosotros y a aprovechar algunos de los recursos  educacionales de primera clase disponibles siguiendo los pasos en esta página.  Después, decide si quieres saber más acerca de nuestro negocio. <br />
          <br />
          <a href="libertadfinancieracf.php">&quot;LIBERTAD FINANCIERA&quot;</a></div>
      </div><!--fin cuadrogrande-->
    </div> <!--fin centro-->
  </div>
  <!--fin cuerpo-->
  <div id="pie">
    <div  align="center"class="espacio">
      <div class="fuentepie">Copyright © 2007 Construyendo para el futuro. Desarrollado por Datacomp Computadoras</div>
    </div>
  </div><!--fin pie-->
</div> <!--fin contenedor-->
</body>
</html>

La pagina la pueden consultar en

http://construyendoparaelfuturo.com/

[dec]

Hola,

Si me he fijado bien, lo que pasa es que no aparece el fondo "blanco" que aparece en Internet Explorer. Lo cierto es que así es en Opera, Firefox y Safari. Echando un vistazo he visto que lo que habría que "colorear" es el elemento identificado como "cuerpo". Haciendo la prueba, efectivamente, esto funciona en IE, Opera, Firefox y Safari.

PD. Cuando asignamos un "background" a un elemento, hay que asignar también un "color", según el W3C.

[roman]

Hola,

Según yo, el problema es que los tres elementos dentro de contenedor: encabezado, cuerpo y pie, tienen el atributo float=left. Según leí alguna vez que me sucedió algo similar, son de esas (múltiples) ocasiones en que parece que IE hace bien lo que el resto de navegadores hace mal. Pero en realidad, es IE el que está mal. Los elementos flotantes no ocupan espacio dentro de su contenedor, y como éste no tiene definida una altura, entonces en realidad no se "expande" y tiene altura cero; dicho de otra forma, no se ve.

Esto se puede solucionar poniendo un elemento al final del div que haga clear: left, pero en el caso particular de este diseño, en realidad basta omitir los float de los divs interiores pues no se requieren.

// Saludos