images de fond div montre, mais la couleur de fond ne pas

Question

Je vais avoir un problème mineur css.

J'ai une série de couches et divs j'ai mis en div styles de classe et ils ont tous apparais (rembourrage, les couleurs de police, etc.). Cependant, la couleur de fond ne fonctionnera pas pour les divs superposant.

comme un test, j'ai essayé de définir un style à la frontière et la frontière, et ils ont tous travaillé aussi bien, à l'exception de la couleur de la bordure, il ne se présente pas et la frontière avec le style supplémentaire resté noir.

Chaque div a un identifiant unique, et ceux où l'arrière-plan de couleur ne fonctionnent pas sont imbriqués (côte à côte) dans un conteneur div. J'ai essayé de comprendre si les divs imbriqués prennent la couleur de fond de divs mère, mais je l'ai essayé de changer le débordement fo parent, et il n'a pas eu aucun effet.

En tant que travail autour j'ai créé un 1 x 1px jpg de la couleur de fond correct et définir l'image d'arrière-plan divs, qui a travaillé. Mais il est un hack, et je ne suis pas mieux savoir pourquoi tous les éléments de style de travail, sauf la couleur de fond.

J'espère avoir suffisamment expliqué ma situation, si quelqu'un peut me aider je l'apprécierais.

(aussi, en plus, j'utilise dreamweaver d'écrire du code et les couleurs de fond apparaissent dans le mode de prévisualisation, mais ne montre pas dans Firefox, Chrome ou IE)

du Code a demandé:

      <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 raison pour laquelle les images travaillent est parce qu'ils sont nouveaux attribs définis à l'enfant. Le parent n'a jamais eu un IMG pour un BG, donc en utilisant le hack pxel 1x1 de couleur va certainement travailler comme vous sortez de la structure d'héritage. Quoi qu'il en soit:

Effectuez les opérations suivantes:

     #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

Avez-vous un plugin comme Firebug? Cela peut aider beaucoup à vous montrer des règles qui pourraient remplacerez la couleur d'arrière-plan.

Aussi, assurez-vous d'inclure la # avant vos numéros de couleur hexagonaux. (Par exemple: #ffffff)

... On dirait que vous utilisez l'identifiant pour sélectionner le CSS, qui est le plus spécifique, il ne peut être remplacé par: 1) un autre sélecteur identifiant plus bas dans le CSS, ou 2) un sélecteur partout dans le CSS à la fois un identifiant et un nom de classe ou une étiquette, ce qui augmente sa spécificité. ( spécificité CSS en toute simplicité )

Answer 3

Vérifiez votre ciblage ... parfois l'instruction explicite à une classe ou d'ID ne suffit pas quand il hérite des attributs parent.

Donc, comme, en spécifiant:

#yourid {background-color: #333;}

pourrait ne pas être suffisant si son parent a un backgound spécifié.

Vous devrez peut-être faire comme element.ID

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

attrapez ma dérive?

EDIT:

Oui, je peux voir les enfants héritant de #longBox. Il est préférable pour vous de cibler comme je l'ai mentionné auparavant. De plus, les choses hachage / livre / de tic tac toe manquants sont nécessaires pour valider, mais la plupart des navigateurs doivent interpréter la malformé CSS ok.