We have run into a problem with emails accessed through gmail using browsers on iOS only recently. We have a call to action button that we would like to center on the email. We have previously been able to do this using a table within a table and an align=center, but now it just doesn't work.Here's an example of the code I'm talking about:
<table width="551" height="51" border="1" cellpadding="0" cellspacing="0" class="mobile- content-size" style="min-width:551px;">
<tr>
<td height="51" style="text-align:center;" class="cta-one-row">
<!-- start button -->
<table border="0" bgcolor="#FFFFFF" cellpadding="0" cellspacing="0" class="cta-show-them-table" style="color:#6a797b; text-decoration:none; background-color:#3b3b3b; border-radius:3px; width:230px;" height="50">
<tr>
<td align="center" valign="middle" height="50" style="color:#FFFFFF;" class="cta-show-them">CALL TO ACTION
</td>
</tr>
</table>
<!-- end button -->
</td>
</tr>
</table>
Here's a link of what it looks like rendered on emailonacid.
Has anyone else run into this sort of problem or have a fix? It's rather important that these buttons are centered!Thanks!
Related
This question already has answers here:
Image inside div has extra space below the image
(10 answers)
Closed 2 years ago.
I'm developing an email where, by design, the banner image appears to be overlapping into the header. The effect is achieved by taking the top 35px or so of the banner image and making it its own image which sits in the row above the remainder of the banner image.
Here's a mockup with outlines of what I mean; the top portion of the image has a white background, while the rest of the image has a light blue background. The effect is that the image appears to be overlapping into the white.
mockup of email design
However, on some email clients (ran through the Hubspot tester) there's a gap between the images:
gap between images
I've tried the following, with no luck:
cellpadding and cellspacing = 0 to both tables
included table-collapse to my CSS
added margin-bottom to the top image (which only works on some email clients)
tried to valign="bottom" to the top image so it would sit on the bottom of the table
Here's the section of the email code, which works in the Hubspot preview, but not specific email clients:
<!-- TOP PORTION OF BANNER IMAGE -->
<table bgcolor="#fff" border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td>
<table width="600" class="deviceWidth" border="0" cellpadding="0" cellspacing="0" align="center" bgcolor="#ffffff">
<tr>
<td width="100%">
<table class="devicewidth" valign="center" align="center" border="0" cellpadding="0" cellspacing="0" width="100%">
<tr align="center">
<td cellpadding="0" cellspacing="0" style="padding:0" width="100%">
{% linked_image "webinar-editable-bannere-top" label='Banner', link="https://#", open_in_new_tab=True, alt='Banner', src='http://info.mysite.com/hs-fs/hubfs/mysite-now-1.jpg', style='max-width:100%;height:auto;;margin-bottom:-5px' %}
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
<!-- END TOP PORTION OF BANNER IMAGE -->
<!-- REMAINDER OF BANNER IMAGE -->
<table bgcolor="#EDF1FC" border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td>
<table width="600" class="deviceWidth" border="0" cellpadding="0" cellspacing="0" align="center" bgcolor="#ffffff">
<tr>
<td width="100%">
<table class="devicewidth" align="center" border="0" cellpadding="0" cellspacing="0" width="100%">
<tr align="center">
<td valign="top" style="padding:0" width="100%">
{% linked_image "webinar-editable-bannere-bottom" label='Banner', link="https://#", open_in_new_tab=True, alt='Banner', src='http://info.mysite.com/hs-fs/hubfs/mysite-now-1.jpg', style='max-width:100%;height:auto' %}
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
<!-- END REMAINDER OF BANNER IMAGE -->
Are there specific ways I can get those images to align together across the board, outside of the methods I included above?
Fixed the issue by adding a style="display:block" to images.
I’m customizing the Opt-in confirmation email template in Form builder Mailchimp for a project.
When I sent a test everything looks great in Gmail, Yahoo, and Outlook web mail client, except for the Outlook desktop app v16.0, which I have a spacing rendering issue.
The cause of the problem was the “Confirm Subscription link/button” from the form builder, that generates the <br> tag after it, which outlook desktop app didn’t ignore, unlike other email clients.
To fix the issue, I tried to add CSS style for <br> tag and display it none but it didn’t seem to work.
I also used mso conditional statement to target this specific version of outlook desktop app. I added padding-bottom in <td> of a first text and place it inside mso, to have an equal spaces. But unluckily, outlook desktop still didn’t acknowledged it. I tried many things adding css, margin, etc., nothing works. Any idea how to fix this? It seems that I did something wrong with mso.
I have also attached the sample test email I made in Gmail, Outlook.com and Outlook desktop app, and the default template of subscription in form builder for you to see. See screenshot here
Here is my code:
I have to split my HTML into two parts to make the “Confirm subscription link” in the middle. Since this link was unable to remove.
https://codepen.io/christine-tine27/pen/QWyeEGz
<!-- PART 1.HTML -->
<div class="es-wrapper-color" style="background-color:#FFFFFF">
<table class="es-content" cellspacing="0" cellpadding="0" align="center" style="mso-table-lspace:0pt;mso-table-rspace:0pt;border-collapse:collapse;border-spacing:0px;table-layout:auto !important;width:100%">
<tr style="border-collapse:collapse">
<td align="center" style="padding:0;Margin:0">
<table class="es-content-body" cellspacing="0" cellpadding="0" bgcolor="#ffffff" align="center" style="mso-table-lspace:0pt;mso-table-rspace:0pt;border-collapse:collapse;border-spacing:0px;background-color:#FFFFFF;width:600px">
<tr style="border-collapse:collapse">
<!-- ADDED MSO CONDITIONAL STATEMENT FOR OUTLOOK ONLY-->
<!--[if gte mso 9]>
<td align="left" style="padding-bottom:8px;padding-left:0px;padding-right:20px;padding-top:25px;mso-line-height-rule:exactly;line-height:20px!important;Margin:0;">
<![endif]-->
<!-- END -->
<td align="left" style="padding-bottom:0px;padding-left:0px;padding-right:20px;padding-top:25px;mso-line-height-rule:exactly;line-height:20px!important;Margin:0;">
<table cellpadding="0" cellspacing="0" width="100%" style="mso-table-lspace:0pt;mso-table-rspace:0pt;border-collapse:collapse;border-spacing:0px">
<tr style="border-collapse:collapse">
<td align="center" valign="top" style="padding:0;Margin:0;width:560px">
<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 style="border-collapse:collapse">
<td align="left" style="padding:0;Margin:0">
<p style="Margin:0;padding:0 0 0px 0;-webkit-text-size-adjust:none;-ms-text-size-adjust:none;mso-line-height-rule:exactly;font-size:14px;font-family:arial, 'helvetica neue', helvetica, sans-serif;line-height:21px;color:#333333;text-align:justify">You’re just one step away</p>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
<!-- PART 2.HTML -->
<div class="es-wrapper-color" style="background-color:#FFFFFF">
<table class="es-content" cellspacing="0" cellpadding="0" align="center" style="mso-table-lspace:0pt;mso-table-rspace:0pt;border-collapse:collapse;border-spacing:0px;table-layout:auto !important;width:100%">
<tr style="border-collapse:collapse">
<td align="center" style="padding:0;Margin:0">
<table class="es-content-body" cellspacing="0" cellpadding="0" bgcolor="#ffffff" align="center" style="mso-table-lspace:0pt;mso-table-rspace:0pt;border-collapse:collapse;border-spacing:0px;background-color:#FFFFFF;width:600px">
<tr style="border-collapse:collapse">
<td align="left" style="Margin:0;padding-bottom:0px;padding-left:0px;padding-right:0px;padding-top:0px">
<table cellpadding="0" cellspacing="0" width="100%" style="mso-table-lspace:0pt;mso-table-rspace:0pt;border-collapse:collapse;border-spacing:0px">
<tr style="border-collapse:collapse">
<td align="center" valign="top" style="padding:0;Margin:0;width:560px">
<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 style="border-collapse:collapse">
<td align="left" style="padding:0;Margin:0">
<p style="Margin:0;padding:0px 0px 0px 0px;-webkit-text-size-adjust:none;-ms-text-size-adjust:none;mso-line-height-rule:exactly;font-size:14px;font-family:arial, 'helvetica neue', helvetica, sans-serif;line-height:21px;color:#333333;text-align:justify"> Upon confirmation, you'll receive an email with an exclusive 10% off food & beverage code which can be redeemed during your next stay.<br><br>Warmly,<br>The </p>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
To get Outlook to display a gap, it needs to render something, such as text. We can use the non-breaking space. The key attributes needed that will determine the height are line-height and font-size.
In addition, since this is a row, you should insert a <tr>, and thus it should be before the other <tr>. Although I don't quite understand what you are trying to do here.
<!--[if gte mso 9]>
<tr>
<td align="left" style="padding:0;margin:0;mso-line-height-rule:exactly;line-height:20px;font-size:20px;"> </td>
</tr>
<![endif]-->
The other thing to note is that Outlook (desktops, at least) strip anything with a "!important" tag on it.
But I'm not sure why this doesn't work in the first place - cross-email-compatible emails can achieve this with padding and <br>'s no problems.
I am having a outlook html email nightmare here.. Basically there is one table and one image on the top and content on the bottom.:
The image is always substracting 1px so it is never 100% with the table. Anyone knows a solution?
<table cellpadding="0" cellspacing="0" style=
"margin-left:2px;padding:0px; width:846px; background-color:#000">
<tr>
<td>
<div style="font-size: 0px;"><img border="0" src=
"img/header1.jpg" style=
"display:block;align:bottom;border:none;padding:0; width:846px;"></div>
</td>
</tr>
<tr>
<td>Blah.. Content</td>
</tr>
</table>
I'm pretty sure this is from outlook's issue with border-collapse. Try this:
<table border="0" cellpadding="0" cellspacing="0" width="100%" style="border-collapse:collapse; padding:0; margin:0px;">
<tr valign="top">
<td align="left" valign="top">
<img src="http://placekitten.com/g/640/300" width="640" height="300" alt="" style="display:block;" border="0" />
</td>
</tr>
</table>
Use the img tag for images.
Outlook uses Word for rendering HTML markup. You can read more about that in the following series of articles:
Word 2007 HTML and CSS Rendering Capabilities in Outlook 2007 (Part 1 of 2)
Word 2007 HTML and CSS Rendering Capabilities in Outlook 2007 (Part 2 of 2)
I have a image tag (as below) in my table, when view in IE there is a gap between the rows but not happening in Chrome.
My HTML code is as below
<table id="Table_01" width="1282" border="0" cellpadding="0" cellspacing="0">
<tr>
<td colspan="3">
<img id="login_01" src="/image/login_01.png?v=1" width="1282" height="156" alt="" usemap="#mapLogo" border="0" />
</td>
</tr>
Upon testing, it seems like the gap was due to my code structure. By changing my Row tag as below, where the TD and IMG and /TD under single line, IE is showing properly.
<table id="Table_01" width="1282" border="0" cellpadding="0" cellspacing="0">
<tr>
<td colspan="3"><img id="login_01" src="/image/login_01.png?v=1" width="1282" height="156" alt="" usemap="#mapLogo" border="0" /></td>
</tr>
No more gap in IE and Chrome.. Nice job Microsoft!
I've checked out a few posts, and tried them. Didn't work. This may become a decision and tell clients this is what it is, but I don't want to come to that.
So after testing with Litmus, my main issue is the borders(left and right) vs the top and bottom image not lining up correctly on outbook 2007/10 vs everything else.
<body>
<style type="text/css">
body{
color:#415b7c;
font-family:Helvetica, Arial, sans-serif;
font-size:12px;
padding:0;
margin:0;
}
table {border-collapse: collapse;}
</style>
<table width="100%" bgcolor="#ffffff">
<tr>
<td><!-- header -->
<table width="600" align="center" cellpadding="0" cellspacing="0">
<tr valign="bottom">
<td>
<table width="600" align="left" cellpadding="0" cellspacing="0" style="border-collapse:collapse;">
<tr><td>
<img src="http://wearehmc.com/emailTemp/VSAC/top.png" width="600" style="display:block">
</td></tr>
</table>
</td>
</tr>
<tr valign="top">
<td>
<table width="600" align="left" bgcolor="#ffffff" style="border-left-style:solid; border-left-color:#3d5b83; border-left-width:2px; border-right-style:solid; border-right-color:#3d5b83; border-right-width:2px; border-collapse: collapse; ">
<tr>
<td>
client log
</td>
<td>
<table cellpadding="10" style="color:#576276;">
<tr>
<td>
<p style="font-weight:bold">
Text
</p>
<p>
text
</p>
</td>
</tr>
</table>
</td>
<td>
client logo
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<table width="600" align="left" cellpadding="0" cellspacing="0">
<tr>
<td style="color:#ffffff; font-size:22px; font-weight:500; line-height:30px">
<table width="600" align="left" bgcolor="#659acf" cellpadding="20" style="border-left-style:solid; border-collapse: collapse; border-left-color:#3d5b83; border-left-width:2px; border-right-style:solid; border-right-color:#3d5b83; border-right-width:2px; border-collapse:collapse;">
<tr>
<td style="color:#ffffff; font-size:24px; ">
text
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<table width="600" align="left" cellpadding="0" cellspacing="0">
<tr><td>
<img src="http://wearehmc.com/emailTemp/VSAC/bottom.png" width="600" style="display:block">
</td></tr>
</table>
</td>
</tr>
</table>
</td>
</tr></table>
I've taken out client copy and logos.
As I've said it may come down to a decision of not letting it line up in outlook 2007/10, while letting it work in others.
So if anyone has any suggestions, it would be most helpful.
For outlook (And gmail) You need to specify border="0" on your images.
<img src="/" width="" height="" alt="" border="0" style="display:block">
This should be on every image you use in your email, even spacers. (In fact, especially on spacers, since those will create unwanted empty space without any content)
Also, Outlook has trouble rendering cell-padding and spacing (2007 and 2010 both use microsoft WORD as their rendering engine, I'll let you imagine how great that is to render html-emails).
So you should really be using nested tables instead of cell-padding, with spacer images to create the inner spaces of your sections.
Oh, and I see that all your styling is not inline. This will cause problems with your html-email stability. (gmail will strip every styling that is not inline, as well as the #000000 color on links (use #000001 instead)).
Oh also. Border styles and colors. Those will not display properly everywhere. The solution is again nested tables. With bgcolor and 1 / 2px width spacers to give the illusion of borders.
Hope this all helps. (I know this sounds like a lot of errors in your html-email, but once you get the hang of coding for the worst possible mail clients in mind, it'll become second nature! ;) )