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

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.
  1. dennoch wurmt es mich hier wieder extra-Angaben machen zu müssen. Gibts da was eleganteres, was ich vergessen habe?

    Ich denke nicht. Extra-Angaben kannst du hier m.W. nicht vermeiden.

    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...

    Ja, richtig vermutet. IE erzeugt da wohl eine Art Line-Box und positioniert das Float auf der Baseline. Daher hilft:

    li div {  
      vertical-align:top; /* oder bottom, jedenfalls nicht baseline */  
    }
    

    Alternativ könntest du im IE 7 auf Floats verzichten zugunsten von Inline-Elementen mit hasLayout. Die verhalten sich ähnlich zu Floats und entsprechend grob dem, was CSS-konforme Browser als inline-block kennen.

    li div {  
      float: none;  
      display: inline;  
      zoom: 1;  
      height: 90px;  
      width: 130px;  
      background: red;  
    }
    

    Dritte Möglichkeit: Das li von display:block auf display:inline umstellen, aber hasLayout erhalten und die Breite auf 100% setzen.

    li {  
      display: inline;  
      width: 100%;  
      zoom: 1;  
      ..  
    }
    

    Gut, das ist jetzt auch nicht sonderlich eleganter, aber das sind Workarounds, die ich häufiger gebraucht habe. Negative Margins würde ich möglichst vermeiden, zumal das Problem hier auf Phantom-Line-Boxen eingrenzbar ist.

    Mathias

    1. Hi Mathias,

      vertical-align:top; /* oder bottom, jedenfalls nicht baseline */

      Sehr genial! Mit inline-block hatte ich auch experimentiert, aber die "Restkonstruktion" erzeugte dann im ie andere Probleme. vertical-align ist in der Tat schöner als Minus-margins.

      Danke & Gruesse, Joachim

      --
      Am Ende wird alles gut.