zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > Knowledge Base
Seite neu laden Clearfix funzt nicht richtig!

Antwort
 
LinkBack Themen-Optionen Ansicht
  #11 (permalink)  
Alt 15.12.2005, 13:26
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 02.06.2003
Beiträge: 2.441
ulle befindet sich auf einem aufstrebenden Ast
Standard

Zitat:
Zitat von IChao
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...
Da habe ich doch gleich mal ein TEST-Case gebaut und die Eigenschaft [float] ein wenig strapaziert, leider habe ich hier nur FF1.5 (Okay) und IE6 (Okay).

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-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;
			}

			
.containing-float-particular
			{
			/* fuer alle Browser; 
			 * Block Formatting Context (~auto-clearing)
			 *
			 * 9prev1, Safari & IE/Mac
			 */
			display: inline-table;
			
			/* fuer alle Browser; 
			 * Block Formatting Context (~auto-clearing)
			 *
			 * Moz/Firefox, Opera 8.50 & Safari
			 */    
			overflow: auto;
			}


* html .containing-float-particular
			{
			/* nur fuer IE-Win; 
			 * Dimension (~ auto-clearing);
			 * 
			 * verbergen IE-Mac \*/ 
			height: 0; 
			/* ende verbergen IE-Mac */ 
			
			/* nur fuer IE; 
			 */
			overflow: visible;
			}
		
/*---------------------------------------*/
.floater	{
			float: left;
			background-color: #99CCFF;
			}

#sidebar
			{
			float: left;
			
			width: 10em;
			height: auto !important;
			height: 30em;

			min-height: 30em;
			
			background-color: #FFFF00;
			}

#main		{
			background-color: #FFCC99;
			}

#wrap		{
			background-color: #DDDDDD;
			}

#column		{
			float: right;
			
			width: 10em;
			height: auto !important;
			height: 15em;
			min-height: 15em;
			
			background-color: #33CC33;
			}
					
/*]]>*/
</style>

</head><body>



<div id="sidebar" class="containing-float-particular">
	[#sidebar]

	<p class="floater">
		[.floater]
	</p> 

</div>


<div id="wrap" class="containing-float-particular">
	
	<div id="column" class="containing-float-particular">
		[#column]
		
		
.
.
.
.
.
.
.
.
.
.
.
.
.
.
		
		<p class="floater">
			[.floater]
		</p> 

	</div>

	
	<div id="main" class="containing-float-particular">
		[#main]

		<p class="floater">
			[.floater]
		</p> 

	</div> 

	[#wrap] after floating elements
	
	<p class="floater">
		[.floater]
	</p> 


</div>	

<p class="floater">
	[.floater]
</p> 

</body></html>
<edit> Veränderung im Test-Case: kleine CODE-Änderungen min-height und etwas Markup.
__________________
</ulle>
Mit Zitat antworten
Sponsored Links
  #12 (permalink)  
Alt 16.12.2005, 00:32
#
XHTMLforum-Kenner
 
Registriert seit: 30.06.2005
Ort: Hamburg
Beiträge: 2.092
IChao ist ein sehr geschätzer MenschIChao ist ein sehr geschätzer MenschIChao ist ein sehr geschätzer MenschIChao ist ein sehr geschätzer Mensch
Standard

Irgendwer hat diesen Thread verschoben...

Ulle, ich habe deinen Test mal genommen und Georgs Original-Vorschlag eingesetzt. Ging nicht gut in Safari, Opera und IEMac. Das Problem war:

- nur IEMac wollte das inline-table sehen, die anderen bis auf Fx konnten es nicht gut ab.
- IEMac wollte die Einträge "[#sidebar]" usw. in

</p> gestellt wissen
- IEMac mochte height: auto !important; in #sidebar nicht und ließ den Sidebar kollabieren. Habe ich jetzt mal ganz rausgenommen, was den Test natürlich verändert.

- IE6 zeigt den 3px text jog zu beiden Seiten des #main Containers wie erwartet. Habe ich nicht angefasst, sollte aber mit negativen -3px korrespondierenden margins für #sidebar und dir rechte #column gehen.

live:
http://www.satzansatz.de/xforum/cleartest2.html

Sieht gleich aus hier in Safari2.02 / IEMac5.2.3 / Fx1.5 / Opera8.01-Opera9TP1 /IE6
Andere nicht getestet.

Ed: Toll, aber eigentlich ist das jetzt auch nur ein overflow:auto für alle und was anderes für die IE's. Ich glaube einfach nicht, dass es den ultimativen floatcontainer oder floatclearer gibt.

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-DE" lang="de">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>cleartest2</title>

<style type="text/css" media="screen,projection">
/*<![CDATA[*/ 

*	{
	margin: 0;
     padding: 0;
	}

.contain {
	overflow: auto;
	}

* html .contain {
	height: 0;
	overflow: visible;
	}

/*\*//*/
* html .contain {
	display: inline-table; 
	height: auto; 
	}
/**/
      
/*---------------------------------------*/
.floater   {
	float: left;
	background-color: #99CCFF;
	}

#sidebar {
	float: left;
	width: 10em;
	height: 30em;
	min-height: 30em;
	background-color: #FFFF00;
	}

#main      {
	background-color: #FFCC99;
	}

#wrap      {
	background-color: #DDDDDD;
	}

#column      {
	float: right;
	width: 10em;
	height: auto !important;
	height: 15em;
	min-height: 15em;
	background-color: #33CC33;
	}
