Question

I am having a problem with nesting lists in IE 7.

It seems that when I use the following structure (shorthand):

ul
  li
    input type='radio'
    label for='that input'
    ul
      li
        input type='radio'
        label for='that input'
        ul
          li
          etc...

I have an overflow:auto on the container of all this, but I get some odd behavior in IE 7 and only in IE 7. The radio buttons will not scroll with the text. The text moves when you scroll the container, but the radio buttons are stationary.

Any idea what could cause this? I’m sorry I cannot provide more code than this, but I have to deal with property rights and all that with my company.

I am also open to other possible solutions to a way to show this sort of hierarchical structure where each ‘spot’ has a radio button and a label, followed by its children a bit more indented than the last level.

Any help is much appreciated.

Answer 1

The solution:

I had a position:relative style on the input tag that was making it not move with the container. changed this to position:static, fixed everything.