Clearfix funzt nicht richtig!

deekee · #1 (**permalink**) 12.12.2005, 01:03

Hallo,
leider muss ich mal wieder die Hilfe der Profis anfordern....

Dies ist eigentlich ein altes Problem auf meiner Webseite, welches ich dachte gelöst zu haben.

Ab leider scheint es nicht so!

Der Eintrag im Stylesheet display: block; verschiebt mir alle Absätze unter die linke Spalte, welches mit display: inline; behoben werden kann, aber dann überlappen die Bilder wieder mit den ihnen folgenden Absätzen!

.clearfix:after {
content: ".";
display: inline;
height: 0;
clear: both;
visibility: hidden;
}

Das komische daran ist nur, dass dieses Problem "nur" (habe nur IE & MOZ) im Mozilla und nicht im IE sichtbar ist.

Es scheint als die Ausnahme die Regel bestätigt, den bei den Problemen die ich bis jetzt hatte war es immer umgekehrt.

Beispiel unter:
http://www.tidakapapa.com/team.php

Im voraus wie immer danke an alle die mir meistens mit Ihren guten Ratschlägen aus der Klemme geholfen haben und nicht unwesentlich zum gelingen meiner Webseite begetragen haben.

MfG

Dirk

NB: Suche tauchenden & motivierten Webdesigner der meine Webseite resp. das Stylesheet umgestaltet und dafür GRATIS eine Woche im Komodo National Park tauchen möchte (Gegenwert 1120US$ ohne Flug)

IChao · #2 (**permalink**) 12.12.2005, 10:48

IE/Win versteht dieses :after nicht. Er erzeugt für jeden Container, der eine Dimension (haslayout) hat, sowieso etwas wie einen eigenen Clearing (oder Block Formatting -) Context. Das heißt, dass ein Float im IE durch das bloße Setzen einer Weite im Container schon eingeschlossen wird. Jedes Clear bleibt darüber hinaus auch nur innerhalb dieses Kontexts wirksam. Deswegen hast du auch kein Problem im IE.

In Browsern, die der Spezifikation folgen, wird ein solcher Block Formatting Context aber nur durch das Setzen von
- float:left/right,
- display:table-cell,
- display:inline-block und
- overflow:hidden/auto/scroll
erzeugt.

Das clear im clearfix wirkt also in deiner Seite auch auf die linke Sidebar, was völlig korrekt ist. Ein clear kann darüber hinaus nur von Elementen auf block level wirken , deswegen ist das Setzen auf display:inline grober Unfug; es wird nichts mehr gecleart. Also zurück auf block level damit.

In deiner Seite ist die Lösung nicht ganz einfach, weil der mittlere Container pixelgenau auf die Sidebars treffen muss, border auf border. Ein neuer Block Formatting Context würde diese border aber nebeneinander stellen.

Ich schlage vor, dass du eine Zwischenebene einziehst, einen inneren Wrapper #clearcontext, und die Ausrichtung #main-copy überlässt

Code:

	
<div id="main-copy">
  <div id="clearcontext">
  ...

Und nun noch einen solchen Kontext erzeugen ... Leider haben wir bei den Browsern keine große Auswahl in den Eigenschaften
- Firefox hat noch immer bugs mit overflow:hidden und versteht kein display:inline-block;
- IE-Mac versteht display: table-cell nicht immer richtig, und benötigt für floats eine Weitenangabe, die wir in deinem Design aber nicht liefern können;
- IE/Win versteht das alles nicht und macht Blödsinn, selbst float:left müssten wir in deinem Fall unsichtbar machen.

Deshalb schlage ich vor, allen modernen Browsern

Code:

#clearcontext {display: table-cell; }

anzubieten und nur dem IEMac

Code:

* html>body #clearcontext {display: inline-block; }

und den IE ahnungslos vor sich hindümpeln zu lassen.
(läuft in IE/Win, IE/Mac, Safari, Opera, Fx).

</laber>

ulle · #3 (**permalink**) 12.12.2005, 11:36

Zitat:

Zitat von IChao

........nur dem IEMac
* html>body #clearcontext {display: inline-block; }............

Hallo IChao,

das habe ich jetzt richtig verstanden, der IEMac versteht den CHILD-Selector und natürlich den IE-STAR-Hack?

Nun da Du es schreibst gehe ich davon aus dass dies der Interpretion des IEMac entspricht, dies ist ein HighLight für mich, da es mir bisher so nicht bekannt war.

DANKE dafür...

IChao · #4 (**permalink**) 12.12.2005, 11:52

Sowas macht mich immer unsicher. Also besser noch mal bei Philippe nachgeguckt: ja.

Wie zaubert man auf deekees Seite eigentlich in Opera die bullets wieder weg? Wahrscheinlich muss man vorher die animierten Gifs löschen ...

