9

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?

5
  • And which are the desired results? Maybe set up and example?
    – easwee
    Commented Mar 17, 2011 at 12:18
  • @Myles, it is unacceptable because it causes all the absolutely position elements to stick to the top of the screen, not stay in their respective list item. Commented Mar 17, 2011 at 12:18
  • @Myles Gray - position:static is default positioning - not relative. He needs the li's to be relative since each has to be it's own parent to the widget else it gets positioned relative to the body not li.
    – easwee
    Commented Mar 17, 2011 at 12:18
  • 3
    @Myles Gray: I believe the default for position is generally static.
    – Marcel
    Commented Mar 17, 2011 at 12:19
  • 1
    @Myles Gray: the default positioning is static Commented Mar 17, 2011 at 12:19

3 Answers 3

11

Add this to your css:

form ul li{
    overflow:auto;
}

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

3
  • 2
    What in the name of.... Thank you but how in heavens name did this work? It looks fine now, I just cant understand why. Commented Mar 17, 2011 at 12:20
  • 3
    Because the floating and absolutely positioned elements make the surrounding element empty of naturally flowing elements. Only regular elements make the surrounding stretch to fit the content, this is a known 'issue' (or actually, normal behaviour) with floating. Another solution would have been to add a div inside each list item with a clear:both on it Commented Mar 17, 2011 at 12:23
  • Well thank you, you rock indescribably hard. I was worried about redoing all 20 pages of my web app... which consist entirely of forms. Commented Mar 17, 2011 at 12:28
7

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

0
0

Add overflow:visible and it will solve your problem.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.