zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > Knowledge Base
Seite neu laden :after / Clear ohne Markup / Cross-Browser Test

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

Zitat:
Zitat von flproject
würde er aber tun, wenn man das original dieses hacks nimmt. zu finden hier:
http://positioniseverything.net/easyclearing.html
@flproject
Hört sich sehr unfreundlich an, fast als wolltest Du mir unterstellen dass Ich mich mit fremden Federn schmücken wollte. Eingangs habe ich mich auf einen Artikel bezogen !!!

die neue deutsche Übersetzung und Überarbeitung findest Du hier:
http://jassesnee.de/easyclear/index.html


@all
Auf den Workaround für den MAC hatte ich verzichtet, leider vergessen es zu erwähnen, sorry. Darum liefere ich diesen nun nach:

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
			{
			/* temporaer fuer IE-Mac;
			 * wird folgend ueberschrieben
			 */
			display: inline-table;
			
			/* fuer alle Browser;
			 *
			 * verbergen IE-Mac \*/
			display: block;
			/* ende verbergen IE-Mac */
			}

			
* html .containing-float
			{
			/* 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 */
			}
@fricca
Danke für die Tests, Sorry für den IE-Mac
__________________
</ulle>
Mit Zitat antworten
Sponsored Links
  #12 (permalink)  
Alt 07.04.2005, 16:29
Benutzer
neuer user
 
Registriert seit: 25.08.2004
Beiträge: 95
flproject befindet sich auf einem aufstrebenden Ast
Standard

Zitat:
Hört sich sehr unfreundlich an, fast als wolltest Du mir unterstellen dass Ich mich mit fremden Federn schmücken wollte. Eingangs habe ich mich auf einen Artikel bezogen !!!
das war definitiv nicht meine absicht. ich wollte dir gar nichts unterstellen. ich wollte lediglich auf das problem mit dem mac ie hinweisen. wenn das falsch rübergekommen ist, tuts mir leid.
Mit Zitat antworten
Sponsored Links
  #13 (permalink)  
Alt 07.04.2005, 16:32
Erfahrener Benutzer
XHTMLforum-Kenner
Thread-Ersteller
 
Registriert seit: 02.06.2003
Beiträge: 2.441
ulle befindet sich auf einem aufstrebenden Ast
Standard

Zitat:
Zitat von flproject
das war definitiv nicht meine absicht. ich wollte dir gar nichts unterstellen. ich wollte lediglich auf das problem mit dem mac ie hinweisen. wenn das falsch rübergekommen ist, tuts mir leid.
Prima !!


Das mit dem MAC ist nun hoffentlich gelöst.


Warum ich hier solche Test's fahre? ->

1. Einmal um einen Cross-Browser zu bekommen
2. Diesen Workaround bekannt zu machen
3. Damit hier immer mehr KnowHow zusammen getragen wird
__________________
</ulle>
Mit Zitat antworten
  #14 (permalink)  
Alt 07.04.2005, 21:44
Erfahrener Benutzer
XHTMLforum-Kenner
Thread-Ersteller
 
Registriert seit: 02.06.2003
Beiträge: 2.441
ulle befindet sich auf einem aufstrebenden Ast
Standard

Wie soeben erfahren habe könnte auch die [important] -Methode genutzt werden, um dem IE ein Size-Value zu übergeben. Somit würde sich die gezeigte Workaround nochmals um einen Selektor verkleinern.

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 */
			}
__________________
</ulle>
Mit Zitat antworten
  #15 (permalink)  
Alt 07.04.2005, 23:39
Benutzerbild von Boris
Tanzender Webentwickler
XHTMLforum-Kenner
 
Registriert seit: 29.07.2004
Ort: Kornwestheim / Stuttgart
Beiträge: 4.936
Boris ist ein sehr geschätzer MenschBoris ist ein sehr geschätzer MenschBoris ist ein sehr geschätzer Mensch
Standard

Das ist für meinen Geschmack zu viel Code für ein clear ... ich bleib lieber bei der Float-Everything-Methode oder dem neueren overflow: Trick ...
__________________
My software never has bugs. It just develops random features ...

» DevShack - die Website des freien Webentwicklers Boris Bojic
Mit Zitat antworten
  #16 (permalink)  
Alt 08.04.2005, 10:20
Erfahrener Benutzer
XHTMLforum-Kenner
Thread-Ersteller
 
Registriert seit: 02.06.2003
Beiträge: 2.441
ulle befindet sich auf einem aufstrebenden Ast
Standard

Zitat:
Zitat von Boris
Das ist für meinen Geschmack zu viel Code für ein clear ... ich bleib lieber bei der Float-Everything-Methode oder dem neueren overflow: Trick ...
Wenn man sich die Kommentare wegdenkt, bleiben 2 "kleine" Selektoren.

Ich kann mir jetzt nichts unter den von Dir genannten Methoden vorstellen. Wüßte aber gerne was Du damit meinst.

Könntest Du anhand des obigen Markup mal die beiden Lösungen vorstellen.
__________________
</ulle>
Mit Zitat antworten
  #17 (permalink)  