ulle · #5 (**permalink**) 12.12.2005, 14:50

Zitat:

Zitat von IChao

..........
Deshalb schlage ich vor, allen modernen Browsern

Code:

#clearcontext {display: table-cell; }

anzubieten......

Für den von IChao gezeigten Zusammenhang völlig korrekt.

Doch Vorsicht

Eine Deklaration eines umschliessenden Containers mit der Eigenschaft [display: table-cell;] ist nicht Wertneutral, d.h. es verhindert auch evtl. gewünschte [margin] Values und [width: auto;]. So zumindest im FF1.5.

Code:

<!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" xml:lang="de" lang="de">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>xxxx</title>

<style type="text/css" media="screen,projection" title="Druckvorschau => Markup-Semantic">
/*<![CDATA[*/


*			{
			margin:  0;
			padding: 0;
			
			/* Tabellen
			 */
			border-collapse:collapse;
			border-spacing: 0;
			}


div			{
			display: table-cell;

			margin: 5em ;
			border: 1px solid #000000;
			padding: 1em;
			
			background-color: #FFFFFF;
			
			font-size: .8em;
			}
			
p			{
			float: left;
			
			height: 5em;
			width: 20em;
			
			background-color: #FF0000;		
			}

/*]]>*/
</style>

</head>
<body>

<div class="containing-float">
	


		CSS [float: left;]
	</p>
	CSS [display: table-cell;]
</div>

</body>
</html>

Wer eine Clear-Class sucht die bisher keine weiteren Nebenwirkungen aufgezeigt hat, dem sei mit nachfolgendem CODE geholfen.

Code:

.containing-float:after 
			{
			/* Inhalt pseudo-Element :after;
			 * somit [clear] moeglich	
			 */
			content: ".";
			 
			/* [content] verbergen;
			 */
			visibility: hidden;			
			height:     0;

			/* Block-Level fuer [clear];
			 */
			display: block;
			
			/* [float] clearing;
			 * einbeziehen der Float-Container;
			 */	
			clear: both; 
			}

			
.containing-float 
			{ 
			/* nur IE-Mac; 
			 * wird folgend ueberschrieben 
			 */ 
			display: inline-table; 
			
			/* fuer alle Browser; 
			 * 
			 * verbergen IE-Mac \*/ 
			display: block; 
			/* ende verbergen IE-Mac */ 
			
			
			/* fuer alle Browser; 
			 */    
			height: auto ! important; 
			               
			/* nur fuer IE-Win; 
			 * definierte groeße (height or witdh) 
			 * fuer automatisches einbeziehen 
			 * der Float-Container (auto-clearing); 
			 * 
			 * verbergen IE-Mac \*/ 
			height: 1%; 
			/* ende verbergen IE-Mac */ 
			}

So wird diese Class eingesetzt =>

Code:

<div class="containing-float">
	


		CSS [float: left;]
	</p>
	CSS [/*display: table-cell;*/]
</div>

deekee · #6 (**permalink**) 15.12.2005, 02:44

Zuerst mal Danke an Alle die sich hierzu geäussert haben......

Leider habe ich keine Emails mehr gekriegt, dass ein neuer Eintrag eingegangen ist und darum habe ich eine prompte Antwort verpasst!!

Warum weis ich leider nicht!

Werde mich in nächster Zeit dieser Sache wieder einmal annehmen und mal alles durchlesen und pro"BIER"en es zu verstehen!

Echt, taucht denn wirklich keiner von Euch?

Nochmals vielen Dank, im speziellen an Ulle, welcher schon öfter ein Retter in der Not war.

IChao · #7 (**permalink**) 15.12.2005, 02:54

Mein letzter Tauchversuch stammt von meiner Seepferdchenprüfung und gehörte da gar nicht rein. Also bin ich als Retter unbrauchbar.

Überhaupt frage ich ich, was ich hier eigentlich herumfasele und ob das, was ich schreibe, wirklich so schwer zu verstehen ist.

Zitat:

Das komische daran ist nur, dass dieses Problem "nur" (habe nur IE & MOZ) im Mozilla und nicht im IE sichtbar ist.

Ich dachte, meine Zeilen hätten diese von mir als Frage verstandene Aussage beantwortet. Die Seite ist von mir heruntergeladen worden und ich habe meinen Ansatz selbstverständlich getestet, bevor ich ihn gepostet habe. Wenn deine Frage war, warum der IE das macht und die anderen nicht, so kann eine clearfix-variante das Problem sehr wohl auch lösen, aber diese Frage nicht beantworten.

IChao · #8 (**permalink**) 15.12.2005, 04:13

Zitat:

Zitat von ulle

Wer eine Clear-Class sucht die bisher keine weiteren Nebenwirkungen aufgezeigt hat, dem sei mit nachfolgendem CODE geholfen.

