All geek questions in one place

Setting the maximum width for HTML email in Outlook - why is it different from Gmail?

I worked on creating an HTML email, and for some reason it looks great in MailChimp / Chrome / GMail, but in Outlook the columns are stretched and look awful (see screenshots). I am not very good at HTML, and I tried to change several parameters of maximum width to 600 pixels instead of 100% without success.

I would like the letter to always be 600 pixels wide.

Any help is appreciated.

Web view

^ What it looks like in Chrome / Gmail

Outlook View

^ What it looks like in Outlook (the upper blue part is 600 pixels, and the rest are stretched).

Here is the HTML code I'm working with:

<style type="text/css"> #outlook a{ padding:0; } body{ width:600 !important; } .ReadMsgBody{ width:100%; } .ExternalClass{ width:100%; } body{ -webkit-text-size-adjust:none; } body{ margin:0; padding:0; } img{ height:auto; line-height:100%; outline:none; text-decoration:none; } #backgroundTable{ height:100% !important; margin:0; padding:0; width:100% !important; } body,#backgroundTable{ background-color:#314A66; } h1,.h1{ color:#FFFFFF; display:block; font-family:Verdana; font-size:26px; font-weight:bold; line-height:100%; margin-top:0; margin-right:0; margin-bottom:10px; margin-left:0; text-align:center; } h2,.h2{ color:#0E385F; display:block; font-family:Verdana; font-size:22px; font-weight:bold; line-height:100%; margin-top:0; margin-right:0; margin-bottom:10px; margin-left:0; text-align:left; } h3,.h3{ color:#0E385F; display:block; font-family:Verdana; font-size:20px; font-weight:bold; line-height:100%; margin-top:0; margin-right:0; margin-bottom:10px; margin-left:0; text-align:left; } h4,.h4{ color:#0E385F; display:block; font-family:Verdana; font-size:12px; font-weight:bold; line-height:100%; margin-top:0; margin-right:0; margin-bottom:10px; margin-left:0; text-align:left; } #templatePreheader{ background-color:#36C0CC; } .preheaderContent div{ color:#CCCCCC; font-family:Lucida Sans,Lucida; font-size:10px; line-height:110%; text-align:left; } .preheaderContent div a:link,.preheaderContent div a:visited,.preheaderContent div a .yshortcuts { color:#EEEEEE; font-weight:normal; text-decoration:underline; } #templateHeader{ background-color:#36C0CC; border-bottom:0; } .headerContent div{ color:#FFFFFF; font-family:Verdana; font-size:14px; font-weight:normal; line-height:100%; padding-top:20px; padding-right:20px; padding-bottom:20px; padding-left:10px; text-align:left; vertical-align:top; } .headerContent div a:link,.headerContent div a:visited,.headerContent div a .yshortcuts { color:#336699; font-weight:normal; text-decoration:underline; } .headerContent div img{ height:auto; max-width:600px; } #templateContainer,.bodyContent{ background-color:#FFFFFF; } #templateBody{ border:0px none #10263F; } .bodyContent div,#social div{ color:#505050; font-family:Verdana; font-size:12px; line-height:150%; } .bodyContent div{ text-align:justify; } .bodyContent div a:link,.bodyContent div a:visited,.bodyContent div a .yshortcuts ,#social div a:link,#social div a:visited{ color:#336699; font-weight:normal; text-decoration:none; } .bodyContent div img{ display:inline; height:auto; max-width:360px; } #social{ padding-top:20px; padding-right:20px; padding-bottom:20px; padding-left:20px; } #social div{ text-align:center; } #social div img{ max-width:560px; } #templateSidebar{ background-color:#accb50; border-left:0px dotted; } .sidebarContent div{ color:#ffffff; font-family:Lucida Sans,Lucida; font-size:11px; line-height:150%; text-align:justify; } .sidebarContent div a:link,.sidebarContent div a:visited,.sidebarContent div a .yshortcuts { color:#336699; font-weight:normal; text-decoration:none; } .sidebarContent img{ display:inline; height:auto !important; margin-bottom:10px !important; } #templateFooter{ background-color:#36C0CC; border-top:2px solid #111111; } .footerContent div{ color:#CCCCCC; font-family:Verdana; font-size:10px; line-height:125%; text-align:left; } .footerContent div a:link,.footerContent div a:visited,.footerContent div a .yshortcuts { color:#EEEEEE; font-weight:normal; text-decoration:underline; } .footerContent img{ display:inline; } #utility{ background-color:#36C0CC; border:0; } #utility div{ text-align:center; } #monkeyRewards img{ max-width:190px; } body,#backgroundTable{ background-color:#ffffff; } h1,.h1{ color:#ffffff; text-align:left; font-family:Lucida Sans,Lucida; line-height:110%; } .footerContent div a:link,.footerContent div a:visited,.footerContent div a .yshortcuts{ color:#4D4C4C; } .bodyContent div,#social div{ font-family:Lucida Sans,Lucida; font-size:11px; color:#545454; line-height:150%; } #templateContainer,.bodyContent{ background-color:#E2E2E2; } </style></head> <body leftmargin="0" marginwidth="0" topmargin="0" marginheight="0" offset="0" style="-webkit-text-size-adjust: none;margin: 0;padding: 0;background-color: #ffffff;width: 600 !important;"> <center> <table border="0" cellpadding="0" cellspacing="0" height="100%" width="100%" id="backgroundTable" style="margin: 0;padding: 0;background-color: #ffffff;height: 100% !important;width: 100% !important;"> <tr> <td align="center" valign="top"> <!-- // Begin Template Preheader \\ --> <table border="0" cellpadding="10" cellspacing="0" width="600" id="templatePreheader" style="background-color: #36C0CC;"> <tr> <td valign="top" class="preheaderContent"> <!-- // Begin Module: Standard Preheader \ --> <table border="0" cellpadding="10" cellspacing="0" width="100%"> <tr> <td valign="top"> <div style="color: #CCCCCC;font-family: Lucida Sans,Lucida;font-size: 10px;line-height: 110%;text-align: left;"><a href="www.scandit.com" target="_blank" style="color: #EEEEEE;font-weight: normal;text-decoration: underline;"><img align="left" alt="" height="57" src="http://gallery.mailchimp.com/3c1958ec76b5e1d93c32cf088/files/scandit_logo_white_wtag2.png" style="width: 147px;height: 57px;float: left;border-width: 0px;border-style: solid;line-height: 100%;outline: none;text-decoration: none;" width="147"></a> </div> </td> <!-- *|IFNOT:ARCHIVE_PAGE|* --> <td valign="top" width="190"> <div style="color: #CCCCCC;font-family: Lucida Sans,Lucida;font-size: 10px;line-height: 110%;text-align: left;"> Is this email not displaying correctly?<br><a href="*|ARCHIVE|*" target="_blank" style="color: #EEEEEE;font-weight: normal;text-decoration: underline;">View it in your browser</a>. </div> </td> <!-- *|END:IF|* --> </tr> </table> <!-- // End Module: Standard Preheader \ --> </td> </tr> </table> <!-- // End Template Preheader \\ --> <table border="0" cellpadding="0" cellspacing="0" width="600" id="templateContainer" style="background-color: #E2E2E2;"> <tr> <td align="center" valign="top"> <!-- // Begin Template Header \\ --> <table border="0" cellpadding="0" cellspacing="0" width="600" id="templateHeader" style="background-color: #36C0CC;border-bottom: 0;"> <tr> <td class="headerContent"> <div style="color: #FFFFFF;font-family: Verdana;font-size: 14px;font-weight: normal;line-height: 100%;padding-top: 20px;padding-right: 20px;padding-bottom: 20px;padding-left: 10px;text-align: left;vertical-align: top;"><span style="font-size:24px;"><strong>&nbsp;Howdy!</strong><br></span></div> <div id="_com_1" uage="JavaScript" style="color: #FFFFFF;font-family: Lucida Sans,Lucida;font-size: 14px;line-height: 150%;text-align: justify; padding-left: 20px;"> Welcome!<br><br> <br></div> </td> </tr> </table> <!-- // End Template Header \\ --> </td> </tr> <tr> <td align="center" valign="top"> <!-- // Begin Template Body \\ --> <table border="0" cellpadding="0" cellspacing="0" width="600" id="templateBody" style="border: 0px none #10263F;"> <tr> <td valign="top"> <table border="0" cellpadding="0" cellspacing="0"> <tr> <td valign="top" class="bodyContent" style="background-color: #E2E2E2;"> <!-- // Begin Module: Standard Content \\ --> <table border="0" cellpadding="20" cellspacing="0" width="100%"> <tr> <td valign="top"> <div style="color: #545454;font-family: Lucida Sans,Lucida;font-size: 11px;line-height: 150%;text-align: justify;"><div style="text-align: left;color: #545454;font-family: Lucida Sans,Lucida;font-size: 11px;line-height: 150%;"> <div style="color: #545454;font-family: Lucida Sans,Lucida;font-size: 11px;line-height: 150%;text-align: justify;"> <div style="color: #545454;font-family: Lucida Sans,Lucida;font-size: 11px;line-height: 150%;text-align: justify;"> <strong>Features</strong><br> <hr> </div> <ul> </ul> &nbsp;</div> <hr> &nbsp;<br> <center><FORM METHOD="LINK" ACTION="https://SAMPLE TEXT SAMPLE TEXT SAMPLE TEXT"> <INPUT TYPE="submit" VALUE="SAMPLE TEXT SAMPLE TEXT SAMPLE TEXT"> </FORM></center> &nbsp;<br> &nbsp;<br> SAMPLE TEXT <br> </div> </div> </div> </div> </td> </tr> </table> <!-- // End Module: Standard Content \\ --> </td> </tr> </table> </td> <!-- // Begin Sidebar \\ --> <td valign="top" width="300" id="templateSidebar" style="background-color: #accb50;border-left: 0px dotted;"> <table border="0" cellpadding="0" cellspacing="0" width="00"> <tr> <td valign="top" class="sidebarContent" style="padding-bottom:20px;"> <table border="0" cellpadding="20" cellspacing="0" width="100%"> <tr> <td valign="top" style="padding-bottom:0;"> <div style="color: #ffffff;font-family: Lucida Sans,Lucida;font-size: 11px;line-height: 150%;text-align: justify;"><h4 class="h4" style="color: #0E385F;display: block;font-family: Verdana;font-size: 12px;font-weight: bold;line-height: 100%;margin-top: 0;margin-right: 0;margin-bottom: 10px;margin-left: 0;text-align: left;"> <span style="color:#fff0f5;">Getting Started</span></h4> <hr> <div style="text-align: left;color: #ffffff;font-family: Lucida Sans,Lucida;font-size: 11px;line-height: 150%;"> <strong><span style="font-size:12px;"><span style="color: rgb(255, 240, 245); "> <ul> <li>Barcode Scanner SDK Documentation <ul> </ul> &nbsp;<br> SAMPLE TEXTSAMPLE TEXTSAMPLE TEXT <a href="" target="_blank" style="color: #336699;font-weight: normal;text-decoration: none;">FAQs</a> or <a href="mailto:SAMPLETEXT.com" target="_blank" style="color: #336699;font-weight: normal;text-decoration: none;">contact us</a>.<br> <h4 style="color: #0E385F;display: block;font-family: Verdana;font-size: 12px;font-weight: bold;line-height: 100%;margin-top: 0;margin-right: 0;margin-bottom: 10px;margin-left: 0;text-align: left;"> <br><br> <span style="color:#fff0f5;">Get in Touch</span></h4> <hr> SAMPLE TEXT SAMPLE TEXT SAMPLE TEXT<br> <h4 style="color: #0E385F;display: block;font-family: Verdana;font-size: 12px;font-weight: bold;line-height: 100%;margin-top: 0;margin-right: 0;margin-bottom: 10px;margin-left: 0;text-align: left;"> <br><br> <span style="color:#fff0f5;">Connect with us</span></h4> <hr> </div> </td> </tr> </table> <!-- // Begin Module: Social Block with Icons \\ --> <table border="0" cellpadding="0" cellspacing="0" width="100%"> <tr> <td valign="top" style="padding-left:20px; padding-right:20px;"> <table border="0" cellpadding="0" cellspacing="4"> <tr mc:hideable="hideable_1" mchideable="hideable_1"> <td align="left" valign="middle" width="16"> <img src="http://gallery.mailchimp.com/653153ae841fd11de66ad181a/images/sfs_icon_facebook.png" style="margin: 0 !important;height: auto !important;line-height: 100%;outline: none;text-decoration: none;display: inline;margin-bottom: 10px !important;"> </td> <td align="left" valign="top"> <div style="color: #ffffff;font-family: Lucida Sans,Lucida;font-size: 11px;line-height: 150%;text-align: justify;"><div style="text-align: left;color: #ffffff;font-family: Lucida Sans,Lucida;font-size: 11px;line-height: 150%;"> <span style="font-size:11px;"><a href="http://www.facebook.com/pages/Scandit/127334280653842" target="_blank" style="color: #336699;font-weight: normal;text-decoration: none;">Friend us on Facebook</a></span></div> </div> </td> </tr> <tr mc:hideable="hideable_2" mchideable="hideable_2"> <td align="left" valign="middle" width="16"> <img src="http://gallery.mailchimp.com/653153ae841fd11de66ad181a/images/sfs_icon_twitter.png" style="margin: 0 !important;height: auto !important;line-height: 100%;outline: none;text-decoration: none;display: inline;margin-bottom: 10px !important;"> </td> <td align="left" valign="top"> <div style="color: #ffffff;font-family: Lucida Sans,Lucida;font-size: 11px;line-height: 150%;text-align: justify;"><a href="http://www.twitter.com/scandit" target="_blank" style="color: #336699;font-weight: normal;text-decoration: none;">Follow us on Twitter</a> </div> </td> </tr> <tr mc:hideable="hideable_3" mchideable="hideable_3"> <td align="left" valign="middle" width="16"> <img src="http://gallery.mailchimp.com/27aac8a65e64c994c4416d6b8/images/sfs_icon_rss.1.png" style="margin: 0 !important;height: auto !important;line-height: 100%;outline: none;text-decoration: none;display: inline;margin-bottom: 10px !important;"> </td> <td align="left" valign="top"> <div style="color: #ffffff;font-family: Lucida Sans,Lucida;font-size: 11px;line-height: 150%;text-align: justify;"><a href="http://www.scandit.com/blog" target="_blank" style="color: #336699;font-weight: normal;text-decoration: none;">Read our blog</a> </div> </td> </tr> <tr mc:hideable="hideable_4" mchideable="hideable_4"> <td align="left" valign="middle" width="16"> <img src="http://gallery.mailchimp.com/653153ae841fd11de66ad181a/images/sfs_icon_forward.png" style="margin: 0 !important;height: auto !important;line-height: 100%;outline: none;text-decoration: none;display: inline;margin-bottom: 10px !important;"> </td> <td align="left" valign="top"> <div style="color: #ffffff;font-family: Lucida Sans,Lucida;font-size: 11px;line-height: 150%;text-align: justify;"><div style="text-align: left;color: #ffffff;font-family: Lucida Sans,Lucida;font-size: 11px;line-height: 150%;"> <a href="*|FORWARD|*" style="color: #336699;font-weight: normal;text-decoration: none;">Sign up for our newsletter</a></div> </div> </td> </tr> </table> </td> </tr> </table> <!-- // End Module: Social Block with Icons \\ --> </td> </tr> </table> </td> <!-- // End Sidebar \\ --> </tr> <tr> <td colspan="2" valign="middle" id="social" style="padding-top: 20px;padding-right: 20px;padding-bottom: 20px;padding-left: 20px;"> <div style="color: #545454;font-family: Lucida Sans,Lucida;font-size: 11px;line-height: 150%;text-align: center;"><a href="" target="_blank" style="color: #336699;font-weight: normal;text-decoration: none;">follow on Twitter</a> | <a href="" target="_blank" style="color: #336699;font-weight: normal;text-decoration: none;">friend on Facebook</a> | <a href="http://www.scandit.com/blog/" target="_blank" style="color: #336699;font-weight: normal;text-decoration: none;">read our blog</a> | <a href="*|FORWARD|*" style="color: #336699;font-weight: normal;text-decoration: none;">forward to a friend</a>&nbsp; </div> <center><em>SAMPLE TEXTSAMPLE <a href="" target="_blank" style="color: #336699;font-weight: normal;text-decoration: none;">SAMPLE TEXT</a>.</em></center> </td> </tr> </table> <!-- // End Template Body \\ --> </td> </tr> <tr> <td align="center" valign="top"> <!-- // Begin Template Footer \\ --> <table border="0" cellpadding="10" cellspacing="0" width="600" id="templateFooter" style="background-color: #36C0CC;border-top: 2px solid #111111;"> <tr> <td valign="top" class="footerContent"> <!-- // Begin Module: Standard Footer \\ --> <table border="0" cellpadding="10" cellspacing="0" width="100%"> <tr> <td valign="top" width="350"> <div style="color: #CCCCCC;font-family: Verdana;font-size: 10px;line-height: 125%;text-align: left;"> <em>Copyright &copy; *|CURRENT_YEAR|* *|LIST:COMPANY|*, All rights reserved.</em> <br> *|IFNOT:ARCHIVE_PAGE|* *|LIST:DESCRIPTION|* <br> <strong>Our mailing address is:</strong> <br> *|HTML:LIST_ADDRESS_HTML|* <br> *|END:IF|* </div> </td> <td valign="top" width="190" id="monkeyRewards"> <div style="color: #CCCCCC;font-family: Verdana;font-size: 10px;line-height: 125%;text-align: left;"> *|IF:REWARDS|* *|HTML:REWARDS|* *|END:IF|* </div> </td> </tr> <tr> <td colspan="2" valign="middle" id="utility" style="background-color: #36C0CC;border: 0;"> <div style="color: #CCCCCC;font-family: Verdana;font-size: 10px;line-height: 125%;text-align: center;"> &nbsp; <a href="*|ARCHIVE|*" style="color: #4D4C4C;font-weight: normal;text-decoration: underline;">view email in browser</a>*|END:IF|*&nbsp; </div> </td> </tr> </table> <!-- // End Module: Standard Footer \\ --> </td> </tr> </table> <!-- // End Template Footer \\ --> </td> </tr> </table> <br> </td> </tr> </table> </center> </body> </html> </body> </html>
+4
source share
4 answers

