我有一個小的CSS問題。div背景圖像顯示出來,但背景顏色不是
我有一系列的分層div,我設置了div class style,它們都顯示出來(填充,字體顏色等)。但是,背景顏色不適用於疊加div。作爲測試,我嘗試設置邊框和邊框樣式,除邊框顏色外,它們都工作得很好,沒有顯示出來,而且額外樣式的邊框保持黑色。
每個div都有一個唯一的ID,並且背景顏色不工作的那些嵌套(並排)在一個容器div中。我一直在試圖理解,如果嵌套的div是採取父div的背景顏色,但我試圖改變父母的溢出,並沒有任何影響。
作爲一項解決方案,我創建了1 x 1px jpg的正確背景色,並設置了divs背景圖像,這是工作的。但這是一種黑客行爲,我不知道爲什麼所有的樣式元素都能工作,除了背景顏色。
我希望我已經充分解釋了我的情況,如果有人能幫助我,我將不勝感激。
(也作爲另外,我用Dreamweaver中編寫代碼和背景顏色在預覽模式下顯示出來,但不要在Firefox,Chrome或IE顯示)
請求的代碼:
<div id="longBox">
<div id="specialLable"> Rent Specials & 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;
}
一些粘貼代碼將是很好的。最好沒有太多的絨毛,只是嘗試創建一個儘可能少的代碼的HTML文件,仍然會重現錯誤,並將它粘貼到pastebay.com上,如果它太長而不能在這裏發佈 – 2009-11-23 20:32:53
我已經添加了所需的代碼。感謝您的關注 – Anthony 2009-11-23 21:16:10
我一直將div的class屬性設置爲css中定義的類之一。 – ChadNC 2009-11-23 21:28:19