Relatively spaced child in relative positioned parent disappears in IE7

Question

Here is my code:

<ul style="list-style: none; position: relative;">
    <li style="float: left;"><span style="position: relative; left: 5px; ">one</span></li>
    <li style="float: left;"><span>two</span></li>
    <li style="float: left;"><span>three</span></li>
</ul>

All elements licontain span, but the first of them is different from the other.

All browsers are fine with this, but only IE6 \ 7 makes the first span disappear - and this is my problem.

Answer 1

If you need position siblings, change the float to an inline block. The float is also a factor.

http://jsfiddle.net/zRYqh/5/