|
|||
![]() 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 !!! 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 */ } Danke für die Tests, Sorry für den IE-Mac
__________________
</ulle> |
Sponsored Links |
|
|||
![]() Zitat:
|
Sponsored Links |
|
|||
![]() Zitat:
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> |
|
|||
![]()
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> |
|
||||
![]()
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 ![]() |
|
|||
![]() Zitat:
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> |
|
||||
![]()
Hatte ich doch bereits - siehe weiter oben:
Zitat:
__________________
“My software never has bugs. It just develops random features ...” ![]() » DevShack - die Website des freien Webentwicklers Boris Bojic ![]() |
|
|||
![]()
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> |
|
||||
![]()
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 ![]() |
Sponsored Links |
|
|||
![]() Zitat:
![]() 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> |
Sponsored Links |
![]() |
Themen-Optionen | |
Ansicht | |
|
|
![]() |
||||
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 |