Relative positioned child whithin a relative positioned parent disappears in IE7

Question

Hello all,

For few days i'm looking for a good solution for my problem, but with no success.

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 li elements contain a span, but the first one is the only different one, which is relatively positioned.

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

Hope that I was clear enough, and that my english is enough readable.

Thanks all.

Answer 1

If you must require the position relatives, change float to inline-block. The float is a factor in this as well.

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