Search code examples
cssinternet-explorer-7css-positioninternet-explorer-6

Relative positioned child within a relative positioned parent disappears in IE7

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.

Solution

  • 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/