Alt 08.04.2005, 10:52
Benutzerbild von Boris
Tanzender Webentwickler
XHTMLforum-Kenner
 
Registriert seit: 29.07.2004
Ort: Kornwestheim / Stuttgart
Beiträge: 4.936
Boris ist ein sehr geschätzer MenschBoris ist ein sehr geschätzer MenschBoris ist ein sehr geschätzer Mensch
Standard

Hatte ich doch bereits - siehe weiter oben:

Zitat:
Zitat von Boris
Was ähnliches zum Thema - hier werden vier verschiedene Varianten gezeigt, um ein clear zu "sparen" im Markup:

http://www.sitepoint.com/blog-post-view?id=238086
__________________
My software never has bugs. It just develops random features ...

» DevShack - die Website des freien Webentwicklers Boris Bojic
Mit Zitat antworten
  #18 (permalink)  
Alt 08.04.2005, 11:36
Erfahrener Benutzer
XHTMLforum-Kenner
Thread-Ersteller
 
Registriert seit: 02.06.2003
Beiträge: 2.441
ulle befindet sich auf einem aufstrebenden Ast
Standard

overflow: Trick -> Beispiel-Link

Ist mit [width=100%] gezeigt, was einem Box-Model Layout entgegenspricht. Da aber für ein "auto-clearing" des IE ein [Size-Value] zwingend ist, bleibt nur rechnen, d.h. entweder evtl. Rundungsfehler oder Star, oder der weiter vorne gezeigte [height: 1%]. (sehe ich keinen Vorteil), aber gut Geschmacksache.
__________________
</ulle>
Mit Zitat antworten
  #19 (permalink)  
Alt 08.04.2005, 11:52
Benutzerbild von Boris
Tanzender Webentwickler
XHTMLforum-Kenner
 
Registriert seit: 29.07.2004
Ort: Kornwestheim / Stuttgart
Beiträge: 4.936
Boris ist ein sehr geschätzer MenschBoris ist ein sehr geschätzer MenschBoris ist ein sehr geschätzer Mensch
Standard

Nee - ich habe noch nie einen Breitewert angegeben (erst recht nicht width: 100%) und hatte in keinem Browser Probleme damit (Win + Mac) ...
__________________
My software never has bugs. It just develops random features ...

» DevShack - die Website des freien Webentwicklers Boris Bojic
Mit Zitat antworten
Sponsored Links
  #20 (permalink)  
Alt 08.04.2005, 12:04
Erfahrener Benutzer
XHTMLforum-Kenner
Thread-Ersteller
 
Registriert seit: 02.06.2003
Beiträge: 2.441
ulle befindet sich auf einem aufstrebenden Ast
Standard

Zitat:
Zitat von Boris
Nee - ich habe noch nie einen Breitewert angegeben (erst recht nicht width: 100%) und hatte in keinem Browser Probleme damit (Win + Mac) ...
Spektakulär

Bei mir geht es nicht ohne, habe mal ein Beispiel gemacht (Size-Value auskommentiert).
Habe ich beim overflow-Trick etwas vergessen ?

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

html,
body		{
			color:		#000000;
			background:	#FFCC22;
			
			/* line-height ohne Einheit - sonst Vererbung
			 */
			line-height: 1.45;
			}

body		{
			/* Nur hier, sonst gibt es
			 * eventuell Vererbungsprobleme.
			 */
			font-size:   100.01%;
			font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
			}


div			{
			margin: 1em ;
			border: 1px solid #000000;
			padding: 0 1em 0 0;
			
			background-color: #FFFFFF;
			
			font-size: .8em;
			
			/*
			 * overfow-trick
			 */
			overflow: hidden;
			
			/* size-value fuer IE
			 */
			/* 
			height: auto ! important;
			height: 1%;
			*/
			}
			
p			{
			float: left;
			
			width: 10em;
			
			margin: 0 1em 0 0;
			border: 1px solid #00FF99;
			padding: .5em;

			background-color: #22CCFF;
			}
			
			

/*]]>*/
</style>

</head>
<body>

<div>
	
	

Floating Container
Floating Container</p>
	[...floating-element...]
	
	
</div>

</body>
</html>
__________________
</ulle>
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
IE9: Höhe von Zeilen kann nicht fixiert werden MarkP1972 CSS 5 05.02.2014 15:52
CSS: Unterer Pfeil der Scrollbar nicht sichtbar - bessere Möglichkeit? Stadtmensch CSS 13 13.06.2013 19:20
:nth-child / :nth-of-type und Klassen UnnamedProphet CSS 10 24.03.2011 16:32
Unbekannte Anzahl Divs in Liste anordnen und horizontal und vertikal zentrieren Alien CSS 17 20.03.2011 10:23
Input Felder, IE und Firefox zeigen Unterschiede priscylla CSS 2 21.01.2010 09:57


Alle Zeitangaben in WEZ +2. Es ist jetzt 22:25 Uhr.