XHTMLforum

XHTMLforum (http://xhtmlforum.de/index.php)
-   Knowledge Base (http://xhtmlforum.de/forumdisplay.php?f=79)
-   -   :after / Clear ohne Markup / Cross-Browser Test (http://xhtmlforum.de/showthread.php?t=35033)

ulle 06.04.2005 13:06

: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:
:arrow: 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>


^uncool 06.04.2005 13:14

Unter WinXP:
IE 5.5 ok
IE 5.01 ok
Opera 7.04 ok
Mozilla 1.6 ok
Netscape 7.0 ok :)

Boris 06.04.2005 13:30

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

ulle 06.04.2005 20:59

@^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

Philippp 06.04.2005 21:37

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

ulle 07.04.2005 09:06

@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.

:idea: 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.

fricca 07.04.2005 11:19

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.

flproject 07.04.2005 12:41

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.

fricca 07.04.2005 13:10

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

flproject 07.04.2005 13:48

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.


Alle Zeitangaben in WEZ +2. Es ist jetzt 19:30 Uhr.

Powered by vBulletin® Version 3.8.11 (Deutsch)
Copyright ©2000 - 2018, vBulletin Solutions, Inc.

© Dirk H. 2003 - 2018