Joachim: gefloatete Elemente in li erzeugen bottom-Abstände bei ie6/ie7

Beitrag lesen

Hi all,

ich bin hier grade über einen ie-Bug (6/7) gestolpert, der sich zwar mit margin-bottom für li beheben lässt, aber dennoch wurmt es mich hier wieder extra-Angaben machen zu müssen. Gibts da was eleganteres, was ich vergessen habe?

Grundsätzlich gehts um gefloatete Elemente innerhalb von li, hier etwas Beispielcode, man beachte die unmotivierten Bottom-Abstände, vermutlich reserviert ie hier Platz für Unterlängen...

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd">
<html>
<head>
<style type="text/css">
    ul, li {
        list-style: none;
        margin: 0;
        padding: 0;
    }

li {
        overflow: hidden;
        zoom: 1;
        background: green;
        border-bottom: 1px solid #000;
    }

li div {
        display: block;
        height: 90px;
        width: 130px;
        background: red;
        float: left;
    }

/* der fix....
    * + html li {
        margin: 0 0 -4px 0;
    }

* html li {
        margin: 0 0 -4px 0;
    }
    */

</style>
</head>
<body>
    <div id="main">
        <ul>
            <li><div></div></li>
            <li><div></div></li>
            <li><div></div></li>
            <li><div></div></li>
        </ul>
    </div>
</body>
</html>

Gruesse, Joachim

--
Am Ende wird alles gut.