imagens de fundo div aparecem, mas a cor de fundo não

Question

Estou tendo um problema menor de CSS.

Eu tenho uma série de divs em camadas e defini estilos de classe Div e todos aparecem (preenchimento, cores de fonte, etc.). No entanto, a cor de fundo não funcionará para os divs sobrepostos.

Como teste, tentei definir um estilo de borda e fronteira, e todos eles também funcionaram, exceto a cor da borda, ela não apareceu e a fronteira com o estilo extra permaneceu preta.

Cada Div tem um ID único, e aqueles em que a cor de fundo não está funcionando são aninhados (lado a lado) em uma div contêiner. Eu tenho tentado entender se as divs aninhadas estão levando a cor dos pais dos pais, mas tentei mudar o estouro para o pai e isso não teve nenhum efeito.

Como um trabalho, criei um JPG de 1 x 1px da cor correta de fundo e defino a imagem de fundo DIVS, que funcionou. Mas é um hack, e não sou melhor saber por que todos os elementos de estilo funcionam, exceto a cor de fundo.

Espero ter explicado minha situação o suficiente, se alguém puder me ajudar, eu apreciaria.

(Além disso, como adição, eu uso o Dreamweaver para escrever código e as cores de fundo aparecem no modo de visualização, mas não apareça no Firefox, Chrome ou 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

A razão pela qual as imagens estão funcionando é porque são novos atributos definidos para a criança. O pai nunca teve um IMG para um BG, portanto, o uso do pxel hack de cor 1x1 certamente funcionará à medida que você sai da estrutura de herança. De qualquer forma:

Experimente o seguinte:

     #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

Você tem um plugin como o Firebug? Isso pode ajudar muito a mostrar todas as regras que possam estar substituindo a cor do plano de fundo.

Além disso, certifique -se de incluir o # Antes de seus números de cores hexadecipais. (por exemplo: #ffffff)

... Parece que você está usando o ID para selecionar o CSS, que é o mais específico, para que só possa ser substituído por: 1) outro seletor de identificação mais abaixo no CSS, ou 2) um seletor em qualquer lugar do CSS com um ID e uma classe ou nome de tag, aumentando sua especificidade. (Especificidade do CSS simplificada aqui)

Answer 3

Verifique sua segmentação ... às vezes, a instrução explícita para uma classe ou ID não é suficiente quando herda os atributos dos pais.

Assim, especificando:

#yourid {background-color: #333;}

Pode não ser suficiente se seu pai tiver uma letra de fundo especificada.

Você pode precisar fazer elemento.id como

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

Pegue minha deriva?

EDITAR:

Sim, eu posso ver que as crianças estão herdando de #longBox. É melhor você segmentar como eu mencionei antes. Além disso, são necessárias as coisas que faltavam hash/libra/tique tac de dedos para validar, mas a maioria dos navegadores deve interpretar o CSS malformado OK.