Verwendet man die TYPO3 Extension "CSS styled content" gemeinsam mit einem YAML Template kann es zu unschönen Effekten durch das Clearing kommen.

Float und Clearing in HTML und YAML

Immer wenn in man in HTML Floating verwendet (z.B. um Bilder zu positionieren etc) wird der restliche zur Verfügung stehende Platz von den Nachfolgenden Inhaltselementen eingenommen. Dies wird ja auch z.B. wenn man Bilder nach links oder rechts floaten lassen möchte explizit gewünscht.

Möchte man jedoch diesen Effekt vermeiden wird ein sogenanntes Clearing notwendig. Das Clearing sorgt dafür, dass alle Floatingumgebungen beendet werden, bevor das aktuelle Element aufgerufen wird.

Das Clearing setzt man durch, indem man dem Element die CSS Eigenschaft clear: both; gibt.

Das Floating Problem kann auf der YAML Seite noch einmal genauer durchgelesen werden: Floats und Clearing in HTML und YAML

In YAML jedoch wird Float zur Positionierung der Spalten aufgerufen. Wenn man nun innerhalb dieser Spalten einem Element die CSS Eigenschaft clear:both; gibt, so kann dieses Element ganz aus dem Spaltenkontext fallen und sich unter allen Anderen Inhalt setzen.

Um dieses zu verhindern gibt es in YAML eine weitere Clearing Methode: Jene Box, welche seine Inhalte zusammenhalten soll, Also der Bereich in dem sich floatende Elemente Aufhalten aber keine anderen eindringen sollen bekommt die Klasse class="floatbox". Nun kann man diese Box "sauber" halten ohne das clearing der äußeren Spalten zu zerstören.

Das Problem bei TYPO3 mit "CSS styled content"

Das Problem mit dem "CSS styled content" tritt nun auf, wenn man als TYPO3 Inhaltselement ein Bild über dem Content plazieren möchte. In der CSS Definition des "CSS styled content" wird dann nämlich clear:both aufgerufen. Dadurch wird das Layout der Seite "zerschossen", der Text unter dem Bild fliegt aus der Kurve und setzt sich ans Ende aller Spalten. Der Effekt ist im Firefox und Opera zu sehen, nicht jedoch im Internetexplorer, der sich noch immer nicht an die clearing Definition hält (auch nicht der IE7).

Lösung des clearing Problems mit "CSS styled content"

Zunächst einmal müssen alle Vorkommnisse von clearing:both rückgängig gemacht werden:

  div.csc-textpic-above div.csc-textpic-text { clear: none; }
 div.csc-textpic-right div.csc-textpic-text { clear: none; }	
 div.csc-textpic-left div.csc-textpic-text { clear: none; }

Dann muss aber auch dafür gesorgt werden, dass das Clearing der Box, die das Bild enthält trotzdem stattfindet. Da ich für diese Lösung der Box keine weitere KLasse hinzufügen wollte habe ich die Floatboxeigenschaften nachdefiniert:

  div.csc-textpic-above div.csc-textpic-imagewrap {overflow:hidden; }

Wenn man jetzt aber auch Drucken können möchte, muss man seinem Druckstylesheet noch folgendes hinzufügen:

  div.csc-textpic-above div.csc-textpic-imagewrap {
 overflow:visible; 
 display: table; 
 }