2011-05-10 2 views
0

누군가 내 '컨테이너'인 div이 부모로부터 흰색 bg 색상을 표시하지 않는 이유를 알고 있습니까 div? CSS 바디 설정에서 검정색 (더 나은 설명을위한 예제에서는 라임) bg-color가 나타납니다.
FF/chrome의 배경색 스타일

부주의 한 스타일을 남겨주세요. 나는 코드를 줄이고 상대적인 것을 보여주기 위해 최선을 다했다. BTW, 나는 '컨테이너'div 만들기 시도하고 그것은 자식 divs '스타일 bg- 색상 흰색; 여전히 작동하지 않습니다. 가장 높은 div에 큰 height 속성 (예 : 1000px)을 지정하면 해당 지점까지 흰색이 표시되지만이를 수행 할 필요가 없다고 생각했습니다. 동적이어야합니다. div 내 컨트롤이 확장되면 div 높이도 확장되어야합니다. 그런 페이지가 많지만이 문제는 없습니다. 그러나 이것은 열 div를 시도하는 유일한 페이지입니다. 그리고 바로 컬럼의 'container'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입니다 : 당신은 단순히 clear your floats 필요 같은 enter image description here

답변

2

것 같습니다.

overflow: hidden#container (또는 아마도 #divBody)을 추가하면됩니다.

삭제 수레에 대한 몇 가지 추가 정보 : 어떻게 수레을 취소하는

학습 CSS의 중요한 부분입니다. 나중에 혼란에 빠지면 빨리 혼란에 빠지면 많은 혼란을 피할 수 있습니다. 당신이 시도

+0

O_O 당신을 감사이 .. –

1

이나요 :이 문제를보고 해결 이유를 들어

#container { 
    overflow: auto; 
} 

: 이상하게도, 오버 플로우를 설정

하나 더 인기가 사용하는, float 지움입니다. 오버플로를 설정해도 요소에서 부동을 지우지 못하면 이 자동으로 지워집니다.

기본적으로 IE는 블록 요소에 대해이 동작을 기본값으로 사용하며 FF/Webkit (Chrome/Safari)은 그렇지 않습니다.

  • All About Floats - 피투성이 세부 사항은, 나는 그것이 때문에 당신의 수레의 생각
0

를 절 "지우기 수레위한 기술"을 참조하십시오.시도해 볼 수있는 것은 컨테이너 div의 닫는 태그 아래에

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

을 추가하는 것입니다.

다음 CSS에서

div.clearFloat { clear: both; }