FF / chrome中的背景颜色样式 [英] Background-color style in FF/chrome
问题描述
有没有人知道为什么我的'container' div 没有显示它的父类的白色bg颜色 div s？我从CSS body设置中获取黑色（我的示例中为Lime以获得更好的描述）bg-color。
请原谅这种粗糙的样式。我尽我所能减少代码和显示相关的东西。 BTW，我试过制作'容器'div和它的孩子divs的风格bg颜色白色;它仍然不工作。当我给最高的div一个大的高度属性（比如1000px），它显示白色到那一点，但我想我不必这样做。它应该是动态的：当div内的控件展开时，div的高度也应该展开。我有很多页这样，但没有这个问题.. 但这是唯一的pg，我尝试列div。它发生在我的'容器'div列的开始（见图）。并且，这发生在FF和chrome。它在IE中正常工作
< head runat =server>
< title> Loaner Transfer< / title>
< link rel =stylesheettype =text / csshref =../ styles / BodyLayout.css/>
< link rel =stylesheettype =text / csshref =../ styles / columns.css/>
< meta http-equiv =Content-Script-Typecontent =text / javascript/>
< script language =javascripttype =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 =form1runat =server>
< ajx：ToolkitScriptManager ID =ToolkitScriptManager1runat =server>
< / ajx：ToolkitScriptManager>
< img src =../ images / _Logo.gifalt =Logo/>< br />
< UI：标题ID =UIHeaderrunat =server/>
< UI：Menu ID =UIMenurunat =server/>
< center>
< h1>转移贷款项目< / h1>
< asp：Label ID =lblStatusrunat =serverForeColor =red>< / asp：Label>
< br />
< asp：ValidationSummary ID =ValidationSummary1runat =serverValidationGroup =ISO/>
< asp：ValidationSummary ID =ValidationSummary3runat =serverValidationGroup =add/>
< asp：ValidationSummary ID =ValidationSummary2runat =serverValidationGroup =header/>
< / center>
< br />
< div id =containerstyle =width：1140px;>
< div id =col1style =width：400px;>
< h2 style =text-decoration：underline; text-align：center;>搜索并选择要传输的项目< / h2>
< div style =margin-left：25px;>
< asp：Label ID =Label1runat =serverFont-Bold =trueText =Pull ISO>< / asp：Label&
< asp：CustomValidator ID =CVSearchrunat =serverErrorMessage =ISO条目无效。
ControlToValidate =txtSearchISOValidationGroup =ISOValidateEmptyText =true
ClientValidationFunction =CheckMyText> *< / asp：CustomValidator>
< asp：TextBox ID =txtSearchISOrunat =serverWidth =50px>< / asp：TextBox>
< asp：Button ID =btnSearchISOrunat =serverText =Go！ ValidationGroup =ISOOnClick =btnSearchISO_Click/>
< asp：Label ID =lblHidISOrunat =serverText = - 1Visible =false>< / asp：Label>
< br />
< br />
< table>
.....
< / table>
< br />
< center>
< asp：DataGrid .............................< / asp：DataGrid>
< / center>
< / div>
< div id =col2outerstyle =width：710px;>
< center>
<！ - 表，控件等 - >
< / 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：
就像您只需清除浮动广告。
你可以通过添加 overflow：hidden 到 #container
学习如何以及何时清除浮动是CSS的重要组成部分。如果你能尽快掌握它，而不是以后，你会为自己节省很多困惑。
Does anyone know why my 'container' div isn't showing the white bg-color from it's parent divs? I'm getting the black (Lime in my example for better description) bg-color from the CSS body setting.
Please excuse the sloppy styling. I did my best to reduce the code and show relative stuff. BTW, I've tried making the 'container' div and it's child divs' style bg-color white; and it still doesn't work. When I give the highest div a large height attribute (say 1000px), it shows white to that point, but I thought I didn't have to do that. It should be dynamic: as the controls within the div expand, the divs height should expand as well. I have many pages like that, but don't have this problem.. but this is the only pg where I attempt column divs. And it happens right when my 'container' div for the columns start (see pic). and yea, this happens in FF and chrome. it works fine in 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>
Here is my 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;
}
Here is a ss:
It looks like you simply need to clear your floats.
You can do this by adding overflow: hidden to #container (or perhaps #divBody).
Some further information about clearing floats:
Learning how and when to clear floats is an important part of CSS. You'll save yourself a lot of confusion if you get to grips with it sooner rather than later.
这篇关于FF / chrome中的背景颜色样式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
