E-mail template and outlook
Question
I'm having immense trouble with a client email template that I have to fix.
The client tells me, that the banner image in outlook is not center aligned, but is aligned to the left... I can't figure out why Outlook does this, so typing here is my last resort, and I hope some with more experience in email templates can see the problem and hopefully guide me to a fix. The template is made with foundation for emails.
Here is a picture of the problem in Outlook(the image is not center aligned):
CODE:
https://jsfiddle.net/eahjs8sc/
I had to make a fiddle because there was to many lines of code. The banner is at the top at least. The code listed is not the complete document.
Thank you.
<!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">
1 answers
solution1
1 ACCPTED 2016-06-28 07:16:31
在放置图像的TH中 ，有内联css text-align:left使其成为text-align:center ，它将起作用。
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
Html e-mail template - Outlook ignore width of elements
Media Query support in Outlook app using E-mail template
HTML e-mail template
Wrong display of html e-mail in Outlook
Responsive html e-mail: outlook
Sending a HTML E-mail through outlook
HTML E-mail Template Centering
Achieving wanted layout for e-mail template
How to create a HTML e-mail template?
HTML e-mail in outlook using PHP mail() function
Related Tags