I am having an issue with outlook with my email template.
In all other email applications my template looks like, but outlook always left aligns my buttons. This is what I have:
<a style="display: block; text-align: right; margin-bottom: 10px;" href="-PRODUCT2URL-" target="_blank"><img style="display: inline-block" align-right src="https://marketing-image-production.s3.amazonaws.com/uploads/8b32ba0f98a4a49b628c0ccd072134aa3d287d9eb72a728573ec4f219a6139800392ddcc8413db10724b2c9070bee75141cc2ef7926f4af80372811faa299682.jpg" /></a>
Not only does outlook ignore the right align, but it also doesn't have the margin bottom.
Does anyone know how I can get outlook to allow me to right align this button?
Apply text-align: right; to the table cell where the href is located.
margin is problematic in Outlook. In the desktop 2011-16, it ignores margin, but will respond to Margin. So Margin-bottom will work, but margin-bottom is ignored.
For more information of the fun you will encounter with Outlook, check out these resources:
https://litmus.com/help/email-clients/outlookcom-margins/
https://www.campaignmonitor.com/css/
Good luck.
it is very much related to how you are structuring your email template:
while making a simple html page "div" is a basic building block that we user to structure the page,
but while building an html email template we need to user table as a basic building block, means we should use "table" and its child tags "tr", "th" for making an email templates. this will resolve most of out positioning issues.
Related
I'm trying to create a 3 column grid for an email template that uses the liquid template language.
A lot of users use Outlook. I am trying to use a table for the grid which is working okay, but I can't get the images to look good. I either use a CSS command that doesn't render in Outlook or it looks really terrible.
This is what works but won't render in Outlook:
<td>
<div style="padding: 5px;">
<img style="width: 100%; height: 150px; object-fit: contain; object-position: center;" src="/images/logo1.png" />
</div>
</td>
How can I turn this 'sentence' into something that will render for all email clients.
It is generally bad practice to use <div> elements when working with HTML E-mails. You should refer to strictly using <table> layout instead to get your desired results. The reason for this is that many E-mail clients simply don't support anything else. Other than that, some E-mail clients will also ignore inline padding and margin styling on <img> elements, as well as some other specific stuff. It really all depends. Rule of thumb is, as long as you use a <table> layout, you're probably fine. For the most part anyways.
This old article covers some of the inconveniences with the <div> element in HTML E-mails.
Alternatively, check out this article on Outlook 2016 HTML E-mail tips.
I would also highly recommend navigating through this gem of a post if you're interested in learning more about HTML E-mails.
I've tried everything I can think of, but no matter what I do, MailChimp demands any <a> with an href has color: inherit !important; text-decoration: inherit !important and, because Outlook is absolute garbage, means all my links are coming up blue and underlined.
In this example, I can put in a link, and it'll just turn blue:
<td style="color:#27646a;font-family:Georgia, serif;font-size:16px;font-weight:bold;" mc:edit="button">
READ MORE
</td>
In this example, if I put in a link, it'll just ignore my <a> and add another one adjacent:
<td style="color:#27646a;font-family:Georgia, serif;font-size:16px;font-weight:bold;">
<a mc:edit="button" style="color: #27646a; text-decoration: none;">
READ MORE
</a>
</td>
I can put this in my CSS, but obviously MailChimp decides to ignore it:
td a {
color: #27646a !important;
text-decoration: none !important;
}
I don't really know what my other options are, and I swear I don't remember MailChimp arbitrarily deciding everything must look like crap in Outlook - is there something I'm missing?
In case others are finding this, it is possible to set hyperlink colours in Mailchimp templates that will be respected by Outlook without styling each link inline.
I'm using a custom HTML template in Mailchimp, using the classic builder.
It does seem like it's necessary to specify the link styling for each type of content block that you have in your template. In my case, my editable content blocks are always div tags. In my template code, within the body tag:
<style type="text/css">
div a{
color:#000000 !important;
text-decoration:underline !important;
}
</style>
The style would need to also be defined for all tables, p, or whatever else you are using to contain text. I've tested the result in Outlook 365 and it works.
I remember reading somewhere that mailchimp won't allow hyperlinks to be too similar to the background colour (because the unsubscribe link must remain visible) so that's a possible issue as well.
I have used two methods for generating emails in MailChimp: 1) Foundation For Emails and 2) a MailChimp drag and drop email template.
In Foundation, it takes my source CSS code:
.item-link {
color:#0C3C80;
font-family:Helvetica;
font-size:16px;
text-decoration:underline;
}
and generates the inline style like this for links with class "item-link":
<span style="font-size:12px">View this email in your browser</span>
This produces the correct color in Outlook.
In the drag and drop template, I use the "Design" tab -> "Body" -> "Body Link" of the editor to assign the link color. It also appears correctly in Outlook.
The difference may be that in two of your examples you assign the color in the td tag style, and in the third, you designate it as a button to the MailChimp editor, so the style for the button is probably overriding the style you want.
I hope this helps.
You should be explicitly declaring colours and text-decoration:none/underline on every single <a> tag. Mailchimp will then avoid adding these fallback styles.
I've always declared mc:edit on the table cell wrapping the <a> tag as that is the foolproof way of editing the url and keeping the styles.
Here is the code I use. There are a tonne of other styles added and that is simply because I use the border technique of building buttons, but the issue is the same. I have mc-edit on this tag and have made sure to declare text-decoration and colour and my client uses this every week without issue.
<td align="center" valign="middle" style="padding:14px 20px;" mc:edit="button">
Button
</td>
Try that. Hoping that will work out for you
I have an email template that displays well in most email clients except that the it renders tables poorly in outlook.
There is too much spacing between the "tr" elements of the table in outlook desktop 2016. Please how do I fix this?
Attached is an image of what it looks like on outlook desktop 2016(i.e the problem) and how it looks in outlook web (What I want it to look like) respectively.
The entire source code can't be displayed in stackoverflow so I have shared a dropbox link to the HTML. https://www.dropbox.com/s/58i9scmnnmrqsix/EmailTemplate.zip?dl=0
Thank you.
Remove the font size for the coloured boxes and add the boxes as table with cells of different color and a specific height. You can use padding and align to center the tables in the parent cell.
OR
you can give the cell a line-height
<td style="font-size: 35px" align="right">
<span style="color:#275100; font-size:35px; padding-right:40px; line-height: 15px;">
■</span>
</td>
Cheers
I've created a Mail-Template for a Sharepoint WebPart which includes a div element with inline style display: none. Like this:
<div style="display: none"> This Text should NOT be visible</div>
If I send the Mail-Template to a mail-address, then all will work correctly, that means, div above is not visible. But if I forward or reply the mail, then Outlook overwrites the inline-style and the div above is visible.
I've already tried to set "display: none !important" and "mso-hide: all" but that doesn't work for me.
I hope somebody have an idea to solve my problem.
I was struggling with the same thing, and I think the only answer is: There is no reliable solution. Even if someone manages to find a solution that works in all current Outlook versions, it might break with the next one.
I have tried opacity: 0, visibility: hidden, mso-hide: all, font-size: 0, etc. None of these work because they are stripped out by Outlook.
Hiding the text using conditional comments results in the text getting deleted when you are forwarding the email.
<!--[if !mso]><!-->
Hidden content
<!-- <![endif]-->
So, if your goal is to store metadata for email processing, I'd recommend to just add it to the bottom of the email with a smaller text size, and in a human readable format (something like Reference Nr.: 123456). This will not get deleted by Outlook and it would also survive a conversion to plain text in Outlook.
Instead of using display:none, Try to use font-size:0px or height:0px.
I work on HTML email campaign builds on a daily basis and in the past 24 hours I've seen all of my emails aligning left. This includes the email campaigns I've built previously (which were tested in Yahoo! Mail and used to align center).
Has anyone else come across this? Any ideas what is causing it and whether there is a fix that can be added?
The standard coding used is tables with align center. This now doesn't work and all tables align left it seems.
I've found a solution for this.
On the outer-most 100% width and centrally aligned table add this code:
style="table-layout: fixed;"
This should fix it.
Add a class to the style block in the head of the email.
.table-center { table-layout: fixed; margin: 0 auto; }
Add this class to the outermost table to get the body centered in the window. Then add it to descendant tables as needed for center alignment.
I tried both of the solutions provided and neither was able to solve the problem. I believe there is a larger issue – Yahoo! mail wraps the email in several div tags, one with a class of "body". This div is given a width value of "auto".
When I change this value, via Chrome developer tools, from "auto" to "100%" it fixes the problem.
Unmodified:
"Fixed":
Because this div is outside of the reach of my style block in the head of the email I do not believe this issue can actually be fixed. I would classify this as a bug on Yahoo's part.
I second Ed Johnson's answer here regarding the "fixed; margin: 0 auto;" style on the outer table. I just used this fix instead of the "table-layout: fixed" style because the latter seemed to break my responsive email style.