/*]]>*/
</style> 

</head><body>



<div id="sidebar" class="contain">
	

 [#sidebar left]</p>
	<p class="floater">[.floater1]</p>
</div>


<div id="wrap" class="contain">
   
	<div id="column" class="contain">
		

[#column right]</p>
		
.
.
.
.
.
.
.
.
.
.
.
.
.
.
		<p class="floater">[.floater2]</p>
	</div>
   
	<div id="main" class="contain">
		

[#main center]</p>
		<p class="floater">[.floater3]</p>
	</div>

   

[#wrap] after floating elements</p>

   <p class="floater">[.floater4]</p>

</div>   

<p class="floater">[.floater5]</p>

</body></html>
__________________
Ingo Chao

Buch: Fortgeschrittene CSS-Techniken
Mit Zitat antworten
Sponsored Links
  #13 (permalink)  
Alt 16.12.2005, 12:08
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 02.06.2003
Beiträge: 2.441
ulle befindet sich auf einem aufstrebenden Ast
Standard

Zitat:
Zitat von IChao
nur IEMac wollte das inline-table sehen, die anderen bis auf Fx konnten es nicht gut ab
dann halt nur für Mac...

Zitat:
Zitat von IChao
IEMac wollte die Einträge "[#sidebar]" usw. in

</p> gestellt wissen
Markup-Änderung für den Mac!

Ich denke das ist der Moment den IE-Mac mit dem Netscape 4 auf eine Stufe zu stellen, d. h. für mich kein CSS mehr. Kennt jemand eine Möglichkeit dem IE-Mac das CSS vorzuenthalten? Oder ist Folgendes die einzige Möglichkeit. Gibt es zu dieser radikalen Haltung einwende?

Code:
<style type="text/css" media="screen,projection" title="standard-style"> 
/*<![CDATA[*/

/* fuer alle Browser die 
 * die @import verstehen; 
 *
 * verbergen IE-Mac \*/ 
@import url("style.css");  
/* ende verbergen IE-Mac */ 

/*]]>*/
</style>
Dieses Handeln reduziert natürlich den Workaround erheblich..

Code:
.containing-float-particular
			{
			/* fuer alle Browser; 
			 * Block Formatting Context (~auto-clearing)
			 *
			 * Bedingt in eingesetzen Containern
			 * das die Eigenschaft [height] durch
			 * [min-height] ersetzt wird!!
			 */    
			overflow: auto;
			}


* html .containing-float-particular
			{
			/* nur fuer IE; 
			 */
			height: 0; 
			overflow: visible;
			}

Zitat:
Zitat von IChao
Ed: Toll, aber eigentlich ist das jetzt auch nur ein overflow:auto für alle und was anderes für die IE's. Ich glaube einfach nicht, dass es den ultimativen floatcontainer oder floatclearer gibt.
Verdächtig, aber ich sehe außer der height/min-height Problematik zum verhindern von evtl. Scrollbars keinen Hacken - ......bisher.
__________________
</ulle>
Mit Zitat antworten
  #14 (permalink)  
Alt 19.12.2005, 14:56
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 02.06.2003
Beiträge: 2.441
ulle befindet sich auf einem aufstrebenden Ast
Standard

Zitat:
Zitat von ulle
Ich denke das ist der Moment den IE-Mac mit dem Netscape 4 auf eine Stufe zu stellen,......
Voila......Internet Explorer für Mac: Ende nach zehn Jahren
__________________
</ulle>
Mit Zitat antworten
  #15 (permalink)  
Alt 02.02.2006, 21:32
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 29.06.2005
Beiträge: 77
deekee befindet sich auf einem aufstrebenden Ast
Standard Problem gelöst

Problem gelöst!

Besten Dank an Alle!

Echt, Ihr seid echt SPITZE!

Kommt mal bei mir tauchen, denn dann gibt's fetten Rabatt!
__________________
MfG
Dirk
Mit Zitat antworten
  #16 (permalink)  
Alt 03.02.2006, 11:56
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 02.06.2003
Beiträge: 2.441
ulle befindet sich auf einem aufstrebenden Ast
Standard

Zitat:
Zitat von ulle
Ich denke das ist der Moment den IE-Mac mit dem Netscape 4 auf eine Stufe zu stellen, d. h. für mich kein CSS mehr. Kennt jemand eine Möglichkeit dem IE-Mac das CSS vorzuenthalten? Oder ist Folgendes die einzige Möglichkeit. Gibt es zu dieser radikalen Haltung einwende?
Fundstück zum Thema: Internet Explorer 5 aussperren
__________________
</ulle>
Mit Zitat antworten
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
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


Alle Zeitangaben in WEZ +2. Es ist jetzt 13:41 Uhr.