2009-11-23 237 views
2

我有一個小的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 &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; 
} 
+1

一些粘貼代碼將是很好的。最好沒有太多的絨毛,只是嘗試創建一個儘可能少的代碼的HTML文件,仍然會重現錯誤,並將它粘貼到pastebay.com上,如果它太長而不能在這裏發佈 – 2009-11-23 20:32:53

+0

我已經添加了所需的代碼。感謝您的關注 – Anthony 2009-11-23 21:16:10

+0

我一直將div的class屬性設置爲css中定義的類之一。 – ChadNC 2009-11-23 21:28:19

回答

1

圖像工作的原因是因爲它們是爲孩子定義的新屬性。父母從未擁有過一個BG的IMG,所以使用1x1彩色pxel黑客肯定會工作,因爲你擺脫了繼承結構。總之:

嘗試以下操作:

 #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; 
    } 
+0

謝謝。我認爲這是票。 – Anthony 2009-11-23 21:45:11

+0

我幾乎可以保證你在這裏添加了'div',而不是1px圖像。您不應該需要使用白色背景圖像。 – keithjgrant 2009-11-23 22:02:25

+1

啊,我明白了,這裏還有另一層次的血統,我起初沒有注意到。對孩子使用'background-image:none;'。 – keithjgrant 2009-11-23 22:14:26

0

你有類似Firebug插件?這可以幫助您向您展示任何可能覆蓋背景顏色的規則。

此外,請確保您的十六進制顏色編號之前包含#。 (例如:#ffffff

...它看起來像你使用id來選擇CSS,這是最具體的,所以它只能被覆蓋:1)另一個id選擇器在CSS ,或者2)CSS中任何地方的選擇器,包含一個id和一個類或標籤名稱,從而增加其特殊性。 (CSS specificity made simple here

0

檢查您的目標...有時候,當它繼承父屬性時,對類或ID的顯式指令是不夠的。

這麼喜歡,規定:

#yourid {background-color: #333;} 

可能不夠,如果它的父有指定的backgound。

你可能需要做element.ID像

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

明白我的意思?

編輯:

是的,我可以看到孩子們從#longBox繼承。正如我之前提到的那樣,最好是針對你。此外,缺少哈希/磅/井字遊戲的事情需要驗證,但大多數瀏覽器應該解釋格式錯誤的CSS確定。