Фоновые изображения div отображаются, но цвет фона нет

Question

У меня небольшая проблема с CSS.

У меня есть серия многоуровневых элементов div, и я установил стили классов div, и все они отображаются (отступы, цвета шрифта и т. д.).Однако цвет фона не будет работать для наложенных элементов div.

В качестве теста я попытался установить границу и стили границ, и все они тоже работали, за исключением цвета границы, который не отображался, а граница с дополнительным стилем оставалась черной.

Каждый div имеет уникальный идентификатор, а те, у которых цвет фона не работает, вложены (рядом) в контейнер div.Я пытался понять, принимают ли вложенные элементы цвета фона родительских элементов, но я пытался изменить переполнение родительского элемента, и это не оказало никакого влияния.

В качестве обходного пути я создал jpg размером 1 x 1 пиксель правильного цвета фона и установил фоновое изображение divs, и это сработало.Но это хак, и мне не лучше знать, почему все элементы стиля работают, кроме цвета фона.

Надеюсь, я достаточно объяснил свою ситуацию, если кто-нибудь сможет мне помочь, буду признателен.

(также, в качестве дополнения, я использую Dreamweaver для написания кода, и цвета фона отображаются в режиме предварительного просмотра, но не отображаются в Firefox, Chrome или IE)

Запрошенный код:

      <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

Причина, по которой изображения работают, заключается в том, что они являются новыми атрибутами, определенными для дочернего элемента.У родителя никогда не было IMG для BG, поэтому использование хака с цветными пикселями 1x1 наверняка сработает, когда вы выйдете из структуры наследования.В любом случае:

Попробуйте следующее:

     #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

У вас есть такой плагин, как Firebug?Это может очень помочь вам показать правила, которые могут перезаписывать цвет фона.

Кроме того, убедитесь, что вы включили # перед вашими шестнадцатеричными числами цветов.(например: #ffffff)

...Похоже, что вы используете идентификатор для выбора CSS, который является наиболее конкретным, поэтому его можно переопределить только:1) другой селектор идентификатора ниже в CSS или 2) селектор в любом месте CSS с идентификатором и именем класса или тега, что увеличивает его специфичность.(Специфика CSS здесь упрощена)

Answer 3

Проверьте таргетинг...иногда явной инструкции для класса или идентификатора недостаточно, когда он наследует родительские атрибуты.

Например, указав:

#yourid {background-color: #333;}

может быть недостаточно, если для его родителя указан фон.

Возможно, вам придется сделать element.ID, например

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

Поймать мой дрейф?

РЕДАКТИРОВАТЬ:

Да, я вижу, что дети наследуют от #longBox.Лучше всего нацеливаться, как я уже упоминал ранее.Кроме того, недостающие элементы хэша/фунта/крестиков-ноликов должны быть проверены, но большинство браузеров должны нормально интерпретировать искаженный CSS.