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
  #1 (permalink)  
Alt 06.04.2005, 14:06
Erfahrener Benutzer
XHTMLforum-Kenner
Thread-Ersteller
 
Registriert seit: 02.06.2003
Beiträge: 2.441
ulle befindet sich auf einem aufstrebenden Ast
Standard :after / Clear ohne Markup / Cross-Browser Test

Moin,

durch diesen Artikel inspiriert habe ich mal ein wenig CODE zusammen gestellt.

<edit date="22.09.2005">
...leider ist der genannte Artikel nicht mehr Verfügbar, aus diesem Grunde verweise ich direkt zur Quelle:
http://jassesnee.de/easyclear/index.html
</edit date="22.09.2005">


Worum geht es hier -> Dieses THEMA mit neuen Techniken zu bewältigen.


Nun wäre es natürlich wichtig zu wissen welche Browser evtl. nicht damit zurecht kommen.

Mit anderen Worten ein Cross-Browser Test.

Bisher getestet:

IE6 - Okay
IE6(Quirks) - Okay
Firefox 1.02 - 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" 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;
			
			background-color: #FFFFFF;
			}
			
p		{
			float: left;
			clear: left;
			
			margin: 0 1em 0 0;
			border: 1px solid #00FF99;
			padding: .5em;

			background-color: #22CCFF;
			}
			
			
.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; 
			}

* 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 */
			}

/*]]>*/
</style>

</head>
<body>

<div class="containing-float">

	

Floating Container</p>
	Normaler Container....

	

Floating Container</p>
	....continue.....

	

Floating Container</p>
	....continue.....
		
</div>

</body>
</html>
__________________
</ulle>
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 06.04.2005, 14:14
i like to move it
XHTMLforum-Mitglied
 
Registriert seit: 06.03.2005
Ort: Freiburg
Beiträge: 205
^uncool befindet sich auf einem aufstrebenden Ast
Standard

Unter WinXP:
IE 5.5 ok
IE 5.01 ok
Opera 7.04 ok
Mozilla 1.6 ok
Netscape 7.0 ok
__________________
>> Linux is like a wigwam: no windows, no Gates, Apache inside. <<
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 06.04.2005, 14:30
Benutzerbild von Boris
Tanzender Webentwickler
XHTMLforum-Kenner
 
Registriert seit: 29.07.2004
Ort: Kornwestheim / Stuttgart
Beiträge: 4.925
Boris ist ein sehr geschätzer MenschBoris ist ein sehr geschätzer MenschBoris ist ein sehr geschätzer Mensch
Standard

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
  #4 (permalink)  
Alt 06.04.2005, 21:59
Erfahrener Benutzer
XHTMLforum-Kenner
Thread-Ersteller
 
Registriert seit: 02.06.2003
Beiträge: 2.441
ulle befindet sich auf einem aufstrebenden Ast
Standard

@^uncool; Danke für den umfangreichen Test.


So, nun habe ich diese Klasse [.containing-float] eingesetzt und konnte dafür einige andere Workorunds und einiges an Markup rauswerfen. ] ist das Ei des Kolumbus.

________

Schön wäre noch eine Safari-Test, und andere Browser
__________________
</ulle>
Mit Zitat antworten
  #5 (permalink)  
Alt 06.04.2005, 22:37
Philippp
Gast
 
Beiträge: n/a
Standard

Gibt es einen Grund dafür dass du statt 3 Hex Zahlen bei den Farbwerten alle 6 nimmst? Ich mein natürlich da, wo 3 möglich wären. Wenn es schon um das einsparen von Code geht ...
Gruß, Philippp
Mit Zitat antworten
  #6 (permalink)  
Alt 07.04.2005, 10:06
Erfahrener Benutzer
XHTMLforum-Kenner
Thread-Ersteller
 
Registriert seit: 02.06.2003
Beiträge: 2.441
ulle befindet sich auf einem aufstrebenden Ast
Standard

@philippp

Habe ich mir noch nie gedanken darüber gemacht. Im CSS sind auch 3 Byte mehr pro Farbangabe unrelevant. Wichtiger ist alle Kommentare und sonstigen Müll, wie White-Spaces zu entfernen, das spart eine Menge Byte's ein.

