Position:Absolute withing Position:Relative in Chrome

Question

I have made the cardinal mistake of not debugging on ALL browsers while designing my site. In Firefox (3.6.10) and IE8 the form elements show up fine but in chrome(10), only the position:absolute elements show up.

I have a form made from an unordered list. The list items are set up with position:relative. it contains a left floating label, right floating field and, potentially, an position:absolute widget.

HTML:

<form><ul>
    <li>
        <label>Name</label>
        <input type="text" />
        <a id="nameGenerator" class="widget"></a>
    </li>
</ul></form>

CSS:

form ul li{
    margin: 5px;
    clear: both;
    position:relative;
}
form label{
    float:left;
    margin-top: 0px;
    margin-bottom: 0px;
}
form input{
    float:right;
    margin-top: 0px;
    margin-bottom: 0px;
}
form .widget{
    position: absolute;
    top: 0;
    right: 0;
    z-index: 99;
}

I can "fix" this by removing the position:relative but that is unacceptable. Is there anything I can do to produce the desired results?

Answer 1

Add this to your css:

form ul li{
    overflow:auto;
}

http://jsfiddle.net/cTTVs/1/

Answer 2

Just add overflow:hidden to the form ul li rules. This works better than overflow:auto when clearing floats in many situations where scrollbars might appear in the element (possibly such as your 'widgets').

Update:

I had a thought that if your widget needs to show a list of things such as a suggestion box or date picker, you will be better NOT using overflow values to clear your floats. An alternative is the old clearfix hack which may be more suitable. Check out this demo which has a faux widget showing the different solutions and how a tall widget might work with them.

Demo: jsfiddle.net/Marcel/ghaHz