CSS List strange behaviour

Question

Hello all,

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>
    </li>
</ul>

This is my output:

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)

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)

Answer 1

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.