[TYPO3-german] Bilder laufen unten aus dem Content raus - T3 4.2.1 nur mit CSS

Tue Aug 26 14:22:46 CEST 2008

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 at lists.netfielders.de
> http://lists.netfielders.de/cgi-bin/mailman/listinfo/typo3-german