Zum Inhalt springen

Verschiebung bei Contentelement "Text mit Bild"

Erstellt am 24. August 2006 · 2 Antworten · letzte Antwort am 12. Oktober 2006

Tags: Frage

bertl ·

Hallo,

ich verwende typo3 4.0.

Wenn ich das Content Element "text with image" einfüge kommt es zu einer unterschiedlichen Darstellung zwischen FF un IE wenn die Position des Bildes entweder "Above, center"; Above, left"; oder "Above, right" ist.

Im IE wird der Content korrekt dargestellt: Oben ist das Bild, und gleich im Anschluss kommt der Text.
Im FF wird nur das Bild richtig angezeigt. Der Text wird (wahrscheinlich durch class="csc-textpic-clear") mit Abstand zum Bild angezeigt. Links habe ich ein Div mit dem Menü. Der Text wird erst im Aschluss an dieses Menü dargestellt.

Der Source mit dem Contentelemt sieht so aus:

    		<div id="main">
				
	<!--  CONTENT ELEMENT, uid:7/textpic [begin] -->
		<a id="c7"></a><h1>Gemeinsam in Europa</h1>
		<!--  Image block: [begin] -->
			<div class="csc-textpic csc-textpic-center csc-textpic-above csc-textpic-caption-c"><div class="csc-textpic-imagewrap" style="width:300px;"><dl class="csc-textpic-image csc-textpic-firstcol csc-textpic-lastcol" style="width:300px;"><dt><a href="index.php?eID=tx_cms_showpic&file=uploads%2Fpics%2Funternehmen_01.jpg&width=800m&height=600m&bodyTag=%3Cbody%20style%3D%22margin%3A0%3B%20background%3A%23fff%3B%22%3E&wrap=%3Ca%20href%3D%22javascript%3Aclose%28%29%3B%22%3E%20%7C%20%3C%2Fa%3E&md5=8cafb97975e3855f392e9e04d09fb7e4" onclick="openPic('index.php?eID=tx_cms_showpic&file=uploads%2Fpics%2Funternehmen_01.jpg&width=800m&height=600m&bodyTag=%3Cbody%20style%3D%22margin%3A0%3B%20background%3A%23fff%3B%22%3E&wrap=%3Ca%20href%3D%22javascript%3Aclose%28%29%3B%22%3E%20%7C%20%3C%2Fa%3E&md5=8cafb97975e3855f392e9e04d09fb7e4','thePicture','width=321,height=84,status=0,menubar=0'); return false;" target="thePicture" title="Unternehmen Windhager"><img src="typo3temp/pics/19837e1916.jpg" width="300" height="79" border="0" alt="" /></a></dt><dd class="csc-textpic-caption"></dd></dl></div><div class="csc-textpic-text">
		<!--  Text: [begin] -->
			<p class="bodytext">Hier steht der Text, der im FF nach unten verschoben wird</p>

		<!--  Text: [end] -->
			</div></div><div class="csc-textpic-clear"><!-- --></div>
		<!--  Image block: [end] -->
			
	<!--  CONTENT ELEMENT, uid:7/textpic [end] -->
		
    		</div>

Jemand eine Idee?

toyde ·
berti schrieb

.. (wahrscheinlich durch class="csc-textpic-clear") ..

Jemand eine Idee?

Du packst das Problem ja schon beim Schopf: csc (css_styled_content).
Deaktivier den include von csc im Root-Template, speichern, Cache leeren - und beobachte die Veränderung.

Entweder Du lässt csc weg, oder editierst/überschreibst die störende CSS-Anweisungen.

grüsse

stevee ·

hallo bertl

ich hatte (und habe noch) genau dasselbe problem.
ich wollte alles mit divs machen für zugänglichkeit und so weiter, aber offenbar sind viele browser einfach noch nicht soweit.
denn nach meinem verständnis sollte der code so korrekt sein, auch nach selfhtml.

in ie wird das ganze (in meinem fall - aber erst nach langem pröbeln -> musste dem inhalt eine fest breite zuweisen) richtig angezeigt, aber netscape, firefox, safari der neusten generation stellen die bilder immer unter das menü links oder rechts.

was ich jetzt gemacht habe, ist folgendes:
zuerst wollte ich eine browserweiche einbauen, welche dann ein anderes template (mit tabellen-layout) holt.
das ging jetzt aber in demselben layout mit einer kleinen anpassung.
hab einfach um das inhalts-div herum eine ganz einfache tabelle ohne jeglich formatierungen gesetzt und siehe da, es funktioniert nun auf allen browsern, da dann die tabelle eine feste hülle ergibt, wo die funktion clear innerhalb nicht mehr wirkt.

ich weiss nicht, wie das andere machen, aber das ist für mich ein gangbarer weg, denn ich mache ja nicht das ganze layout mit tabellen, denn den rest habe ich alles mit den divs belassen.

von mir aus gesehen ist der csc css styled content eben schon nicht schlecht.
wenn du zu den plug-ins schauen gehst, dann kannst du dort die files anschauen - so auch eine readme-datei. dort steht, welche css-datei dass du nehmen und selbst anpassen kannst.

freue mich auf eine disskussion, wie das andere machen...

es grüsst
stevee