2011-05-10 126 views
0

有誰知道爲什麼我的'容器'div未顯示其父母div s的白色bg顏色?我從CSS body設置中獲取黑色(我的示例中爲Lime,以便更好地描述)bg-color。
FF/chrome中的背景顏色風格

請原諒馬虎的造型。我盡我所能減少代碼並顯示相關內容。順便說一句,我已經嘗試製作'容器'div,它的子div's風格bg-color white;它仍然不起作用。當我給最高分區一個大的height屬性(比如1000px)時,它顯示白色,但我認爲我不必那樣做。它應該是動態的:隨着div內的控件擴展,divs高度也應該擴展。我有很多這樣的網頁,但沒有這個問題.. 這是唯一的一個pg,我嘗試列divs。當我的'容器'列的div開始時,它就會發生(請參閱圖片)。而且,這發生在FF和鉻。在IE中

<head runat="server"> 
    <title>Loaner Transfer</title> 
    <link rel="stylesheet" type="text/css" href="../styles/BodyLayout.css" /> 
    <link rel="stylesheet" type="text/css" href="../styles/columns.css" /> 
    <meta http-equiv="Content-Script-Type" content="text/javascript" /> 
    <script language="javascript" type="text/javascript"> 
    .... 
    </script> 
</head> 
<body> 
    <center> 
    <div style="text-align:left; width:1160px; background-color:White; border-bottom-width:25px;"> 
    <div id="divBody"> 
    <form id="form1" runat="server"> 
     <ajx:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server"> 
     </ajx:ToolkitScriptManager> 
     <img src="../images/_Logo.gif" alt="Logo" /><br /> 
     <UI:Header ID="UIHeader" runat="server" /> 
     <UI:Menu ID="UIMenu" runat="server" /> 
     <center> 
     <h1>Transfer Loaned Items</h1> 
     <asp:Label ID="lblStatus" runat="server" ForeColor="red"></asp:Label> 
     <br /> 
     <asp:ValidationSummary ID="ValidationSummary1" runat="server" ValidationGroup="ISO" /> 
     <asp:ValidationSummary ID="ValidationSummary3" runat="server" ValidationGroup="add" /> 
     <asp:ValidationSummary ID="ValidationSummary2" runat="server" ValidationGroup="header" /> 
     </center> 
     <br /> 
     <div id="container" style="width:1140px;"> 
     <div id="col1" style="width:400px;"> 
      <h2 style="text-decoration:underline; text-align:center;">Search and select items to transfer</h2> 
      <div style="margin-left:25px;"> 
      <asp:Label ID="Label1" runat="server" Font-Bold="true" Text="Pull ISO"></asp:Label> 
      <asp:CustomValidator ID="CVSearch" runat="server" ErrorMessage="Invalid ISO entry." 
       ControlToValidate="txtSearchISO" ValidationGroup="ISO" ValidateEmptyText="true" 
       ClientValidationFunction="CheckMyText">*</asp:CustomValidator> 
      <asp:TextBox ID="txtSearchISO" runat="server" Width="50px"></asp:TextBox> 
      <asp:Button ID="btnSearchISO" runat="server" Text="Go!" ValidationGroup="ISO" OnClick="btnSearchISO_Click" /> 
      <asp:Label ID="lblHidISO" runat="server" Text="-1" Visible="false"></asp:Label> 
      <br /> 
      <br /> 
      <table> 
      ..... 
      </table> 
      <br /> 
      <center> 
      <asp:DataGrid.............................</asp:DataGrid> 
      </center> 
     </div> 
     <div id="col2outer" style="width:710px;"> 
     <center> 
     <!--tables, controls, etc--> 
     </center> 
     </center>  
     </div> 
     </div> 
    </form> 
    </div> 
    </div> 
    </center> 
</body> 

這裏是我的CSS工作正常:

body 
{ 
    background-color:Black; 
} 
body.comp 
{ 
    background-color:#F5FCFF; 
} 
#divBody 
{ 
    margin-left:25px; 
} 
#divTrans 
{ 
    margin:15px; 
} 

#container #col1 
{ 
    float: left; 
} 

#container #col2outer 
{ 
    float: right; 
} 

#container #footer 
{ 
    text-align:center; 
    float: left; 
    width: 870px; 
} 

這裏是一個SS: enter image description here

回答

2

它看起來像你只需要clear your floats

您可以通過將overflow: hidden添加到#container(或者可能是#divBody)來完成此操作。

有關清除浮動一些進一步的信息:

學習如何以及何時清除浮動是CSS的一個重要組成部分。如果你早點掌握它,你會爲自己節省很多困惑。

+0

O_O謝謝你.. – 2011-05-10 21:47:31

1

你嘗試:

#container { 
    overflow: auto; 
} 

爲什麼這解決了問題,請參閱:設置 溢出,很奇怪的

一個更受歡迎的用途,是浮動的 清除。設置溢出沒有清除浮點在元素 自清零。

從我記得IE瀏覽器默認爲塊元素的這種行爲和FF/Webkit(Chrome/Safari)沒有。

  • All About Floats - 血淋淋的細節,請參見「用於清除浮動技術」
0

我想這是因爲你的花車。有些事情,你可以嘗試是添加

<div class="clearFloat"></div> 

的div容器的關閉標籤下。

然後在你的CSS有

div.clearFloat { clear: both; }