Thread

Hey guys, I need some of your expert advice here, as I’ve tried pretty much everything I can think of (and Google)!

I’ve got a product list consisting of a UL with severeal LI with every 8th LI acting as a divider and helping to clear the floated LI’s.
The divider appears in IE7, but for some reason it doesn’t clear the floats, and it shows up 10px high.

Now, I’m aware of the height-and-float issue in IE7, so I’m using only min-height for these items, yet that doesn’t seem to help!

I’ve attached a screen shot of the…well, mess 😛

Thanks in advance!

The markup

<div class="section" id="productList">
    <ul>
        <li class="{product_switch="first||||||last"}">

        </li>
        {product_switch='||||||<li class="productDivider"></li>'}
    </ul>
</div>

The styles

div#productList { background: transparent url(/images/structure/divider_products.gif) repeat-y left top; padding: 0; zoom: 1; }

#productList li { display: inline; float: left; width: 147px; padding: 0 12px; min-height: 400px; }

#productList li.first { clear: left; width: 149px; }

#productList li.productDivider { background-color: #999; float: left; clear: both; min-height: 1px; width: 1200px; margin: 10px 0; padding: 0; }

Semantically, it seems like it would be better to get rid of the divider li element and instead add a 10px border to the top of every li element. Then your li elements should just wrap around to the next line after they reach the limit of the container element.

I often find that using “display: inline-block;” in IE7 works for issues like this.

IE7 and inline-block are a little weird.

Thanks for your advice guys!
As it turns out - after giving this another go today, the culprits were indeed the display mode and float.

After changing my divider li from “display: inline; float: left” to “display: block; float: none;”, the rest of the li’s lined up like a charm 😊

Ah of course! Haha. So simple once you know how.

Well done Andre!