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

SELF-Forum

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

Joachim Homepage des Autors
– Informationen zu den Bewertungsregeln

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.
Beitrag melden
–
Informationen zu den Bewertungsregeln

  1. gefloatete Elemente in li erzeugen bottom-Abstände bei ie6/ie7

    molily Homepage des Autors
    +1 Informationen zu den Bewertungsregeln

    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

    Beitrag melden
    +1
    Informationen zu den Bewertungsregeln

    1. gefloatete Elemente in li erzeugen bottom-Abstände bei ie6/ie7

      Joachim Homepage des Autors
      – Informationen zu den Bewertungsregeln

      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.
      Beitrag melden
      –
      Informationen zu den Bewertungsregeln