This is a confirmation email from a MailJet subscription widget. Problem is that the body goes too wide in Outlook but header is responsive and looks correct. I've tried a ton of things like fixed width, break word, etc to try and contain the body. I'm sure it is simple but I guess this is part of the learning journey! Any help is much appreciated!
<html><body><div class="mj-w-double-optin-email" style="width: 100%; max-width: 600px; background-color: white; box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.35);">
<table class="mockup-content paint-area mj-opt-in" style="width: 100%; background-color: black; font-family: Ubuntu, Helvetica; border-collapse: collapse;">
<tbody><tr class="mj-opt-in-head" style="height: 20px; line-height: 20px;"><td> </td></tr>
</tbody></table>
<table class="mockup-content paint-area" style="width: 100%; font-family: Ubuntu, Helvetica; border-collapse: collapse;background-color: #e7eaef;">
<tbody><tr style="height: 60px; line-height: 60px; width: 100%; text-align: center;"><td><div class="mj-opt-in-title paint-area paint-area--text Medium Medium-rich" style="font-family: Ubuntu, Helvetica; color:#7d7f8b; display: inline-block; vertical-align: middle;"><b class="medium-b"><font size="6">Joy Kate Designs</font></b></div></td></tr>
</tbody></table>
<table class="mockup-content paint-area" style="width: 100%; background-color: white; font-family: Ubuntu, Helvetica; border-collapse: collapse;">
<tbody><tr style="text-align: center; padding: 0 0 20px 0;">
<td style="height: 75px; line-height: 75px; width: 100%; vertical-align: middle;">
<span class="mj-opt-in-subscribe-title paint-area paint-area--text Medium Medium-rich" style="font-family: Ubuntu, Helvetica; font-size: 18px; color: #333333; line-height: normal;"><b class="medium-b">Please Confirm Your Subscription</b>
</span>
</td>
</tr>
<tr><td style="height: 75px; line-height: 75px; width: 100%; vertical-align: middle; padding: 0 60px;"><div class="mj-opt-in-display-text paint-area paint-area--text Medium Medium-rich" style="text-align: left; color: grey; margin-bottom: 25px; line-height: normal;">Thank you very much for your subscription to our newsletter. To finalise it, please click on the button below. If you didn't ask to subscribe or you have changed your mind, simply ignore this email.</div></td></tr>
<tr>
<td style="padding-bottom: 15px; text-align: center;">
<data id="start-link"></data>
<div class="mj-opt-in-button mj-w-btn mockup-content paint-area" style="font-family: Ubuntu, Helvetica; font-size: 13px; padding: 0px 25px; color: white; background-color: rgb(240, 104, 104); text-align: center; display: inline-block; border-radius: 3px;">
<div style="display: table; height: 45px; width: 100%;">
<div style="display: table-cell; vertical-align: middle;">
<div class="mj-opt-in-button-content paint-area paint-area--text Medium Medium-rich" style="font-family: Ubuntu, Helvetica; display: inline-block; vertical-align: middle;"><b class="medium-b">CLICK HERE TO SUBSCRIBE</b></div>
</div>
</div>
</div>
<data id="end-link"></data>
</td>
</tr>
<tr><td style="text-align: left; height: 75px; line-height: 75px; width: 100%; vertical-align: middle; padding: 0 60px;"><div class="mj-opt-in-footer paint-area paint-area--text Medium Medium-rich" style="display: inline-block; font-family: Ubuntu, Helvetica; text-align: left; margin-bottom: 24px; color: grey; line-height: normal;"><i class="medium-i" style="word-break: break all; max-width: 600px;">If you are having troubles with the button, copy/paste the following URL in your browser: [URL]</i></div></td></tr>
<tr><td style="text-align: left; padding: 0 60px; height: 30px; line-height: 30px;"><div class="mj-opt-in-signature-top paint-area paint-area--text Medium Medium-rich" style="font-family: Ubuntu, Helvetica; display: inline-block; text-align: left; color: grey; line-height: normal;">Thanks,</div></td></tr>
<tr><td style="text-align: left; padding: 0 60px; height: 30px; line-height: 30px;"><div class="mj-opt-in-signature-bottom paint-area paint-area--text Medium Medium-rich" style="font-family: Ubuntu, Helvetica; display: inline-block; text-align: left; color: grey; line-height: normal;"><b class="medium-b">Joy Kate Designs</b></div></td></tr>
</tbody></table>
</div></body></html>
The main problem here is that The Outlooks on Windows don’t support max-width (see Can I email for details). An easy solution is to add what’s usually referred to as a ghost table: a <table> within conditional comments specifically for Outlook.
Add the following right after the opening of your <body>:
<!--[if mso]>
<table cellspacing="0" cellpadding="0" border="0" align="center" role="presentation" style="width:600px;"><tr><td>
<![endif]-->
And add the following right before the closing of your </body>:
<!--[if mso]>
</td></tr></table>
<![endif]-->
It also looks like the generated URL at the end of your email (seen in your screenshot but not in your code) is forcing your layout to expand. To prevent this, you can force the text to break on multiple lines by adding word-break:break-all; word-wrap:break-word; in the style of the maching <td>.
Here’s a full code example fixing these two issues (tested on Email on Acid):
<html><body>
<!--[if mso]>
<table cellspacing="0" cellpadding="0" border="0" align="center" role="presentation" style="width:600px;"><tr><td>
<![endif]-->
<div class="mj-w-double-optin-email" style="width: 100%; max-width: 600px; background-color: white; box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.35);">
<table class="mockup-content paint-area mj-opt-in" style="width: 100%; background-color: black; font-family: Ubuntu, Helvetica; border-collapse: collapse;">
<tbody><tr class="mj-opt-in-head" style="height: 20px; line-height: 20px;"><td> </td></tr>
</tbody></table>
<table class="mockup-content paint-area" style="width: 100%; font-family: Ubuntu, Helvetica; border-collapse: collapse;background-color: #e7eaef;">
<tbody><tr style="height: 60px; line-height: 60px; width: 100%; text-align: center;"><td><div class="mj-opt-in-title paint-area paint-area--text Medium Medium-rich" style="font-family: Ubuntu, Helvetica; color:#7d7f8b; display: inline-block; vertical-align: middle;"><b class="medium-b"><font size="6">Joy Kate Designs</font></b></div></td></tr>
</tbody></table>
<table class="mockup-content paint-area" style="width: 100%; background-color: white; font-family: Ubuntu, Helvetica; border-collapse: collapse;">
<tbody><tr style="text-align: center; padding: 0 0 20px 0;">
<td style="height: 75px; line-height: 75px; width: 100%; vertical-align: middle;">
<span class="mj-opt-in-subscribe-title paint-area paint-area--text Medium Medium-rich" style="font-family: Ubuntu, Helvetica; font-size: 18px; color: #333333; line-height: normal;"><b class="medium-b">Please Confirm Your Subscription</b>
</span>
</td>
</tr>
<tr><td style="height: 75px; line-height: 75px; width: 100%; vertical-align: middle; padding: 0 60px;"><div class="mj-opt-in-display-text paint-area paint-area--text Medium Medium-rich" style="text-align: left; color: grey; margin-bottom: 25px; line-height: normal;">Thank you very much for your subscription to our newsletter. To finalise it, please click on the button below. If you didn't ask to subscribe or you have changed your mind, simply ignore this email.</div></td></tr>
<tr>
<td style="padding-bottom: 15px; text-align: center;">
<data id="start-link"></data>
<div class="mj-opt-in-button mj-w-btn mockup-content paint-area" style="font-family: Ubuntu, Helvetica; font-size: 13px; padding: 0px 25px; color: white; background-color: rgb(240, 104, 104); text-align: center; display: inline-block; border-radius: 3px;">
<div style="display: table; height: 45px; width: 100%;">
<div style="display: table-cell; vertical-align: middle;">
<div class="mj-opt-in-button-content paint-area paint-area--text Medium Medium-rich" style="font-family: Ubuntu, Helvetica; display: inline-block; vertical-align: middle;"><b class="medium-b">CLICK HERE TO SUBSCRIBE</b></div>
</div>
</div>
</div>
<data id="end-link"></data>
</td>
</tr>
<tr><td style="text-align: left; height: 75px; line-height: 75px; width: 100%; vertical-align: middle; padding: 0 60px; word-break:break-all; word-wrap:break-word;"><div class="mj-opt-in-footer paint-area paint-area--text Medium Medium-rich" style="display: inline-block; font-family: Ubuntu, Helvetica; text-align: left; margin-bottom: 24px; color: grey; line-height: normal;"><i class="medium-i" style="word-break: break all; max-width: 600px;">If you are having troubles with the button, copy/paste the following URL in your browser: [URL]</i></div></td></tr>
<tr><td style="text-align: left; padding: 0 60px; height: 30px; line-height: 30px;"><div class="mj-opt-in-signature-top paint-area paint-area--text Medium Medium-rich" style="font-family: Ubuntu, Helvetica; display: inline-block; text-align: left; color: grey; line-height: normal;">Thanks,</div></td></tr>
<tr><td style="text-align: left; padding: 0 60px; height: 30px; line-height: 30px;"><div class="mj-opt-in-signature-bottom paint-area paint-area--text Medium Medium-rich" style="font-family: Ubuntu, Helvetica; display: inline-block; text-align: left; color: grey; line-height: normal;"><b class="medium-b">Joy Kate Designs</b></div></td></tr>
</tbody></table>
</div>
<!--[if mso]>
</td></tr></table>
<![endif]--></body></html>
Related
The first span with border 1px solid #333; not showing in outlook 365, but showing in outlook live and gmail. I've tried outline and box-shadow as well it's not working in any way.The first span with border 1px solid #333; not showing in outlook 365, but showing in outlook live and gmail. I've tried outline and box-shadow as well it's not working in any way.I
<table cellpadding="0" cellspacing="0" width="100%" role="presentation" style=" mso-table-lspace: 0pt; mso-table-rspace: 0pt; border-collapse: collapse; border-spacing: 0px; ">
<tr>
<td align="right" style="padding: 0; margin: 0">
<span class="es-button-border" bordercolor="#333" border="1" style=" mso-border-right-alt: 1px solid #333333; mso-border-bottom-alt: 1px solid #333333; mso-border-left-alt: 1px solid #333333; mso-border-top-alt: 1px solid #333333; border-style: solid; border-color: #333333; border-width: 1px; border: 1px solid #333333; display: inline-block; border-radius: 0px; width: auto; ">
<span class="es-button" target="_blank" style=" mso-style-priority: 100 !important; text-decoration: none; -webkit-text-size-adjust: none; -ms-text-size-adjust: none; mso-line-height-rule: exactly; color: #333333; font-size: 12px; border-style: solid; border-color: #fff; border-width: 10px 20px 10px 20px; display: inline-block; background: #fff; border-radius: 0px; font-family: roboto, 'helvetica neue', helvetica, arial, sans-serif; font-weight: normal; font-style: normal; line-height: 14px; width: auto; text-align: center; " >
<span id="price1">Per person:</span>
INR 98298 (CHF 1192)
</span>
</span>
</td>
</tr>
</table>
The problem is you're using a span as a block element, which it isn't naturally and on top of that - trying to force it with the use of display:inline-block won't always work in Outlook clients.
Your best bet is to use block level elements for borders. These include: table cells & divs.
You could convert all of your span tags to divs to make this work, however because divs are block elements, they'll go full width by default.
You can define widths to fix this, however Outlook won't respect those without mso specific code.
Below is your code and then the row below that is what I'd do:
<table cellpadding="0" cellspacing="0" width="100%" role="presentation" style=" mso-table-lspace: 0pt; mso-table-rspace: 0pt; border-collapse: collapse;">
<tr>
<td align="right">
<span class="es-button-border" style="border: 1px solid #333333; display: inline-block;">
<span class="es-button" style="mso-style-priority: 100 !important; text-decoration: none; -webkit-text-size-adjust: none; -ms-text-size-adjust: none; mso-line-height-rule: exactly; color: #333333; font-size: 12px; border-style: solid; border-color: #fff; border-width: 10px 20px 10px 20px; display: inline-block; background: #fff; border-radius: 0px; font-family: roboto, 'helvetica neue', helvetica, arial, sans-serif; font-weight: normal; font-style: normal; line-height: 14px; width: auto; text-align: center;">
<span id="price1">Per person:</span>INR 98298 (CHF 1192)
</span>
</span>
</td>
</tr>
<tr>
<td style="padding-top:10px;">
<table align="right" role="presentation" border="0" cellpadding="0" cellspacing="0" style="border: 1px solid #333333;">
<tr>
<td class="es-button-border" style="text-decoration: none; -webkit-text-size-adjust: none; -ms-text-size-adjust: none; mso-line-height-rule: exactly; color: #333333; font-family: roboto, 'helvetica neue', helvetica, arial, sans-serif; font-size: 12px; line-height: 14px; text-align: center;">
<div style="border-style: solid; border-color: #fff; border-width: 10px 20px 10px 20px;">
<span id="price1">Per person:</span>INR 98298 (CHF 1192)
</div>
</td>
</tr>
</table>
</td>
</tr>
</table>
I've tried the code below to fold on smaller screens and cut signature in half using float:left command on each of but it doesn't work. I need to make this footer as it is on larger screens and fold in half on smaller ones :/
<table style="width: 450px;" width="450" cellspacing="0" cellpadding="0">
<tbody style="vertical-align: top; position: fixed;">
<br></br>
<tr>
<td style="border-bottom: 1px solid; border-bottom-color: #b50015; vertical-align: bottom; font-family: Verdana, sans-serif; color: #3b4908; padding: 0 0 10px 0;" valign="bottom"><strong><span style="font-family: Verdana, sans-serif; font-size: 14pt; color: #b50015;">Natalia Gułaś</span></strong><br /><span style="font-family: Verdana, sans-serif; font-size: 10pt; color: #444444;"><span style="font-family: Verdana, sans-serif; color: #2c2c2c;">Dyrektor Zarządzający</span></span></td>
<td style="border-bottom: 1px solid; border-bottom-color: #b50015; vertical-align: top; font-family: Verdana, sans-serif; color: #3b4908; padding: 0 0 10px 0;" valign="top"><img style="width: 179px; height: auto; border: 0;" src="https://lp.gimmik.net/upload/logo.jpg" alt="Logo" width="179" border="0" /></td>
</tr>
<tr>
<td style="width: 60%; line-height: 18px; vertical-align: top; font-family: Verdana, sans-serif; font-size: 10pt; color: #444444; padding: 10px 0 0 0;" valign="top" width="60%"><span style="font-family: Verdana, sans-serif; font-size: 10pt; color: #2c2c2c;"><strong>tel.:</strong> +48 882 143 502<span><br /></span></span> <span style="font-family: Verdana, sans-serif; font-size: 10pt; color: #2c2c2c;"><strong> email:</strong> natalia#gimmik.net </span></td>
<td style="width: 40%; line-height: 18px; vertical-align: top; font-family: Verdana, sans-serif; font-size: 10pt; color: #444444; padding: 10px 0 0 0;" valign="top" width="40%"><span style="font-family: Verdana, sans-serif; font-size: 10pt; color: #2c2c2c;">Gimmik.net<span><br /></span></span> <span style="font-family: Verdana, sans-serif; font-size: 10pt; color: #2c2c2c;">ul. Mełgiewska 9E<span><br /></span></span> <span style="font-family: Verdana, sans-serif; font-size: 10pt; color: #2c2c2c;">20-209 Lublin</span></td>
</tr>
<tr>
<td style="width: 60%; vertical-align: top; padding: 10px 0 0 0;" valign="top" width="60%"><span><img style="margin-right: 5px; margin-bottom: 1px; border: 0; width: 16px; height: 16px;" src="https://codetwocdn.azureedge.net/images/mail-signatures/generator/plaintext3-with-logo/fb.png" alt="facebook icon" width="16" border="0" /> </span><span><img style="margin-right: 5px; margin-bottom: 1px; border: 0; width: 16px; height: 16px;" src="https://codetwocdn.azureedge.net/images/mail-signatures/generator/plaintext3-with-logo/yt.png" alt="youtube icon" width="16" border="0" /> </span><span><img style="margin-right: 5px; margin-bottom: 1px; border: 0; width: 16px; height: 16px;" src="https://codetwocdn.azureedge.net/images/mail-signatures/generator/plaintext3-with-logo/it.png" alt="instagram icon" width="16" border="0" /> </span></td>
<td style="width: 40%; vertical-align: top; padding: 10px 0 0 0;" valign="top" width="40%"><span><strong><a style="text-decoration: none;" href="http://www.gimmik.net" target="_blank" rel="noopener"><span style="font-family: Verdana, sans-serif; font-size: 10pt; color: #3b4908;"><span style="font-family: Verdana, sans-serif; color: #b50015;">www.gimmik.net</span></span></a></strong></span></td>
</tr>
</tbody>
</table>
To achieve this you need to create two separate tables—one for each side—and float them both. You'll also need to hard-set heights on some cells to keep things aligned.
<table width="225" cellspacing="0" cellpadding="0" style="float:left;">
<tr>
<td style="height: 58px; border-bottom: 1px solid; border-bottom-color: #b50015; vertical-align: bottom; font-family: Verdana, sans-serif; color: #3b4908; padding: 0 0 10px 0;" valign="bottom"><strong><span style="font-family: Verdana, sans-serif; font-size: 14pt; color: #b50015;">Natalia Gułaś</span></strong><br /><span style="font-family: Verdana, sans-serif; font-size: 10pt; color: #444444;"><span style="font-family: Verdana, sans-serif; color: #2c2c2c;">Dyrektor Zarządzający</span></span></td>
</tr>
<tr>
<td style="height: 54px; line-height: 18px; vertical-align: top; font-family: Verdana, sans-serif; font-size: 10pt; color: #444444; padding: 10px 0 0 0;" valign="top" width="60%"><span style="font-family: Verdana, sans-serif; font-size: 10pt; color: #2c2c2c;"><strong>tel.:</strong> +48 882 143 502<span><br /></span></span> <span style="font-family: Verdana, sans-serif; font-size: 10pt; color: #2c2c2c;"><strong> email:</strong> natalia#gimmik.net </span></td>
</tr>
<tr>
<td style=" vertical-align: top; padding: 10px 0 0 0;" valign="top" width="60%"><span><img style="margin-right: 5px; margin-bottom: 1px; border: 0; width: 16px; height: 16px;" src="https://codetwocdn.azureedge.net/images/mail-signatures/generator/plaintext3-with-logo/fb.png" alt="facebook icon" width="16" border="0" /> </span><span><img style="margin-right: 5px; margin-bottom: 1px; border: 0; width: 16px; height: 16px;" src="https://codetwocdn.azureedge.net/images/mail-signatures/generator/plaintext3-with-logo/yt.png" alt="youtube icon" width="16" border="0" /> </span><span><img style="margin-right: 5px; margin-bottom: 1px; border: 0; width: 16px; height: 16px;" src="https://codetwocdn.azureedge.net/images/mail-signatures/generator/plaintext3-with-logo/it.png" alt="instagram icon" width="16" border="0" /> </span></td>
</tr>
</table>
<table width="225" cellspacing="0" cellpadding="0" style="float:left;">
<tr>
<td style="height: 58px; border-bottom: 1px solid; border-bottom-color: #b50015; vertical-align: top; font-family: Verdana, sans-serif; color: #3b4908; padding: 0 0 10px 0;" valign="top"> <img style="width: 179px; height: auto; border: 0;" src="https://lp.gimmik.net/upload/logo.jpg" alt="Logo" width="179" border="0" /></td>
</tr>
<tr>
<td style="height: 54px; line-height: 18px; vertical-align: top; font-family: Verdana, sans-serif; font-size: 10pt; color: #444444; padding: 10px 0 0 0;" valign="top"><span style="font-family: Verdana, sans-serif; font-size: 10pt; color: #2c2c2c;">Gimmik.net<span><br /></span></span> <span style="font-family: Verdana, sans-serif; font-size: 10pt; color: #2c2c2c;">ul. Mełgiewska 9E<span><br /></span></span> <span style="font-family: Verdana, sans-serif; font-size: 10pt; color: #2c2c2c;">20-209 Lublin</span></td>
</tr>
<tr>
<td style="vertical-align: top; padding: 10px 0 0 0;" valign="top"><span><strong><a style="text-decoration: none;" href="http://www.gimmik.net" target="_blank" rel="noopener"><span style="font-family: Verdana, sans-serif; font-size: 10pt; color: #3b4908;"><span style="font-family: Verdana, sans-serif; color: #b50015;">www.gimmik.net</span></span></a></strong></span></td>
</tr>
</table>
I have these images. they work fine in Gmail , but when I see in outlook , then all the 5 images comes in single <tr> and extends the default width of table.
What I want is , first four images should be in the center of first line and if there are more images then , it should be in new line. but in the same <tr>. I don't want separate <tr>for the same. I have done this. It looks fine in Gmail. but it extends its width in outlook which I have to make them correct. I have read article regarding the same. but didn't get too much.
So , It would be great , If I get help for this issue.
Thank You.
<table width="600" cellspacing="0" cellpadding="0" border="0" style=" background: #fa4b00;margin: 0 auto !important; padding: 0px; max-width:600px !important; line-height: 100% !important; border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt; text-align: center;" >
<tr>
<td height="20"></td>
</tr>
<tr>
<td style="vertical-align:top;width:20%;display:inline-block;margin-left:20px;padding:0;text-align:center;">
<img style=" outline: none;text-decoration: none;-ms-interpolation-mode: bicubic;" alt="" src="http://www.hubilo.com/eventApp/ws//images/speaker/profile/thumb/2712_1455301580.jpeg" border="0" height="120" width="120" >
<p style=" width: 100%; text-align:center; font-size:10px;word-break: normal; text-transform: uppercase; max-width: 110px; padding: 0px 5px; margin: 0 auto; color: #ffffff; font-weight: 600; ">XYZ</p>
<p style=" width: 100%; text-align:center; font-size:8px;word-break: normal; text-transform: uppercase; max-width: 110px; padding:0px 5px; padding-right: 5px; margin: 0 auto; color: white; "> XYZ </p>
</td>
<td style="vertical-align:top;width:20%;display:inline-block;margin-left:20px;padding:0;text-align:center;">
<img style=" outline: none;text-decoration: none;-ms-interpolation-mode: bicubic;" alt="" src="http://www.hubilo.com/eventApp/ws//images/speaker/profile/thumb/2712_1455949782.jpeg" border="0" height="120" width="120" >
<p style=" width: 100%; text-align:center; font-size:10px;word-break: normal ; text-transform: uppercase; max-width: 110px; padding: 0px 5px; margin: 0 auto; color: #ffffff; font-weight: 600;">XYZ</p>
<p style=" width: 100%; text-align:center; font-size:8px; word-break: normal ; text-transform: uppercase; max-width: 110px; padding:0px 5px; padding-right: 5px; margin: 0 auto; color: #FFFFFF;"> XYZ </p>
</td>
<td style="vertical-align:top;width:20%;display:inline-block;margin-left:20px;padding:0;text-align:center;">
<img style=" outline: none;text-decoration: none;-ms-interpolation-mode: bicubic;" alt="" src="http://www.hubilo.com/eventApp/ws//images/speaker/profile/thumb/2712_1455627060.jpeg" border="0" height="120" width="120" >
<p style=" width: 100%; text-align:center; font-size:10px;word-break: normal; text-transform: uppercase; max-width: 110px; padding: 0px 5px; margin: 0 auto; color: #ffffff; font-weight: 600;">XYZ</p>
<p style=" width: 100%; text-align:center; font-size:8px;word-break: normal; text-transform: uppercase; max-width: 110px; padding:0px 5px; padding-right: 5px; margin: 0 auto; color: #FFFFFF;">XYZ </p>
</td>
<td style="vertical-align:top;width:20%;display:inline-block;margin-left:20px;padding:0;text-align:center;">
<img style=" outline: none;text-decoration: none;-ms-interpolation-mode: bicubic;" alt="" src="http://www.hubilo.com/eventApp/ws//images/speaker/profile/thumb/2712_1455300140.jpeg" border="0" height="120" width="120" >
<p style=" width: 100%; text-align:center; font-size:10px;word-break:normal; text-transform: uppercase; max-width: 110px; padding: 0px 5px; margin: 0 auto; color: #ffffff; font-weight: 600;">XYZ</p>
<p style=" width: 100%; text-align:center; font-size:8px;word-break: normal; text-transform: uppercase; max-width: 110px; padding:0px 5px; padding-right: 5px; margin: 0 auto; color: #FFFFFF;"> XYZ </p>
<p style="padding-bottom: 30px;"></p>
</td>
<td style="vertical-align:top;width:20%;display:inline-block;margin-left:20px;padding:0;text-align:center;">
<img style=" outline: none;text-decoration: none;-ms-interpolation-mode: bicubic;" alt="" src="http://www.hubilo.com/eventApp/ws//images/speaker/profile/thumb/2712_1455300140.jpeg" border="0" height="120" width="120" >
<p style=" width: 100%; text-align:center; font-size:10px;word-break:normal; text-transform: uppercase; max-width: 110px; padding: 0px 5px; margin: 0 auto; color: #ffffff; font-weight: 600;">XYZ</p>
<p style=" width: 100%; text-align:center; font-size:8px;word-break: normal; text-transform: uppercase; max-width: 110px; padding:0px 5px; padding-right: 5px; margin: 0 auto; color: #FFFFFF;"> XYZ </p>
<p style="padding-bottom: 30px;"></p>
</td>
</tr>
</table>
You're setting the TDs to display:inline-block, which doesn't really make much sense for a table element. The whole point of a table cell is that it behaves like a table cell.
Maybe that's what the issue is; if you're using an Outlook app or whatever it'll have a different rendering engine to Chrome. So that rendering engine could decide to ignore display:inline-block on table cells.
I'm pretty sure if you just removed the table stuff and wrapped each image in a DIV instead it would work reliably.
jsFiddle
So made a newsletter for a client, and just 1 slight little bug i have now on Outlook 2007,2010,2013,2016 assuming its cause these use Word as the rendering engine.
Basically i have a 2x2 grid each item being 50% so all sitting nice and snug but on outlook it looks like its either adding whitespace below the images or adding more padding to my text boxes (see screenshot)
Here is my HTML for that section:
<table width="100%" border="0" cellspacing="0" cellpadding="0" style="border-collapse: collapse;">
<tbody>
<tr>
<td width="50%" background="#8f5470" bgcolor="#8f5470" style="padding-left:45px; padding-right:45px; padding-top:20px; padding-bottom:20px;">
<h4 style="Margin: 0; Margin-bottom: 10px; color: #ffffff; font-family: Helvetica, Arial, sans-serif; font-size: 27px; font-weight: normal; line-height: 1.3; margin: 0; margin-bottom: 10px; padding: 0; text-align: left; word-wrap: normal;">we take care of every detail</h4>
<p style="Margin: 0; Margin-bottom: 10px; color: #ffffff; font-family: Helvetica, Arial, sans-serif; font-size: 17px; font-weight: normal; line-height: 1.3; margin: 0; margin-bottom: 10px; padding: 0; text-align: left;">Everything from design and planning through to manufacturing and installation, and where required assisting you to appoint a builder for the required preparatory works.</p>
<p style="Margin: 0; Margin-bottom: 10px; color: #ffffff; font-family: Helvetica, Arial, sans-serif; font-size: 17px; font-weight: normal; line-height: 1.3; margin: 0; margin-bottom: 10px; padding: 0; text-align: left;">We are dedicated to making it as easy as possible for you.</p>
</td>
<td width="50%" class="show-for-large"><img src="http://aproposconservatories.co.uk/wp-content/themes/apropos_new/images/newsletter/detail-img.jpg" style="-ms-interpolation-mode: bicubic; clear: both; display: block; max-width: 100%; outline: none; text-decoration: none; width: auto;"></td>
</tr>
</tbody>
</table>
<table width="100%" border="0" cellspacing="0" cellpadding="0" style="border-collapse: collapse;">
<tbody>
<tr>
<td width="50%" class="show-for-large"><img src="http://aproposconservatories.co.uk/wp-content/themes/apropos_new/images/newsletter/benefits-img.jpg" style="-ms-interpolation-mode: bicubic; clear: both; display: block; max-width: 100%; outline: none; text-decoration: none; width: auto;"></td>
<td width="50%" background="#0599a8" bgcolor="#0599a8" style=" padding-left:45px; padding-right:45px; padding-top:20px; padding-bottom:20px;">
<h4 style="Margin: 0; Margin-bottom: 10px; color: #ffffff; font-family: Helvetica, Arial, sans-serif; font-size: 27px; font-weight: normal; line-height: 1.3; margin: 0; margin-bottom: 10px; padding: 0; text-align: left; word-wrap: normal;">we can offer benefits to our clients</h4>
<p style="Margin: 0; Margin-bottom: 10px; color: #ffffff; font-family: Helvetica, Arial, sans-serif; font-size: 17px; font-weight: normal; line-height: 1.3; margin: 0; margin-bottom: 10px; padding: 0; text-align: left;">In conjunction with Barclays we are able to offer a number of financial solutions, helping our customers stay in control of their cash flow.</p>
<p style="Margin: 0; Margin-bottom: 10px; color: #ffffff; font-family: Helvetica, Arial, sans-serif; font-size: 17px; font-weight: normal; line-height: 1.3; margin: 0; margin-bottom: 10px; padding: 0; text-align: left;">As members of the IBGCo we offer consumer protection at point of sale and throughout the ten year guarantee period. Providing total peace of mind.</p>
</td>
</tr>
</tbody>
</table>
Any help would be appreciated thanks in advance.
I have added mso-padding-alt: 0px 45px; to parent td of the text.
Here is the working fiddle.
https://jsfiddle.net/6LgcnLka/
I have attached the screenshot of the ouput in outlook 2013
I'm using Zurb Ink to create atemplate for the first time; it's great, but I cannot get my head around a certain problem.
Everything works fine when I view the HTML in my browser, but I'm unfortunately required to send my email through a sending platform which takes the liberty of adjusting the code I've written.
The problem I'm having is with image size. For some reason, an image I'm using, which is 580px wide, sizes itself to 576px when sent through the email platform. I have looked through the code repeatedly and checked around online but I can't find anything, so an help is VERY much appreciated.
<!--header row-->
<table class="row header-bar" style="border-spacing: 0; border-collapse: collapse; vertical-align: top; text-align: left; width: 100%; position: relative; display: block; background: #4480ba; padding: 0px;" bgcolor="#4480ba">
<tbody>
<tr style="vertical-align: top; text-align: left; padding: 0;" align="left">
<td class="wrapper last" style="word-break: break-word; -webkit-hyphens: auto; -moz-hyphens: auto; hyphens: auto; border-collapse: collapse !important; vertical-align: top; text-align: left; position: relative; color: #222222; font-family: 'Helvetica', 'Arial', sans-serif; font-weight: normal; line-height: 19px; font-size: 14px; margin: 0; padding: 10px 0px 0px;" align="left" valign="top">
<table class="twelve columns" style="border-spacing: 0; border-collapse: collapse; vertical-align: top; text-align: left; width: 580px; margin: 0 auto; padding: 0;">
<tbody>
<tr style="vertical-align: top; text-align: left; padding: 0;" align="left">
<td class="nine sub-columns" style="word-break: break-word; -webkit-hyphens: auto; -moz-hyphens: auto; hyphens: auto; border-collapse: collapse !important; vertical-align: top; text-align: left; min-width: 0px; width: 75%; color: #222222; font-family: 'Helvetica', 'Arial', sans-serif; font-weight: normal; line-height: 19px; font-size: 14px; margin: 0; padding: 0px 10px 10px 0px;" align="left" valign="top">
<img style="outline: none; text-decoration: none; -ms-interpolation-mode: bicubic; max-width: 80%; float: left; clear: both; display: block; padding-left: 10px; padding-right: 10px; margin-left: 5px; margin-right: 5px;" class="text-pad alumni-logo" src="" alt="" width="237" height="80" align="left" />
</td>
<td class="three sub-columns" style="word-break: break-word; -webkit-hyphens: auto; -moz-hyphens: auto; hyphens: auto; border-collapse: collapse !important; vertical-align: top; text-align: left; min-width: 0px; width: 25%; color: #222222; font-family: 'Helvetica', 'Arial', sans-serif; font-weight: normal; line-height: 19px; font-size: 14px; margin: 0; padding: 0px 10px 10px 0px;" align="left" valign="top">
<img style="outline: none; text-decoration: none; -ms-interpolation-mode: bicubic; max-width: 100%; float: none; clear: both; display: block; margin: 0 auto;" class="center" src="http://www.jampaper.com/userFiles/productImages/tn_02561_Orange_6_1_2_x_6_1_2_Square_Envelopes.jpg" alt="" width="80" height="80" align="none" />
</td>
<td class="expander" style="word-break: break-word; -webkit-hyphens: auto; -moz-hyphens: auto; hyphens: auto; border-collapse: collapse !important; vertical-align: top; text-align: left; visibility: hidden; width: 0px; color: #222222; font-family: 'Helvetica', 'Arial', sans-serif; font-weight: normal; line-height: 19px; font-size: 14px; margin: 0; padding: 0;" align="left" valign="top">
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<!--/header row-->
<!--big image row-->
<table class="row" style="border-spacing: 0; border-collapse: collapse; vertical-align: top; text-align: left; width: 100%; position: relative; display: block; padding: 0px;">
<tbody>
<tr style="vertical-align: top; text-align: left; padding: 0;" align="left">
<td class="wrapper last intro-image" style="word-break: break-word; -webkit-hyphens: auto; -moz-hyphens: auto; hyphens: auto; border-collapse: collapse !important; vertical-align: top; text-align: left; position: relative; color: #222222; font-family: 'Helvetica', 'Arial', sans-serif; font-weight: normal; line-height: 19px; font-size: 14px; margin: 0; padding: 0 0px 0px;" align="left" valign="top">
<table class="twelve columns" style="border-spacing: 0; border-collapse: collapse; vertical-align: top; text-align: left; width: 580px; margin: 0 auto; padding: 0;">
<tbody>
<tr style="vertical-align: top; text-align: left; padding: 0;" align="left">
<td style="word-break: break-word; -webkit-hyphens: auto; -moz-hyphens: auto; hyphens: auto; border-collapse: collapse !important; vertical-align: top; text-align: left; color: #222222; font-family: 'Helvetica', 'Arial', sans-serif; font-weight: normal; line-height: 19px; font-size: 14px; margin: 0; padding: 0px 0px 10px;" align="left" valign="top">
<img style="outline: none; text-decoration: none; -ms-interpolation-mode: bicubic; max-width: 100%; float: none; clear: both; display: block; padding-top: 0 !important; margin: 0 auto;" class="center intro-image" src="http://www.nagelphotography.com/img/s2/v4/p176518365-3.jpg" alt="" width="580" align="none" />
</td>
<td class="expander" style="word-break: break-word; -webkit-hyphens: auto; -moz-hyphens: auto; hyphens: auto; border-collapse: collapse !important; vertical-align: top; text-align: left; visibility: hidden; width: 0px; color: #222222; font-family: 'Helvetica', 'Arial', sans-serif; font-weight: normal; line-height: 19px; font-size: 14px; margin: 0; padding: 0;" align="left" valign="top">
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<!--/big image row-->
I understand this might be a bit of a long shot but I really cannot figure out why this image is not 580px when the screen is wide enough to support it. For reference, at smaller sizes the problem persists, but the difference is a smaller number of pixels.
If anyone comes across this problem in the future - you may be interested to know that the reason the image was out of line was the expander cell below was taking up space, due to the fact that the character had been added by the email platform I was using. Normally in Ink expanders have no size at all.