immagini div sfondo mostra up, ma il colore di sfondo non lo fa

Question

Ho un problema css minore.

Ho una serie di div livelli e ho impostato div stili di classe e tutti presento (padding, colori dei caratteri, etc). Tuttavia, il background-color non funziona per i div Sovrapposizione.

come un test, ho cercato di impostare un bordo e di frontiera stili, e tutti hanno lavorato come bene, tranne il colore del bordo, non si è presentato e il confine con lo stile più rimasto nero.

Ogni div ha un ID univoco, e quelli in cui il background-color non funzionano sono annidati (fianco a fianco) in un div contenitore. Ho cercato di capire se i div annidati stanno prendendo il colore di sfondo genitore div, ma ho provato a cambiare l'overflow fo il genitore, e non ha avuto alcun effetto.

Per ovviare ho creato un 1 x 1px jpg del colore di fondo corretta e impostare l'immagine di sfondo div, che ha funzionato. Ma si tratta di un hack, e io non sono meglio sapere perché tutti gli elementi di stile di lavoro, ad eccezione del background-color.

Spero di aver spiegato la mia situazione a sufficienza, se qualcuno mi può aiutare sarei grato.

(anche, come aggiunta, io uso Dreamweaver per scrivere codice ei colori di sfondo visualizzato nella modalità di anteprima, ma non vengono visualizzati in Firefox, Chrome o IE)

Codice richiesta:

      <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 ragione le immagini stanno lavorando è perché sono nuovi attribs definite al bambino. Il genitore non ha mai avuto un IMG di BG, in modo da utilizzare il 1x1 colorato pxel mod sicuramente funzionerà come si ottiene dalla struttura di ereditarietà. Ad ogni modo:

Provare quanto segue:

     #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

Hai un plugin come Firebug? Che può aiutare molto a che vi mostra tutte le regole che potrebbero essere sovrascrivendo il colore di sfondo.

Inoltre, assicurarsi di includere il # prima che i vostri numeri di colore esadecimali. (Ad esempio: #ffffff)

... Sembra che si sta utilizzando l'ID per selezionare il CSS, che è la più specifica, in modo che possa essere sovrascritto solo da: 1) un altro selettore id più in basso nel CSS, o 2) un selettore in qualsiasi parte del CSS sia con un ID e un nome di classe o tag, aumentando la sua specificità. ( CSS specificità reso semplice qui )

Answer 3

Controlla il tuo targeting ... a volte l'istruzione esplicita a una classe o l'ID non è sufficiente quando si eredita attributi genitore.

Così come, specificando:

#yourid {background-color: #333;}

potrebbe non essere sufficiente se il suo genitore ha un backgound specificato.

Potrebbe essere necessario fare element.ID come

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

mi spiego?

EDIT:

Si, posso vedere i bambini sono eredita da #longBox. E 'meglio per voi di indirizzare come ho detto prima. Inoltre, le cose hash / pound / tic tac toe mancanti sono chiamati a validare, ma la maggior parte dei browser dovrebbe interpretare il malformati CSS ok.