IE 6: falscher oberer Abstand einer Box nach einer gefloateten
Gunnar Bittersmann
2 
molily
1
IE 6: falscher oberer Abstand einer Box nach einer gefloateten
Gunnar Bittersmann
@@alle:
HTML der Testseite 1:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>TEST</title>
<link rel="stylesheet" type="text/css" href="1.css"/>
</head>
<body>
<ul>
<li>
<img src="test.png" alt=""/>
<h2>Lorem ipsum</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
</li>
<li>
<img src="test.png" alt=""/>
<h2>Lorem ipsum</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
</li>
</ul>
</body>
</html>
ul
{
list-style: none;
margin: 0;
padding: 0;
}
li
{
border-bottom: 1px solid black;
clear: left;
margin: 0;
overflow: hidden;
padding: 1em 0;
}
img
{
float: left;
margin: 0 1em 0 0;
}
h2, p
{
margin: 0;
}
Im IE 6 hat die Überschrift fälschlicherweise einen oberen Abstand: Screenshot 1.
Warum? Wie ist dem zu begegnen?
Der Zusatz von
li
{
float: left;
}
(Testseite 2, Stylesheet 2) löst zwar das Problem für das erste Listitem, schafft aber ein neues fürs zweite: Screenshot 2.
Lässt sich das irgendwie anders beheben als durch Angabe einer Breite?
Live long and prosper,
Gunnar
--
Das einzige Mittel, den Irrtum zu vermeiden, ist die Unwissenheit. (Jean-Jacques Rousseau)
Das einzige Mittel, den Irrtum zu vermeiden, ist die Unwissenheit. (Jean-Jacques Rousseau)
-
Der Zusatz von float: left; löst zwar das Problem
Lässt sich das irgendwie anders beheben als durch Angabe einer Breite?
Mit beidem schaltes du hasLayout an. Das kannst du auch direkt mit zoom: 1, et voilà.
Mathias
-
Hi,
Lässt sich das irgendwie anders beheben als durch Angabe einer Breite?
ja. Die <li>-Elemente benötigen im IE 6 hasLayout, was auch durch Angabe einer height!=auto getriggert wird. Da overflow=visible ist, ist ein kleiner Wert adäquat, denn der IE vergrößert ihn automatisch.
Cheatah
--
X-Self-Code: sh:( fo:} ch:~ rl:| br:> n4:& ie:% mo:) va:) de:] zu:) fl:{ ss:) ls:~ js:|
X-Self-Code-Url: http://emmanuel.dammerer.at/selfcode.html
X-Will-Answer-Email: No
X-Please-Search-Archive-First: Absolutely Yes-
@@Cheatah:
ja. Die <li>-Elemente benötigen im IE 6 hasLayout, was auch durch Angabe einer height!=auto getriggert wird. Da overflow=visible ist, ist ein kleiner Wert adäquat, denn der IE vergrößert ihn automatisch.
Was er bei '
li {height: 1px}' nicht in ausreichendem Maße tut; 'li {height: 1%}' hingegen funzt[tm]. Muss man den IE verstehen?Danke, auch an molily. '
li {zoom: 1}' tut’s auch.Live long and prosper,
Gunnar--
Das einzige Mittel, den Irrtum zu vermeiden, ist die Unwissenheit. (Jean-Jacques Rousseau)-
Hi,
Was er bei '
li {height: 1px}' nicht in ausreichendem Maße tut; 'li {height: 1%}' hingegen funzt[tm].Gerüchten zufolge wirkt 1px in manchen Fällen "besser" als 1%, allerdings ist mir dies in der Praxis noch nicht begegnet. Ich verwende gewöhnlich 1%, weil es den Zusatzeffekt hat, zu "auto" berechnet zu werden, wenn das umgebende Element keine feste Höhe besitzt.
Muss man den IE verstehen?
Warum nicht? Ist 'ne gute Übung. Nichts anderes verknotet Dir so effizient sämtliche Gehirnwindungen.
Danke, auch an molily. '
li {zoom: 1}' tut’s auch.Ist nur leider invalide ;-)
Cheatah
--
X-Self-Code: sh:( fo:} ch:~ rl:| br:> n4:& ie:% mo:) va:) de:] zu:) fl:{ ss:) ls:~ js:|
X-Self-Code-Url: http://emmanuel.dammerer.at/selfcode.html
X-Will-Answer-Email: No
X-Please-Search-Archive-First: Absolutely Yes-
@@Cheatah:
Ist nur leider invalide ;-)
Wenn man Deklarationen speziell für IE im Stylesheet hat (und wir wollen doch kein Stylesheet speziell für IE, oder?), so mit 'filter' und 'expression' und so, dann hat man sowieso kein valides CSS.
Und wenn man SVG einsetzt und auch dafür Regeln im Stylesheet hat, dann erst recht nicht.
Live long and prosper,
Gunnar--
Das einzige Mittel, den Irrtum zu vermeiden, ist die Unwissenheit. (Jean-Jacques Rousseau)-
und wir wollen doch kein Stylesheet speziell für IE, oder?
Doch, davon gehe ich aus, wenn ich hier solche Lösungen empfehle.
so mit 'filter' und 'expression'
Gerade die haben in einem CSS-Stylesheet nichts zu suchen, weil sie den Parser verwirren - ein Grund, warum expression mit IE8 deprecated ist und filter mit -ms-filter: "..."; umgeschrieben werden soll.
Mathias
-
@@molily:
Gerade die haben in einem CSS-Stylesheet nichts zu suchen, weil sie den Parser verwirren - ein Grund, warum expression mit IE8 deprecated ist und filter mit -ms-filter: "..."; umgeschrieben werden soll.
Ist mir auch schon aufgefallen, dass Safari bei
foo {bar: expression( [code lang=javascript](function(element) { element.style.bar = baz; })(this))}[/code]aussteigt. (Ich vermute wegen der Klammerung.) Solch Zeugs müsste als letztes im Stylesheet stehen; nachfolgende Regeln beachtet Safari nicht mehr.
Es ist ein Jammer, dass Microsoft conditional comments in HTML und JavaScript eingebaut hat, aber nicht dort, wo man sie am meisten bräuchte – in CSS.
Live long and prosper,
Gunnar--
Das einzige Mittel, den Irrtum zu vermeiden, ist die Unwissenheit. (Jean-Jacques Rousseau)-
Moin Moin!
Es ist ein Jammer, dass Microsoft conditional comments in HTML und JavaScript eingebaut hat, aber nicht dort, wo man sie am meisten bräuchte – in CSS.
Es ist ein Jammer, dass sich der IE dermaßen daneben benimmt, dass solche Krücken überhaupt nötig sind.
Alexander
--
Today I will gladly share my knowledge and experience, for there are no sweeter words than "I told you so".
-
-
-
-
-
-