Hallo Andreas, wenn du dir das Beispiel von Redlich nach der von mir empfohlenen Korrektur im Firefox ansiehst, wirst du feststellen, dass es korrekt aussieht. overflow:hidden bewirkt in allen standardkonformen Browsern ein Clearing, auch im Firefox 2. Zu den standardkonformen Browsern gehört der IE 6 aber nur dann, wenn er sich nicht im Quirksmode befindet. Heisst umgekehrt, wenn sich der IE 6 im Quirksmode befindet, bewrikt overflow:hidden kein einschließendes Clearing.
Das zoom:1 gilt ausschließlich für die IE, es gibt dem Container die IE-interne Eigenschaft "hasLayout", die in allen IE ein einschließendes Clearing bewirkt (Ausnahme ist der IE 5.0, der reagiert nur auf Breiten- oder Höhenangaben). Es ist in der Tat nicht valide, wie alle Browserhacks. Wenn man sein CSS validieren will, so kann man diese Angabe aber in ein Conditional Comment auslagern, oder sie ersetzen durch eine Breitenangabe, was das gleiche bewirkt. Man müsste das gleiche durch diesen Code erreichen können: #content {overflow:hidden; width:600px} Das Unangenehme an den Breitenangaben ist aber, dass sie vom Boxmodel- Fehler der IEs bis Vs. 6 bedroht sind und deshalb immer, wenn ein padding zusätzlich beteiligt ist, für die IEs eigene Breitenangaben gemacht werden müssen. Sehr schön erklärt in diesem Artikel: http://onhavinglayout.fwpf-webdesign.de/ Man kann auch so arbeiten: <div id="content" class="clearing"> ... floatender Inhalt hier ... </ div> und im validierten CSS: #content { /* was immer gewünscht wird */ } .clearing {overflow:hidden} sowie in einem Conditional Comment für alle IE: <!--[if IE ]> <style> * html .clearing {height:1px} </style> <![endif]--> Dieser Code wird nur vom IE < 7 erkannt bzw. interpretiert. Diese Browser erhalten dadurch für den Container mit der Klasse .clearing hasLayout und damit ein einschließendes Clearing. Die Höhenangabe wird von den IE dabei ignoriert, da sie einen Block-Container immer auf die Höhe des eingeschlossenen Inhalts erweitern. Im Gegensatz zu meinem zoom:1 funktioniert das auch im IE 5.0. Einem Container, der floats umschließen soll, wird dann einfach die Klasse .clearing zugewiesen und das Problem ist in allen modernen Browsern gelöst. in dem zitierten Artikel sind noch viele Varianten und Infos zu hasLayout zu finden, eine gute Zusammenstellung. Es gibt noch weitere Methoden, um in standardkonformen Browsern ein einschließendes Clearing zu bewirken, ohne clear:both zu verwenden. Einige werden z. B. bei YAML beschrieben: http://www.yaml.de/de/dokumentation/grundlagen/funktionsweise-von-floats.html?no_cache=1&sword_list%5B0%5D=clearing Da habe ich auch das overflow:hidden her. Gruß Peter Am 26.08.2008 um 13:09 schrieb Andreas Burg: > Hallo H. Hahn, > >> Es sieht aus als seien die Bilder von einem <div> umschlossen. Nur >> Texte >> scheinen sich den <div>s anzupassen (genauer: <div>s passen sich den >> Texten an). Bilder gehen, wenn das so auskommt, über den Rand der >> <div>s. > > das stimmt so nicht ganz. Wie Christian und Bernd schon sagten > bewirkt erst die > Eigenschaft float, dass ein umgebendes DIV nicht mehr in der Höhe > gestreckt wird. > > Zum Ausprobieren: > auch ohne den Extra-DIV um das Bild und float direkt im Bild ist es > der gleiche > Effekt. Erst das DIV clear:both bereinigt den unschönen Effekt im > FF2.0.0.16, > das overflow:hidden im obersten DIV bereinigt den Effekt im IE6. Die > CSS-Eigenschaft zoom ist leider laut W3C nicht valide bis > einschließlich CSS3. > > <html> > <head> > <title>float</title> > </head> > <body> > <div style="background:#cccccc;overflow:hidden"> > <div style="background:#eeeeee;float:right"> > <img src="bild.jpg" height="200" width="300"> > </div> > Text > <div style="clear:both"></div> > </div> > </body> > </html> > > Andreas > _______________________________________________ > TYPO3-german mailing list > TYPO3-german@lists.netfielders.de > http://lists.netfielders.de/cgi-bin/mailman/listinfo/typo3-german _______________________________________________ TYPO3-german mailing list TYPO3-german@lists.netfielders.de http://lists.netfielders.de/cgi-bin/mailman/listinfo/typo3-german