Der folgende Beitrag wurde am 24. 08. 2010, 09:50 Uhr von Joachim veröffentlicht.
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.
Der folgende Beitrag wurde am 26. 08. 2010, 02:41 Uhr von molily veröffentlicht.
> 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
Der folgende Beitrag wurde am 26. 08. 2010, 09:37 Uhr von Joachim veröffentlicht.
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.
© 1998-2013 SELFHTMLImpressumSoftware: Classic Forum 3.4