Wenn man einen solchen Container mit einer clear-class neben einen langen Float stellt, so ist die Wirkung, dass sich der Container bis zur Länge des seitlichen Floats (sidebar) streckt, und nicht bloß den inneren float umschließt.

Per :after klebt der clear am Gesäß des Containers und cleart nun mal jedes vorhergehende float von der Unterkante des Containers aus.

http://www.satzansatz.de/xforum/clearfixproblem.html

Aber eigentlich wollte man doch bloß den inneren float umschließen, und sich nicht auf die Länge der Umgebung beziehen.

Vegleicht man nun IE6 mit Fx, Opera&Co, so ist das auch keine gute Simulation des Verhaltens vom IE6.

Jeder Lösungsansatz hat seine Schwächen, wenn es darum geht, etwas so aussehen zu lassen, wie IE es tut.

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title></title>

<style type="text/css">
.containing-float:after
         {
    ...
         }

         
.containing-float
         {
     ...
         } 

p {background: blue; float: left; height:50px; }

.sidebar { 
float: left; width:150px; height:500px; background: yellow;
}

.containing-float {background: gray; border:1px solid fuchsia;}



</style>


</head>
<body>

<div class="sidebar">sidebar</div>
<div class="containing-float">containing float
 

contained float</p>
</div> 

</body>
</html>

ulle · #9 (**permalink**) 15.12.2005, 11:22

@Ingo

In der Tat

, Deine Problemstellung ist ein echtes Thema für die "Clear-Class". Das hatte ich bisher nicht im Programm und hat meine "unabhänige Cear-Class" in den Grundfesten erschüttert.

Ich muß zugegeben dass ich Deine Problemstellung erstmal gar nicht verstanden hatte. Ein "ungewolltes" CLEAR auf die Sidebar!

Das diese CLEAR-Class in meinen Layout-Vorstellungen bisher alles hinbekommen hatte empfand ich sowieso verdächtig, deshalb propagiere ich diese ja bei jeder Gelegenheit um andere Blickwinkel zu erfassen.

DANKE

________

Wie würdest Du denn Deine Problemstellung Cross-Browser auszeichnen? Table-Cell als Block Formatting Context wäre hier wohl auch nicht angemessen, da ja dann die volle Breite des BODY nicht genutzt wird.

IChao · #10 (**permalink**) 15.12.2005, 12:06

Ich weiß es nicht. Mein Ansatz mit der table-cell benötigte ja einen inneren wrapper, da table-cell auf den eigentlich in Frage stehenden Container ja die von dir beschriebenen Nebenwirkungen auf die Umgebung hat. Vielleicht gibt es keine ideale Lösung.
Vor einiger Zeit machte ja die overflow:hidden Methode Furore: einfach dem Container zuordnen und peng - alle floats sind drin eingesperrt. Bis dann die Nörgler kamen und sagten, dass der schöne Firefox immer dann, wenn andere Elemente von außerhalb solche overflown-Bereiche überlappen (z.B. ein Flyout oder Drop-Down-Menü), sehr unschöne Verschiebungen zeigt. Noch mehr Nörgler kamen und sagten, dass overflow:hidden vor IE5.xWin+Mac verborgen werden muss und man am Ende genauso viele Hacks braucht wie bei anderen Lösungen.
Sicher wird es das Gleiche hin- und her geben bei display:table-cell.

Dies nur als ein Beispiel. Die clearfix-Methoden mit dem clear:after sind das Beste, was wir haben, denke ich auch, aber auch sie haben offensichtlich Nebenwirkungen.

Georg und Philippe haben sich mal die Mühe gemacht und einige Techniken unter dem Gesichtspunkt untersucht, inwieweit sie geeignet sind, das Verhalten von IE zu simulieren.
http://www.gunlaug.no/contents/wd_example_01.html
http://dev.l-c-n.com/IEW/simulations.php

Nicht das ich die Details alle verstehen würde.

Georg kommt zudem am Ende zu einem interessanten Vorschlag, den ich noch gar nicht ausprobiert habe:
http://www.gunlaug.no/contents/wd_example_01_06.html

Ed: ein wirklich sehr interessanter Vorschlag...

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Ansicht
Linear-Darstellung Zur Hybrid-Darstellung wechseln Zur Baum-Darstellung wechseln

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
Navi funzt micht richtig	Miso	CSS	21	28.04.2009 16:57
background-image mit Annimation funzt nur im IE richtig ?	arnibe	CSS	1	03.11.2005 10:38
boxmodell funzt nicht richtig	chrimp	CSS	4	27.06.2005 09:52
padding funzt net so richtig im Firefox	big-a	CSS	12	25.05.2005 15:32
Mittig ausrichten. Funzt weder im IE noch im Moz richtig	Nils	CSS	10	04.02.2005 19:56