div Hintergrundbilder zeigen, aber die Hintergrundfarbe nicht

Question

Ich bin eine kleine CSS-Problem haben.

Ich habe eine Reihe von geschichteten divs und ich habe Set div class Stile und sie zeigen sich alle (padding, Schriftfarben, etc). Allerdings ist die Hintergrundfarbe wird nicht Arbeit für die Überlagerung divs.

als Test habe ich versucht, eine Grenze und Stile Grenze zu setzen, und sie alle arbeiteten auch, mit Ausnahme der Grenze Farbe, es zeigte sich nicht und die Grenze mit dem zusätzlichen Styling blieb schwarz.

Jedes div hat eine eindeutige ID, und diejenigen, bei denen die Hintergrundfarbe sind nicht berufstätig sind verschachtelt (nebeneinander) in einem Behälter div. Ich habe versucht, wenn die verschachtelten divs zu verstehen, die Eltern divs Hintergrundfarbe nehmen, aber ich habe versucht, den Überlauf fo die Eltern zu ändern, und es hat keine Auswirkungen auf.

Als eine Arbeit um Ich habe eine 1 x 1 Pixel jpg des richtigen Hintergrundfarbe und stellen Sie den divs Hintergrundbild, das funktionierte. Aber es ist ein Hack, und ich bin nicht besser zu wissen, warum all die Stilelemente der Arbeit, mit Ausnahme der Hintergrundfarbe.

Ich hoffe, ich habe meine Situation ausreichend erklärt, wenn mir jemand helfen kann ich es schätzen würde.

(auch als Zusatz, ich benutze Dreamweaver Code schreiben und die Hintergrundfarben zeigen im Vorschaumodus, aber nicht zeigen, in firefox up, Chrom, oder IE)

Angeforderte Code:

      <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

Der Grund, warum die Bilder arbeiten, weil sie neue attribs sind für das Kind definiert. Die Eltern nie eine IMG für eine BG hatte, so das 1x1 farbigen pxel Hack wird sicherlich arbeiten, wie Sie von Vererbungsstruktur raus. Wie auch immer:

Versuchen Sie Folgendes:

     #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

Haben Sie ein Plugin wie Firebug? Das kann viel helfen Sie alle Regeln zeigen, dass die Hintergrundfarbe werden überschreiben könnten.

Stellen Sie außerdem sicher schließen Sie die # vor Ihrer hex Farbnummern. (ZB: #ffffff)

... Es sieht aus wie Sie die ID verwenden die CSS zu wählen, die die spezifisch ist, so dass er nur durch sein überschrieben: 1) eine andere ID-Selektor weiter unten in der CSS, oder 2) einen Selektor überall in dem CSS sowohl mit einer ID und einer Klasse oder einem Tag-Namen, seine Spezifität zu erhöhen. ( CSS Spezifität leicht gemacht hier )

Answer 3

Überprüfen Sie Ihre Ausrichtung ... manchmal die explizite Anweisung zu einer Klasse oder ID ist nicht genug, wenn es erbt Eltern Attribute.

So wie unter Angabe:

#yourid {background-color: #333;}

möglicherweise nicht genug sein, wenn seine Eltern ein backgound haben angegeben.

Sie müssen möglicherweise element.ID wie

tun

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

Catch meine Drift?

EDIT:

Ja, kann ich die Kinder sehen, werden von #longBox vererben. Am besten ist es für Sie, wie ich bereits erwähnt Ziel. Außerdem werden die fehlenden hash / Pfund / Tic Tac Toe Dinge zu validieren erforderlich, aber die meisten Browser sollten die fehlerhafte CSS ok interpretieren.