zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Testcase: float, overflow: hidden; und alte Geckos...

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 19.11.2007, 21:26
Benutzerbild von heiko_rs
Erfahrener Benutzer
XHTMLforum-Kenner
Thread-Ersteller
 
Registriert seit: 18.09.2005
Ort: Berlin
Beiträge: 9.869
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 15:18 Uhr)
Mit Zitat antworten
Sponsored Links
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
Problem mit einem 3D-Effekt moep0710 CSS 12 12.06.2010 14:30
Mysteriöse weiße Linie Xethon CSS 3 27.02.2010 15:50
Mozilla zeigt DIV zu oft an cracki CSS 6 09.03.2008 15:22
IE zeigt gewisse Texte nicht an zitronenbaum CSS 2 16.01.2008 15:25
position:fixed löscht background-color des Container alivecc CSS 9 25.10.2007 13:25


Alle Zeitangaben in WEZ +2. Es ist jetzt 09:50 Uhr.