Table Cell Relative Positioning (solution)

Demonstrates a Firefox issue where a relatively-positioned block fails to serve as the positional parent of its absolutely-positioned children. The best solution I've been able to figure involves a lame wrapper <div>.

by ChaseMoskal

HTML

<div class="container">
    <p>Fails in Firefox.</p>
    <ul class="table">
        <li> <div class="icon"></div> </li>
        <li> <div class="icon"></div> </li>
        <li> <div class="icon"></div> </li>
        <li> <div class="icon"></div> </li>
    </ul>
</div>

<!--=>
    Above fails in Firefox.
    Below succeeds using a lame wrapper <div>.
</!-->

<div class="container">
    <p>Works in Firefox because of lame wrapper div.</p>
    <ul class="table firefox">
        <!--=>  Notice the wrapper <div>!  </!-->
        <li><div> <div class="icon"></div> </div></li>
        <li><div> <div class="icon"></div> </div></li>
        <li><div> <div class="icon"></div> </div></li>
        <li><div> <div class="icon"></div> </div></li>
    </ul>
</div>

CSS

* { margin:0; padding:0; }

.container { 
    position:relative; margin:10% auto; 
    width:96%; max-width:400px; 
    background:mistyrose; border:1px solid plum; }
    .container p { font-family:Arial; font-size:0.8em; padding:0 10%; }
    .table { 
        display:table; width:100%; 
        border-spacing:10px; }
        .table > li {
            position:relative; 
            display:table-cell; height:100px; 
            background:plum; }
            
            /*/ Firefox needs this lame wrapper /*/
            .table.firefox > li > div { position:relative; }

            .icon { 
                position:absolute; top:0; left:0; 
                width:20px; height:20px; background:purple; }