It is best to use emails to use tabular layouts and inline style. If you use the MailChimp template system to create this email, the CSS styles that you define will be automatically executed when submitted. You should still use a tabular layout.

Example:

 <table width="600" cellpadding="0" cellspacing="0"> <tr> <td style="background: #36C0CC" colspan="2">Blue Section</td> </tr> <tr> <td style="background: gray">Gray Section</td> <td style="background: #accb50">Green Section</td> </tr> </table>
+7
source

You could simulate it using an Outlook conditional tag . You just use a sandwich on which you apply the maximum width. with him.

 <!--[if mso]> <center> <table><tr><td width="580"> <![endif]--> <div style="max-width:580px; margin:0 auto;"> <p>This text will be centered and constrained to 580 pixels even on Outlook which does not support max-width CSS</p> </div> <!--[if mso]> </td></tr></table> </center> <![endif]-->
+2
source

I think you forgot px after 600 in

  body{ width:600 !important; }

Therefore it should work

  body{ width:600px !important; }

And it’s not good to set up the body again, which you did twice.

+1
source

Try this max example. width. It uses a combination of maximum width, Outlook conditional expressions, and media queries for Outlook'11 (which is web-based and cannot target Outlook conditions):

 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title></title> <style type="text/css"> /* Client-specific Styles - last updated 18 Feb 2014 */ #outlook a {padding:0;} body{width:100% !important; -webkit-text-size-adjust:100%; -ms-text-size-adjust:100%; margin:0; padding:0;} /* force default font sizes */ .ExternalClass {width:100%;} .ExternalClass, .ExternalClass p, .ExternalClass span, .ExternalClass font, .ExternalClass td, .ExternalClass div {line-height: 100%;} /* Hotmail */ a:active, a:visited, a[href^="tel"], a[href^="sms"] { text-decoration: none; color: #005288 !important; pointer-events: auto; cursor: default;} .link1 a, .link1 a:active, .link1 a:visited {color: #005288 !important; text-decoration: none;} .link2 a, .link2 a:active, .link2 a:visited {color: #FFFFFE !important; text-decoration: none;} table td {border-collapse: collapse;} @media only screen and (min-width: 600px) { .maxW { width:600px !important; } } </style> </head> <body style="margin: 0px; padding: 0px; -webkit-text-size-adjust:none; -ms-text-size-adjust:none;" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" bgcolor="#FFFFFF"><table bgcolor="#252525" width="100%" border="0" align="center" cellpadding="0" cellspacing="0"><tr><td valign="top"> <!--[if (gte mso 9)|(IE)]> <table width="600" align="center" cellpadding="0" cellspacing="0" border="0"><tr><td valign="top"> <![endif]--> <table width="100%" class="maxW" style="max-width: 600px; margin: auto;" border="0" align="center" cellpadding="0" cellspacing="0"><tr><td valign="top" align="center" style="padding-top:30px; padding-bottom:30px;"> <table width="100%" border="0" cellpadding="0" cellspacing="0" bgcolor="#FFFFFF" style="margin: auto;"> <tr> <td align="left" style="padding:30px;"> Content </td> </tr> </table> </td></tr></table> <!--[if (gte mso 9)|(IE)]> </td></tr></table> <![endif]--> </td></tr></table></body></html>
0
source

Source: https://habr.com/ru/post/1443169/

More articles:


All Articles