Einzelnen Beitrag anzeigen
  #1 (permalink)  
Alt 19.11.2007, 22:26
Benutzerbild von heiko_rs
heiko_rs heiko_rs ist offline
Erfahrener Benutzer
XHTMLforum-Kenner
Thread-Ersteller
 
Registriert seit: 18.09.2005
Ort: Berlin
Beiträge: 9.848
heiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblick
Standard Testcase: float, overflow: hidden; und alte Geckos...

Nachdem immer mal wieder CSS gepostet wird, in dem overflow: hidden; als vermeintlich einfache Methode zum Einschließen von Floats eingesetzt wird, andererseits aber auch immer auf die Gefahren dieser Methode hingewiesen wird (da sie älteren Geckos mitunter massive Probleme bereitet), habe ich mal ein kleines Testcase erstellt.

Es ist der denkbar simpelste Fall: Der Float ist höher als sein umgebendes Element und hängt heraus (wie auch in FAQ Punkt 2 zu sehen), wenn keine "Gegenmaßnahmen" getroffen werden. Der Rest ist selbsterklärend

Schaut man sich das Textcase jetzt mit einem Gecko-Browser an, der älter ist als Firefox 1.0 (dazu gehören also auch Firebird, Phoenix und Netscape 7), offenbaren sich die verheerenden Folgen der letzten Methode: overflow: hidden; bringt den Floathoalder nicht zum Einschließen des Floats, und dieser hängt auch noch nicht einmal heraus, da der Wert "hidden" bewirkt, dass er abgeschnitten wird und dadurch nahezu komplett verschwindet. Aber immerhin wird unterhalb des Floatholders der Platz freigehalten, den der Float einnehmen würde, wenn er denn sichtbar wäre

HTML-Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html lang="de" xml:lang="de" xmlns="http://www.w3.org/1999/xhtml">

<head>
	<meta http-equiv="content-type" content="text/html; charset=utf-8" />
	<title>Test</title>
	<style type="text/css">

div {
	padding: 10px;
	color: black;
	}

.floatholder {
	width: 700px;
	background: silver;
	margin-bottom: 20px;
	}

.floatholder div {
	width: 200px;
	float: left;
	background: red;
	}

.float {
	float: left;
	}

.hidden {
	overflow: hidden;
	}

hr {
	clear: left;
	margin-bottom: 20px;
	}

	</style>

</head>

<body>

<div class="floatholder">
	<div>
		Float<br />
		Float<br />
		Float<br />
		Float
	</div>
	Floatholder
</div>
<hr />

<div class="floatholder float">
	<div>
		Float<br />
		Float<br />
		Float<br />
		Float
	</div>
	Floatholder
</div>
<hr />

<div class="floatholder hidden">
	<div>
		Float<br />
		Float<br />
		Float<br />
		Float
	</div>
	Floatholder
</div>
<hr />

</body>

</html>

Geändert von heiko_rs (08.09.2009 um 16:18 Uhr)
Mit Zitat antworten
Sponsored Links