Zum Inhalt springen

Content Element Nur Bilder und Box Modell Fehler des IEs

Erstellt am 8. August 2006 · 4 Antworten · letzte Antwort am 5. Dezember 2009

Tags: Bilder, HTML & CSS, Frage

design-galaxie ·

Hallo,

ich habe ein kleines Problem mit dem Content Element "Nur Bilder".

Es sollen immer 3 Bilder neben einander angezeigt werden. Nach jeweils 3 Bildern soll also eine neue Image Row angelegt werden. Für die ganzen divs usw., die um die Bilder gelegt werden ist ja die css_styled_content Extension zuständig. Nur gibt es jetzt das Problem das leider bei den beiden Klassen:

csc-textpic-imagewrap
csc-textpic-imagerow

in den div-Tag beispielsweise auch folgendes mit reingeschrieben wird:

style="width:393px;"

Hat man nun einen Border oder Margin / Padding um die Bilder reicht dem IE der Platz nicht mehr.

Wenn ich das richtig verstanden habe setzt css_styled_content style="width... automatisch auf Grund der Gesamtbreite der Bilder innerhalb einer Reihe.

Nun also meine Frage gibt es dafür einen Workaround, oder kann man das per TypoScript deaktivieren?

Im Object Browser bin ich leider nicht fündig geworden.

design-galaxie ·

Ich sollte evtl. noch erwähnen das diese style-width Deklaration erst bei mehreren Zeilen mit reingeschrieben wird. Beispielsweise man stellt ein:

3 Spalten hat aber 5 Bilder. Nach 3 Bildern beginnt eine neue Zeile sobald dies der Fall ist wird die width Angabe reingeschrieben.

So weit ich das evaluieren kann hat man aktuell nur die Möglichkeit die Bilder von vorn herein größer an zu legen und den colspace raus zu nehmen. Einen möglichen Border muss man schon direkt im Bild anlegen. Die image caption kann man dann so groß anlegen wie das eigentliche Bildmotiv.

Hat man allerdings im Contentbereich ein Hintergrundbild mit beispielsweise einem Verlauf kann man da wohl nicht mehr viel machen, entweder den Darstellungsfehler im IE oder aber keinen Abstand zwischen den Spalten.

Gernott ·
tt_content.image.20.1.imageLinkWrap.enable.field >
tt_content.image.20.1.imageLinkWrap.enable = 1
tt_content.image.20.1.file.width.ifEmpty = 120
tt_content.image.20.cols.ifEmpty = 4

tt_content.image.20.imageStdWrap.dataWrap = <div> | </div>
tt_content.image.20.rendering.div.imageRowStdWrap.dataWrap = <div class="csc-textpic-imagewrap"> | </div>
tt_content.image.20.rendering.div.oneImageStdWrap.dataWrap = <div class="csc-textpic-imageevent"> | </div>
tt_content.image.20.renderMethod = div

So habs ich gelöst :-)
Die Zeile tt_content.image.20.renderMethod = div ändert das Verhalten. Es werden dann DIV Tags statt der Definitionsliste verwendet.
tt_content.image.20.rendering. XXXX Gibt das rundherum aus :-) Je nach renderMethod muß man hier div o.ä. angeben...

Weitere Infos findet man in dieser Datei im Ordner ext/:
css_styled_content/static/setup.txt

TheFreeman ·

Oder DU nimmst einfach das originale Script und nimmst nur die Größenangaben raus:

tt_content.image.20 {

	imageStdWrap.dataWrap = <div class="csc-textpic-imagewrap"> | </div>
	imageStdWrapNoWidth.wrap = <div class="csc-textpic-imagewrap"> | </div>
	imageColumnStdWrap.dataWrap = <div class="csc-textpic-imagecolumn"> | </div>
	
	rendering {
		dl {
			imageRowStdWrap.dataWrap = <div class="csc-textpic-imagerow"> | </div>
			noRowsStdWrap.wrap =
			oneImageStdWrap.dataWrap = <dl class="csc-textpic-image###CLASSES###"> | </dl>
			imgTagStdWrap.wrap = <dt> | </dt>
			editIconsStdWrap.wrap = <dd> | </dd>
			
			caption {
				required = 1
				wrap = <dd class="csc-textpic-caption"> | </dd>
			}
		}
	}
}