Problem: Bei der Wartung unserer Typo3-Webseite ist bei der Qualitätskontrolle im IE 7 aufgefallen, dass Bilder, die mit dem Typo3-Seiteninhaltstypen “nur Bilder” oder “Text mit Bild” als Seiteninhalt eingefügt wurden, keinen vertikalen Abstand mehr hatten. Firefox, Opera und der Internet Explorer 6 zeigten den Seiteninhalt korrekt an.
Der vertikale Abstand zwischen den Bildreihen wurde im Typo3 Template Constant Editor mit dem Befehl “styles.content.imgtext.rowSpace = 17” auf 17 Pixel gesetzt.
Diese Einstellung wird durch die Extension tx_cssstyledcontent in eine temporäre CSS Datei codiert.
div.csc-textpic div.csc-textpic-imagewrap .csc-textpic-image {
margin-bottom:17px;
}
Anscheinend wird der CSS Befehl margin-bottom:17px; durch einen Fehler im Internet Explorer 7 ignoriert.
Lösung: Durch das Hinzufügen folgender CSS Blocks zu unserer eigenen CSS Datei wurden die vertikalen Abstände im IE 7 korrekt angezeigt. Der Befehl padding-bottom:17px; wird vom Internet Explorer 7 richtig interpretiert. Der vertikale Abstand zwischen den einzelnen Bildern beträgt nun wieder 17 Pixel.
div.csc-textpic div.csc-textpic-imagewrap dl.csc-textpic-image {
padding-bottom:17px;
}
Eine Kontrolle im Firefox zeigte nun aber, dass dort die vertikalen Abstände nun doppelt so groß waren wie vorher. Dies kommt daher, dass der Firefox Browser margin-bottom:17px; und padding-bottom:17px; korrekt anzeigt und somit der Abstand zwischen den Bildern 34 Pixel beträgt. Um dies zu korrigieren, musste die ursprüngliche Einstellung margin-bottom:17px; mit margin-bottom:0px; in unserem eigenen Stylesheet überschrieben werden. Folgender CSS Block zeigt nun die richtigen Bildabstände. Dies wurde im Internet Explorer 7, Internet Explorer 6 und Firefox 2 überprüft.
div.csc-textpic div.csc-textpic-imagewrap dl.csc-textpic-image {
margin-bottom:0px;
padding-bottom:17px;
}
Wem eine bessere Lösung einfällt, der kann sie gerne mailen.
 |
 |
| IE6, Firefox: korrekt | IE7: fehlender Abstand |