nicht angemeldet
CSS, Floating
UlyssesHallo Forum,
mir ist da gerade ein etwas unerwartetes Problem mit der Eigenschaft Float begegnet, bei dem ich nicht mehr weiter komme.
Quelltext:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Floating</title>
<style type="text/css">
body{margin:0; padding:0;}
.quer {float:left; margin:1px; background:#ccc; width:200px; height:100px;}
.hoch {float:left; margin:1px; background:#ccc; width:100px; height:200px;}
</style>
</head>
<body>
<div style="background:blue; float:none">
<div class="quer"></div>
<div class="quer"></div>
<div class="quer"></div>
<div class="quer"></div>
<div class="quer"></div>
<div class="quer"></div>
<div style="clear:both"></div>
</div>
</body>
</html>
Nun würde ich hier erwarten, dass das blaue Elternelement wegen des clears nach den Inhaltsdivs in allen Browsern die inliegenden Divs umspannt.
Sobald ich aber die Seite kleiner mache und den Inhalt zum Zeilenumbruch zwinge, rutscht im IE7 der Beginn des blauen Elternelements eine Inhaltszeile tiefer.
Entweder sitze ich auf meinem Gehirn oder ich übersehe etwas, kann einer von Euch mir weiter helfen?
Danke im Voraus,
Ollie
-
Nachtrag:
Das float:none im Elternelement hat keinen Sinn, das kommt von meiner mittlerweile verzweifelten Fehlersuche ;)
LG, Ollie
-
Hi!
Entweder sitze ich auf meinem Gehirn oder ich übersehe etwas, kann einer von Euch mir weiter helfen?
Du könntest dem „blauen“ div einen Inhalt z.B.
geben, dann umspannt auch der IE7 die innenliegenden divs.
LG Ulysses-
Hi!
Nachtrag:Du könntest dem „blauen“ div einen Inhalt z.B.
geben, dann umspannt auch der IE7 die innenliegenden divs.oder ein height: 100%;
LG Ulysses
-
oder ein height: 100%;
oder height: 1%; haslayout sollte hier doch reichen, oder?
-
oder ein height: 100%;
oder height: 1%; haslayout sollte hier doch reichen, oder?Huhu (abschließend ^^),
hätte ich weiter geskripted, hätte ich das Problem von alleine behoben, ich war nur dermaßen perplex, weil mir dieser Fehler noch nie begegnet ist, dass ich erst auf Fehlersuche gehen wollte.
Üblicherweise arbeite ich mit verschachtelten Elementen, um die Fehler der diversen Box Models aufzuklammern.
Dies allein führt schon dazu, dass alles korrekt angezeigt wird:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Floating</title>
<style type="text/css">
body{margin:0; padding:0;}
.quer {float:left; margin:1px; background:#ccc; width:200px; height:100px;}
</style>
</head>
<body>
<div style="background:blue;">
<div style="height:100%;">
<div class="quer"></div>
<div class="quer"></div>
<div class="quer"></div>
<div class="quer"></div>
<div class="quer"></div>
<div class="quer"></div>
<div style="clear:both"></div>
</div>
</div>
</body>
</html>Nochmal vielen Dank an alle Helfer.
LG, Ollie
-
Hi!
oder ein height: 100%;
oder height: 1%; haslayout sollte hier doch reichen, oder?Ja, ich sollte etwas bescheidener sein ;-)
LG Ulysses-
Ja, ich sollte etwas bescheidener sein ;-)
aber wenigstens bist du ein gönner, geiz ist nicht immer geil wie es scheint :D
-
-
-
-
Hi!
Entweder sitze ich auf meinem Gehirn oder ich übersehe etwas, kann einer von Euch mir weiter helfen?
Du könntest dem „blauen“ div einen Inhalt z.B. geben, dann umspannt auch der IE7 die innenliegenden divs.
LG UlyssesHallo Ulysses,
jap, thatzit, nur floatende Elemente kann der nerdige IE7 anscheinend nicht leiden. Sobald ein beliebiger, nicht floatender Inhalt davor ist, klappts auch wieder mit dem Nachbarn ;)
Danke nochmal!
LG, Ollie
-
-
Hallo Ollie,
Sobald ich aber die Seite kleiner mache und den Inhalt zum Zeilenumbruch zwinge, rutscht im IE7 der Beginn des blauen Elternelements eine Inhaltszeile tiefer.
<div style="background:blue;overflow:hidden">
Ich weiß nicht mehr, warum "overflow:hidden" hilft, aber es funktioniert im ie7 und im FF3.0.1
Gruß von paeonia
-
Hallo Ollie,
Sobald ich aber die Seite kleiner mache und den Inhalt zum Zeilenumbruch zwinge, rutscht im IE7 der Beginn des blauen Elternelements eine Inhaltszeile tiefer.
<div style="background:blue;overflow:hidden">
Ich weiß nicht mehr, warum "overflow:hidden" hilft, aber es funktioniert im ie7 und im FF3.0.1
Gruß von paeonia
Huhu Paeonia,
vielen Dank, aber das löst das Problem nicht...
Ich habe jetzt in den Inhalt vor die floatenden DIVs ein blindes DIV gepackt, jetzt klappts. *argh* ;)
LG, Ollie
-
Hallo Ollie,
<div style="background:blue;overflow:hidden">
vielen Dank, aber das löst das Problem nicht...
bei mir schon, ich habs nämlich ausprobiert, oder ich habe Dein Problem nicht verstanden.
Gruß Paeonia
-
-