0
Ich habe immens Probleme mit einer Client-E-Mail-Vorlage, die ich beheben muss.E-Mail-Vorlage und Outlook
Der Client sagt mir, dass das Bannerbild in Outlook nicht zentriert ist, aber nach links ausgerichtet ist ... Ich kann nicht herausfinden, warum Outlook dies tut, also hier tippen ist mein letzter Ausweg, und ich hoffe, dass einige mit mehr Erfahrung in E-Mail-Vorlagen das Problem sehen und mich hoffentlich zu einer Lösung führen können. Die Vorlage wird mit einer Grundlage für E-Mails erstellt.
ist hier ein Bild des Problems in Outlook (das Bild ist nicht ausgerichtet Mitte): 
Code:
https://jsfiddle.net/eahjs8sc/
Ich hatte eine Geige zu machen, weil es zu viele Zeilen war von Code. Das Banner ist zumindest oben. Der aufgelistete Code ist nicht das vollständige Dokument.
Vielen Dank.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="width=device-width" /> <title>Columbus mail</title> <style type="text/css"> @media only screen { html { min-height: 100%; background: #f3f3f3 } } @media only screen and (max-width:596px) { .small-float-center { margin: 0 auto!important; float: none!important; text-align: center!important } .small-text-center { text-align: center!important } .small-text-left { text-align: left!important } .small-text-right { text-align: right!important } } @media only screen and (max-width:596px) { table.body table.container .hide-for-large { display: block!important; width: auto!important; overflow: visible!important } } @media only screen and (max-width:596px) { table.body table.container .row.hide-for-large { display: table!important; width: 100%!important } } @media only screen and (max-width:596px) { table.body table.container .show-for-large { display: none!important; width: 0; mso-hide: all; overflow: hidden } } @media only screen and (max-width:596px) { .margin-b-space { margin-bottom: 15px!important } img.float-left, img.float-right { margin: 0 auto; Margin: 0 auto; float: none; text-align: center } table.body img { width: auto!important; height: auto!important } table.body center { min-width: 0!important } table.body .container { width: 95%!important } table.body .column, table.body .columns { height: auto!important; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; padding-left: 28px!important; padding-right: 28px!important } table.body .column .column, table.body .column .columns, table.body .columns .column, table.body .columns .columns { padding-left: 0!important; padding-right: 0!important } table.body .collapse .column, table.body .collapse .columns { padding-left: 0!important; padding-right: 0!important } td.small-1, th.small-1 { display: inline-block!important; width: 8.33333%!important } td.small-2, th.small-2 { display: inline-block!important; width: 16.66667%!important } td.small-3, th.small-3 { display: inline-block!important; width: 25%!important } td.small-4, th.small-4 { display: inline-block!important; width: 33.33333%!important } td.small-5, th.small-5 { display: inline-block!important; width: 41.66667%!important } td.small-6, th.small-6 { display: inline-block!important; width: 50%!important } td.small-7, th.small-7 { display: inline-block!important; width: 58.33333%!important } td.small-8, th.small-8 { display: inline-block!important; width: 66.66667%!important } td.small-9, th.small-9 { display: inline-block!important; width: 75%!important } td.small-10, th.small-10 { display: inline-block!important; width: 83.33333%!important } td.small-11, th.small-11 { display: inline-block!important; width: 91.66667%!important } td.small-12, th.small-12 { display: inline-block!important; width: 100%!important } .column td.small-12, .column th.small-12, .columns td.small-12, .columns th.small-12 { display: block!important; width: 100%!important } table.body td.small-offset-1, table.body th.small-offset-1 { margin-left: 8.33333%!important; Margin-left: 8.33333%!important } table.body td.small-offset-2, table.body th.small-offset-2 { margin-left: 16.66667%!important; Margin-left: 16.66667%!important } table.body td.small-offset-3, table.body th.small-offset-3 { margin-left: 25%!important; Margin-left: 25%!important } table.body td.small-offset-4, table.body th.small-offset-4 { margin-left: 33.33333%!important; Margin-left: 33.33333%!important } table.body td.small-offset-5, table.body th.small-offset-5 { margin-left: 41.66667%!important; Margin-left: 41.66667%!important } table.body td.small-offset-6, table.body th.small-offset-6 { margin-left: 50%!important; Margin-left: 50%!important } table.body td.small-offset-7, table.body th.small-offset-7 { margin-left: 58.33333%!important; Margin-left: 58.33333%!important } table.body td.small-offset-8, table.body th.small-offset-8 { margin-left: 66.66667%!important; Margin-left: 66.66667%!important } table.body td.small-offset-9, table.body th.small-offset-9 { margin-left: 75%!important; Margin-left: 75%!important } table.body td.small-offset-10, table.body th.small-offset-10 { margin-left: 83.33333%!important; Margin-left: 83.33333%!important } table.body td.small-offset-11, table.body th.small-offset-11 { margin-left: 91.66667%!important; Margin-left: 91.66667%!important } table.body table.columns td.expander, table.body table.columns th.expander { display: none!important } table.body .right-text-pad, table.body .text-pad-right { padding-left: 10px!important } table.body .left-text-pad, table.body .text-pad-left { padding-right: 10px!important } table.menu { width: 100%!important } table.menu td, table.menu th { width: auto!important; display: inline-block!important } table.menu.small-vertical td, table.menu.small-vertical th, table.menu.vertical td, table.menu.vertical th { display: block!important } table.menu[align=center] { width: auto!important } } @media only screen and (min-width:596px) { .globus { margin-top: 25px } } </style></head><body style="-moz-box-sizing:border-box;-ms-text-size-adjust:100%;-webkit-box-sizing:border-box;-webkit-text-size-adjust:100%;Margin:0;box-sizing:border-box;color:#0a0a0a;font-family:Calibri,Verdana,Arial,sans-serif;font-size:12px;font-weight:400;line-height:14px;margin:0;min-width:100%;padding:0;text-align:left;width:100%!important"> <table class="body" style="Margin:0;background:#f3f3f3;border-collapse:collapse;border-spacing:0;color:#0a0a0a;font-family:Calibri,Verdana,Arial,sans-serif;font-size:12px;font-weight:400;height:100%;line-height:14px;margin:0;padding:0;text-align:left;vertical-align:top;width:100%"> <tbody> <tr style="padding:0;text-align:left;vertical-align:top"> <td class="center" align="center" valign="top" style="-moz-hyphens:auto;-webkit-hyphens:auto;Margin:0;border-collapse:collapse!important;color:#0a0a0a;font-family:Calibri,Verdana,Arial,sans-serif;font-size:12px;font-weight:400;hyphens:auto;line-height:14px;margin:0;padding:0;text-align:left;vertical-align:top;word-wrap:break-word"> <table class="container float-center" style="Margin:0 auto;background:#fff;border-collapse:collapse;border-spacing:0;float:none;margin:0 auto;padding:0;text-align:center;vertical-align:top;width:595px"> <tbody> <tr style="padding:0;text-align:left;vertical-align:top"> <td style="-moz-hyphens:auto;-webkit-hyphens:auto;Margin:0;border-collapse:collapse!important;color:#0a0a0a;font-family:Calibri,Verdana,Arial,sans-serif;font-size:12px;font-weight:400;hyphens:auto;line-height:14px;margin:0;padding:0;text-align:left;vertical-align:top;word-wrap:break-word"> <table class="row" style="border-collapse:collapse;border-spacing:0;display:table;padding:0;position:relative;text-align:left;vertical-align:top;width:100%"> <tbody> <tr style="padding:0;text-align:left;vertical-align:top"> <th style="Margin:0;color:#0a0a0a;font-family:Calibri,Verdana,Arial,sans-serif;font-size:12px;font-weight:400;line-height:14px;margin:0;padding:0;text-align:left"><img src="http://www.columbusitonline.dk/pics/kunde-hos-columbus.jpg" alt="kunde hos columbus" width="595" height="236" class="float-center" style="-ms-interpolation-mode:bicubic;Margin:0 auto;clear:both;display:block;float:none;margin:0 auto;max-width:100%;outline:0;text-align:center;text-decoration:none;width:auto" align="center"></th> </tr> </tbody> </table> <table class="row" style="border-collapse:collapse;border-spacing:0;display:table;padding:0;position:relative;text-align:left;vertical-align:top;width:100%"> <tbody> <tr style="padding:0;text-align:left;vertical-align:top"> <th class="large-4 columns first" style="Margin:0 auto;color:#0a0a0a;font-family:Calibri,Verdana,Arial,sans-serif;font-size:12px;font-weight:400;line-height:14px;margin:0 auto;padding:0;padding-left:28px;padding-right:8px;text-align:left;width:177.33px"> <table style="border-collapse:collapse;border-spacing:0;padding:0;text-align:left;vertical-align:top;width:100%"> <tbody> <tr style="padding:0;text-align:left;vertical-align:top"> <th style="Margin:0;color:#0a0a0a;font-family:Calibri,Verdana,Arial,sans-serif;font-size:12px;font-weight:400;line-height:14px;margin:0;padding:0;text-align:left"> <p class="text-align-right" style="Margin:0;Margin-bottom:10px;color:#0a0a0a;font-family:Calibri,Verdana,Arial,sans-serif;font-size:12px;font-weight:400;line-height:14px;margin:0;margin-bottom:10px;padding:0;text-align:left">Maj 2016</p> </th> </tr> </tbody> </table> </th> <th class="large-4 columns last" style="Margin:0 auto;color:#0a0a0a;font-family:Calibri,Verdana,Arial,sans-serif;font-size:12px;font-weight:400;line-height:14px;margin:0 auto;padding:0;padding-left:8px;padding-right:28px;text-align:left;width:177.33px"> <table style="border-collapse:collapse;border-spacing:0;padding:0;text-align:left;vertical-align:top;width:100%"> <tbody> <tr style="padding:0;text-align:left;vertical-align:top"> <th style="Margin:0;color:#0a0a0a;font-family:Calibri,Verdana,Arial,sans-serif;font-size:12px;font-weight:400;line-height:14px;margin:0;padding:0;text-align:left"> <p class="text-right" style="Margin:0;Margin-bottom:10px;color:#0a0a0a;font-family:Calibri,Verdana,Arial,sans-serif;font-size:12px;font-weight:400;line-height:14px;margin:0;margin-bottom:10px;padding:0;text-align:right"><a href="http://analytics.columbusglobal.com/columbusglobalcom-a10wp/pages/ku6dddaieese1aavxf9npg.html" style="Margin:0;color:#0a0a0a;font-family:Calibri,Verdana,Arial,sans-serif;font-weight:400;line-height:1.3;margin:0;padding:0;text-align:left;text-decoration:none">Tilmeld en kollega</a></p> </th> </tr> </tbody> </table> </th> </tr> </tbody> </table> <table class="row" style="border-collapse:collapse;border-spacing:0;display:table;padding:0;position:relative;text-align:left;vertical-align:top;width:100%"> <tbody> <tr style="padding:0;text-align:left;vertical-align:top"> <th class="padder" style="Margin:0;color:#0a0a0a;font-family:Calibri,Verdana,Arial,sans-serif;font-size:12px;font-weight:400;line-height:14px;margin:0;padding:0;padding-left:28px;padding-right:28px;text-align:left"> <hr class="style-dashed" style="Margin:20px auto;background:#999;border:0;border-bottom:1px dashed #ccc;border-left:0;border-right:0;border-top:0;clear:both;height:0;margin:20px auto;max-width:595px"> </th> </tr> </tbody> </table> <table class="row" style="border-collapse:collapse;border-spacing:0;display:table;padding:0;position:relative;text-align:left;vertical-align:top;width:100%"> <tbody> <tr style="padding:0;text-align:left;vertical-align:top"> <th class="small-12 large-6 columns first" style="Margin:0 auto;color:#0a0a0a;font-family:Calibri,Verdana,Arial,sans-serif;font-size:12px;font-weight:400;line-height:14px;margin:0 auto;padding:0;padding-left:28px;padding-right:8px;text-align:left;width:274px"> <table style="border-collapse:collapse;border-spacing:0;padding:0;text-align:left;vertical-align:top;width:100%"> <tbody> <tr style="padding:0;text-align:left;vertical-align:top">
Seufz ... HTML E-Mails und MS-Outlook. Das hat endlose Zeitverschwendung von guten Entwicklern gekostet. Viel Glück. – arkascha
Ich habe das Gefühl, dass ich zu diesem Job ja nicht hätte sagen sollen haha>< –
Sie sollten überlegen, mit den Email-Vorlagen der Zurb Foundation zu arbeiten. Sie reagieren, sie sehen in allen Browsern und E-Mail-Clients gut aus. Ansonsten sollten Sie sich Litmus ansehen, ein Framework zum Testen Ihrer E-Mails in verschiedenen E-Mail-Clients und Browsern :) – RasmusGlenvig