{"id":20,"date":"2008-03-15T19:41:30","date_gmt":"2008-03-15T17:41:30","guid":{"rendered":"http:\/\/www.mediamill.de\/blog\/2008\/04\/06\/fehlender-vertikaler-abstand-zwischen-bildern-beim-internet-explorer-7\/"},"modified":"2008-04-07T21:47:24","modified_gmt":"2008-04-07T19:47:24","slug":"fehlender-vertikaler-abstand-zwischen-bildern-beim-internet-explorer-7","status":"publish","type":"post","link":"https:\/\/www.mediamill.de\/blog\/2008\/03\/15\/fehlender-vertikaler-abstand-zwischen-bildern-beim-internet-explorer-7\/","title":{"rendered":"Fehlender vertikaler Abstand zwischen Bildern beim Internet Explorer 7"},"content":{"rendered":"

Problem:<\/strong> Bei der Wartung unserer Typo3-Webseite ist bei der Qualit\u00e4tskontrolle im IE 7 aufgefallen, dass Bilder, die mit dem Typo3-Seiteninhaltstypen „nur Bilder“ oder „Text mit Bild“ als Seiteninhalt eingef\u00fcgt wurden, keinen vertikalen Abstand mehr hatten. Firefox, Opera und der Internet Explorer 6 zeigten den Seiteninhalt korrekt an.<\/p>\n

Der vertikale Abstand zwischen den Bildreihen wurde im Typo3 Template Constant Editor mit dem Befehl „styles.content.imgtext.rowSpace = 17“<\/span> auf 17 Pixel gesetzt.
\nDiese Einstellung wird durch die Extension tx_cssstyledcontent in eine tempor\u00e4re CSS Datei codiert.<\/p>\n

div.csc-textpic div.csc-textpic-imagewrap .csc-textpic-image {
\nmargin-bottom:17px;
\n}<\/p>\n

Anscheinend wird der CSS Befehl margin-bottom:17px;<\/span> durch einen Fehler im Internet Explorer 7 ignoriert.<\/p>\n

L\u00f6sung:<\/strong> Durch das Hinzuf\u00fcgen folgender CSS Blocks zu unserer eigenen CSS Datei wurden die vertikalen Abst\u00e4nde im IE 7 korrekt angezeigt. Der Befehl padding-bottom:17px;<\/span> wird vom Internet Explorer 7 richtig interpretiert. Der vertikale Abstand zwischen den einzelnen Bildern betr\u00e4gt nun wieder 17 Pixel.<\/p>\n

div.csc-textpic div.csc-textpic-imagewrap dl.csc-textpic-image {
\npadding-bottom:17px;
\n}<\/p>\n

Eine Kontrolle im Firefox zeigte nun aber, dass dort die vertikalen Abst\u00e4nde nun doppelt so gro\u00df waren wie vorher. Dies kommt daher, dass der Firefox Browser margin-bottom:17px; und <\/span>padding-bottom:17px; korrekt anzeigt und somit der Abstand zwischen den Bildern 34 Pixel betr\u00e4gt. Um dies zu korrigieren, musste die urspr\u00fcngliche Einstellung margin-bottom:17px;<\/span> mit margin-bottom:0px;<\/span> in unserem eigenen Stylesheet \u00fcberschrieben werden. Folgender CSS Block zeigt nun die richtigen Bildabst\u00e4nde. Dies wurde im Internet Explorer 7, Internet Explorer 6 und Firefox 2 \u00fcberpr\u00fcft.<\/p>\n

div.csc-textpic div.csc-textpic-imagewrap dl.csc-textpic-image {
\nmargin-bottom:0px;
\npadding-bottom:17px;
\n}<\/p>\n

Wem eine bessere L\u00f6sung einf\u00e4llt, der kann sie gerne mailen<\/a>.<\/p>\n

\n\n\n\n\n
\"IE6,<\/td>\n\"IE7:<\/td>\n<\/tr>\n
IE6, Firefox: korrekt<\/td>\nIE7: fehlender Abstand<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n","protected":false},"excerpt":{"rendered":"

Problem: Bei der Wartung unserer Typo3-Webseite ist bei der Qualit\u00e4tskontrolle im IE 7 aufgefallen, dass Bilder, die mit dem Typo3-Seiteninhaltstypen „nur Bilder“ oder „Text mit Bild“ als Seiteninhalt eingef\u00fcgt 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 […]<\/p>\n","protected":false},"author":3,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1,22],"tags":[],"class_list":["post-20","post","type-post","status-publish","format-standard","hentry","category-allgemein","category-typo3"],"_links":{"self":[{"href":"https:\/\/www.mediamill.de\/blog\/wp-json\/wp\/v2\/posts\/20","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.mediamill.de\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.mediamill.de\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.mediamill.de\/blog\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/www.mediamill.de\/blog\/wp-json\/wp\/v2\/comments?post=20"}],"version-history":[{"count":0,"href":"https:\/\/www.mediamill.de\/blog\/wp-json\/wp\/v2\/posts\/20\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.mediamill.de\/blog\/wp-json\/wp\/v2\/media?parent=20"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.mediamill.de\/blog\/wp-json\/wp\/v2\/categories?post=20"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.mediamill.de\/blog\/wp-json\/wp\/v2\/tags?post=20"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}