CSS List strange behaviour
I have the following CSS:
div#topWrap div#advancedSearchWrap
{
width:738px;
border:solid 1px #dadada;
background-color:#fffcd9;
margin-top:4px;
padding:10px;
display:none;
}
div#topWrap div#advancedSearchWrap ul
{
width:798px;
margin:-20px 0 0 -60px;
float:left;
}
div#topWrap div#advancedSearchWrap ul li
{
margin-left:60px;
display:inline;
float:left;
background-color:Red; /*<- for viewing purposes*/
}
div#topWrap div#advancedSearchWrap ul li h6
{width:auto; float:none;}
To the following XHTML:
<ul>
<li>
<h6> XXX </h6>
<asp:TextBox ID="txtXXX" runat="server" Width="332"></asp:TextBox>
</li>
<li>
<h6> XXX </h6>
<asp:DropDownList ID="ddlXXX" runat="server" Width="338">
<asp:ListItem Text="XXX" Value="XXX"></asp:ListItem>
</asp:DropDownList>
</li>
<li>
<h6> XXX </h6>
<asp:DropDownList ID="ddlXXX" runat="server" Width="338">
</asp:DropDownList>
</li>
<li>
<h6> XXX </h6>
<asp:TextBox ID="txtXXX" runat="server" Width="332"></asp:TextBox>
</li>
<li>
<h6> XXX </h6>
<asp:RadioButtonList ID="rbXXX" runat="server" RepeatDirection="Horizontal" Width="338">
<asp:ListItem Text=" XXX " Value="0"></asp:ListItem>
<asp:ListItem Text=" XXX " Value="1"></asp:ListItem>
</asp:RadioButtonList>
</li>
<li>
<h6> XXX </h6>
<asp:TextBox ID="txtXXX" runat="server" Width="332"></asp:TextBox>
</li>
<li>
<h6> XXX </h6>
<asp:TextBox ID="txtXXX" runat="server" Width="332"></asp:TextBox>
</li>
<li>
<h6> XXX </h6>
<asp:TextBox ID="txtXXX" runat="server" Width="332"></asp:TextBox>
</li>
<li>
<h6> XXX </h6>
<asp:TextBox ID="txtXXX" runat="server" Width="332"></asp:TextBox>
</li>
<li>
<h6> XXX </h6>
<asp:TextBox ID="txtXXX" runat="server" Width="332"></asp:TextBox>
开发者_C百科 </li>
</ul>
This is my output:
alt text http://img109.imageshack.us/img109/6909/79978930.jpg
However I have the exactly same thing on other page, exept the two DropDownList controls ( = to Select).
That page renders like this: (which is the correct way)
alt text http://img513.imageshack.us/img513/8169/ss2x.jpg
I have removed the two problematic controls... and it is fine. But I do not see what CSS proprieties shall I use to solve this problem. The problem happens in all Browsers (IE7, IE8, Google Chrome, FireFox, etc)
I just fixed it myself.
The solution was adding a "min-height" to the "div#topWrap div#advancedSearchWrap ul li". It also works with "height", but since I have dinamic content I choosed "min-height".
Thx anyway to everyone who tried it. Honestly, I really do apreciate your time and effort.
精彩评论