Wobei es für den normalen Client-Browser nicht so dramatisch wäre, da ja nur einmal Übertragen, sofern nicht der Cache manipuliert ist. Anders sieht es mit Suchmaschinen-Spidern aus. Diese kommen sehr oft und saugen permanent das volle Programm.

Der Rucksack mit unnötigem Markup wiegt Schlimmer....

Mit obiger CLASS [.containing-float] habe ich ein schönes äquivalent zum Containing Block. Für mich eine saubere Vorgehensweise.

Trenne Inhalt und Design (besser wäre eigentlich Layout zu sagen) !!
Wenn nun aber zusätzliches Markup für eine Style-Eigenschaft wie FLOAT benötigt wird, dann ist dieser Grundsatz schon gebrochen.
__________________
</ulle>
Mit Zitat antworten
  #7 (permalink)  
Alt 07.04.2005, 12:19
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 28.01.2005
Beiträge: 11.775
fricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz sein
Standard

Hier noch ein MacOSX-Test:

Safari: klappt
Camino: klappt
NN7: klappt
IE5.2: klappt nicht; float wird nicht gecleared (gecleart?) und die fälschliche Verlängerung des IE Win macht er auch nicht.
Mit Zitat antworten
  #8 (permalink)  
Alt 07.04.2005, 13:41
Benutzer
neuer user
 
Registriert seit: 25.08.2004
Beiträge: 95
flproject befindet sich auf einem aufstrebenden Ast
Standard

Zitat:
IE5.2: klappt nicht; float wird nicht gecleared (gecleart?) und die fälschliche Verlängerung des IE Win macht er auch nicht.
würde er aber tun, wenn man das original dieses hacks nimmt. zu finden hier:
http://positioniseverything.net/easyclearing.html

-> display:inline-table für den mac IE.

der hack exisitiert übrigens schon ne ganze weile. mittlerweile gibt es noch eine einfachere variante:

Code:
.containing-float { overflow: auto; }
/* für IE */
* html .containing-float { height: 1% }
dieser hat aber glaube ich noch ein paar bugs in diversen browsern. in ff, opera, safari und ie funktioniert er aber.
Mit Zitat antworten
  #9 (permalink)  
Alt 07.04.2005, 14:10
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 28.01.2005
Beiträge: 11.775
fricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz sein
Standard

Zitat:
Zitat von flproject
-> display:inline-table für den mac IE.
Hm, Schnelltest im IE5 OS9. Jetzt nimmt er zwar die Höhe des floats mit, dafür schneidet er aber die Breite beim ersten möglichen Umbruch ab (wg. float ohne width vermutlich)

Zitat:
Zitat von flproject
mittlerweile gibt es noch eine einfachere variante:
Code:
.containing-float { overflow: auto; }
/* für IE */
* html .containing-float { height: 1% }
Da gibt's jetzt den gleichen Effekt wie beim ersten Hack, dazu noch Scrollleisten...
Nebenwirkungen in anderen Browsern hab' ich jetzt nicht getestet.

Hast du mal Beispiele, wo's funktioniert?
Im Moment würde ich noch die IEMac-hack-lose Variante bevorzugen (dann stimmt wenigstens bloß die Höhe des Containers nicht...)

Grüße
fricca
Mit Zitat antworten
Sponsored Links
  #10 (permalink)  
Alt 07.04.2005, 14:48
Benutzer
neuer user
 
Registriert seit: 25.08.2004
Beiträge: 95
flproject befindet sich auf einem aufstrebenden Ast
Standard

Zitat:
Hast du mal Beispiele, wo's funktioniert?
leider nein. das ganze thema ist aber hier http://annevankesteren.nl/archives/2...learing-floats zu finden inklusive testcases.
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 16:52
CSS: Unterer Pfeil der Scrollbar nicht sichtbar - bessere Möglichkeit? Stadtmensch CSS 13 13.06.2013 20:20
:nth-child / :nth-of-type und Klassen UnnamedProphet CSS 10 24.03.2011 17:32
Unbekannte Anzahl Divs in Liste anordnen und horizontal und vertikal zentrieren Alien CSS 17 20.03.2011 11:23
Input Felder, IE und Firefox zeigen Unterschiede priscylla CSS 2 21.01.2010 10:57


Alle Zeitangaben in WEZ +2. Es ist jetzt 18:32 Uhr.