div fondo imágenes aparece, pero el color de fondo no hace

Question

Estoy teniendo un problema menor css.

Tengo una serie de capas divs y no tengo los estilos de clase conjunto div y todos se presento (relleno, colores de la fuente, etc.). Sin embargo, el color de fondo no funcionará para los divs superpuestos.

como una prueba, he tratado de establecer una frontera y frontera estilos, y todos ellos funcionaba tan bien, excepto el color del borde, que no se presentó y la frontera con el estilo adicional quedé negro.

Cada div tiene un identificador único, y aquellos en los que el color de fondo no están funcionando están anidados (lado a lado) en un contenedor div. He estado tratando de entender si los divs anidados están tomando el color de fondo divs padres, pero he tratado de cambiar el desbordamiento fo el padre, y que no tenía ningún efecto.

Como solución que creó un 1 x 1 píxel jpg del color de fondo correcto y establecer la imagen de fondo divs, que trabajaba. Pero es un truco, y no hay mejor voy saber por qué todos los elementos de estilo de trabajo, excepto el color de fondo.

Espero que he explicado mi situación lo suficiente, si alguien me puede ayudar lo agradecería.

(también, como una adición, yo uso Dreamweaver para escribir código y los colores de fondo aparece en el modo de vista previa, pero no aparecen en Firefox, Chrome o IE)

Código solicitado:

      <div id="longBox">
        <div id="specialLable"> Rent Specials &amp; promotions</div><!--end specialLable-->
        <div id="promoMain"> 
        <div id="proHeader">Alhambra Village Fall Special:</div><!--end proHeader-->
        <div id="proDate">Expires: Date</div><!--end proDate-->
        <div id="clear"></div>
        <div id="protext">This is where the details go</div><!--end protext-->
        <div id="promoConditions"><br />Limited availability. All promotions subject to change. Not good with other offers or promotions unless specified.</div><!--end promoConditions-->
        <div id="proContact">Request an Appointment</div><!--end proContact-->
        </div><!--end specialLable-->
      </div><!--end longBox-->

#longBox{
width:713px;
height:225px;
background-color:#FFFFFF;
float:left;
margin:1.2em 0 0 .7em;
}

#specialLable{
background-image:url(../images/01titleBar.png);
margin: .5em .5em .5em .5em;
width:689px;
height:30px;
font-size:1.2em;
font-weight:bold;
text-transform:uppercase;
color:#667b90;
padding:3px 0 0 6px;
}


#promoMain{
margin: 0 .5em .5em .6em;
background-color:#ced5da;
height:166px
}

#proHeader{
font-size:11px;
text-align:left;
font-weight:bold;
text-transform:uppercase;
color:#CC6666;
float:left;
padding:.3em .6em .3em .6em;
margin:.6em 0 0 .6em;
background-image:url(/images/images/bgwhite.jpg);
background-repeat:repeat;
width:503px;
}
#proDate{
font-size:11px;
text-align:left;
font-weight:bold;
text-transform:uppercase;
background-image:url(/images/images/bgwhite.jpg);
background-repeat:repeat;
color:#CC6666;
float:right;
width:150px;
padding:.3em .6em .3em .6em;
margin:.6em .6em .6em 0;
}

#protext{
font-size:11px;
text-align:left;
margin:0 .6em 0 .6em;
height:80px;
background:ffffff;
padding:0 0 0 .6em;
background-image:url(/images/images/bgwhite.jpg);
background-repeat:repeat;
}

#promoConditions{
font-size:9px;
text-align:left;
line-height:100%;
float:left;
padding:0 .6em 0 .6em;
margin:.6em 0 0 .6em;
width:503px;
}

#proContact{
font-size:11px;
text-align:left;
font-weight:bold;
text-transform:uppercase;
background-image:url(/images/images/bgwhite.jpg);
background-repeat:repeat;
color:#CC6666;
float:right;
width:150px;
padding:.3em .6em .3em .6em;
margin:.6em .6em 0 0;
}

Answer 1

La razón por la que las imágenes están trabajando es porque son nuevos attribs definidos para el niño. El padre nunca tuvo una IMG para una BG, así que usar el color 1x1 truco pxel sin duda el trabajo a medida que salir de la estructura de herencia. De todas maneras:

Trate lo siguiente:

     #longBox{
        width:713px;
        height:225px;
        background-color:#FFFFFF;
        float:left;
        margin:1.2em 0 0 .7em;
        }

    div#specialLable{
    background-image:url(../images/01titleBar.png);
    margin: .5em .5em .5em .5em;
    width:689px;
    height:30px;
    font-size:1.2em;
    font-weight:bold;
    text-transform:uppercase;
    color:#667b90;
    padding:3px 0 0 6px;
    }


    div#promoMain{
    margin: 0 .5em .5em .6em;
    background-color:#ced5da;
    height:166px
    }

    div#proHeader{
    font-size:11px;
    text-align:left;
    font-weight:bold;
    text-transform:uppercase;
    color:#CC6666;
    float:left;
    padding:.3em .6em .3em .6em;
    margin:.6em 0 0 .6em;
    background-image:url(/images/images/bgwhite.jpg);
    background-repeat:repeat;
    width:503px;
    }

div#proDate{
    font-size:11px;
    text-align:left;
    font-weight:bold;
    text-transform:uppercase;
    background-image:url(/images/images/bgwhite.jpg);
    background-repeat:repeat;
    color:#CC6666;
    float:right;
    width:150px;
    padding:.3em .6em .3em .6em;
    margin:.6em .6em .6em 0;
    }

div#protext{
    font-size:11px;
    text-align:left;
    margin:0 .6em 0 .6em;
    height:80px;
    background: #ffffff;
    padding:0 0 0 .6em;
    background-image:url(/images/images/bgwhite.jpg);
    background-repeat:repeat;
    }

    div#promoConditions{
    font-size:9px;
    text-align:left;
    line-height:100%;
    float:left;
    padding:0 .6em 0 .6em;
    margin:.6em 0 0 .6em;
    width:503px;
    }

    div#proContact{
    font-size:11px;
    text-align:left;
    font-weight:bold;
    text-transform:uppercase;
    background-image:url(/images/images/bgwhite.jpg);
    background-repeat:repeat;
    color:#CC6666;
    float:right;
    width:150px;
    padding:.3em .6em .3em .6em;
    margin:.6em .6em 0 0;
    }

Answer 2

¿Tiene un plugin como Firebug? Eso puede ayudar mucho en mostrar que las reglas que podrían ser sobrescribiendo el color de fondo.

Además, asegúrese de incluir el # antes de que sus números de color hexagonales. (Por ejemplo: #ffffff)

... Parece que está utilizando el ID para seleccionar el CSS, que es el más específico, por lo que sólo puede ser anulado por: 1) Identificación del otro selector más abajo en el CSS, o 2) un selector en cualquier parte del CSS tanto con un ID y un nombre de clase o una etiqueta, aumentando su especificidad. ( CSS especificidad hecho simple aquí )

Answer 3

Comprobar la segmentación, ... a veces la instrucción explícita a una clase o ID no es suficiente cuando se hereda los atributos de los padres.

Así como, especificando:

#yourid {background-color: #333;}

podría no ser suficiente si su padre tiene un backgound especificado.

Es posible que tenga que hacer element.ID como

div#yourid {background-color: #333;}

lo que me refiero?

EDIT:

Sí, se puede ver a los niños están heredando de #longBox. Es mejor para que usted apunte como he mencionado antes. Además, el hash / libra / cosas de tres en raya que faltan son necesarios para validar, pero la mayoría de los navegadores deben interpretar el bien CSS con formato incorrecto.