using Mailchimp, I am trying to add a header to my template + a small icon. The layout should be like this:
HEADER TEXT HERE - small icon here
The small icon should be horizontally aligned with the header text. If i just drag and drop the image in, that doesn't work at it makes the image bottom aligned.
I tried adding the section as a block of code, like this:
<div class="mcnTextContent">
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td valign="top" style="color:#606060; font-size:15px; line-height:100%; padding-top:10px; padding-right;0px; padding-bottom:0px; padding-left:17px;"><strong>MY HEADER HERE</strong></td>
<td style="padding-top:0px; padding-right:0px; padding-bottom:0px;">
<img src="myimagehere.jpg" class="captionImage mcnImage" style="display:block; max-width:30px;"/>
</td>
</tr>
</table>
</div>
In mailchimp, it looks correct.
However, in gmail the alignment of the text is wrong (padding seems to be ignorned).
In outlook, the padding is OK, but the image size formating is ignored, as is the text style.
Any ideas on how to fix or workaround this?
Thanks.
You might consider making the "header" you want into an image (e.g. using PhotoShop) to exactly control what you want!
Related
I am writing html for an email and mock-ups of my footer looks like this:
I am facing issues with the vertical alignment of the last row in this mockup, where company logo follows the "Powered by" text. My <td> tag looks like this which is trying to achieve what is in the above mock-up:
<td height="20" style="height: 20px; vertical-align: middle;" align="center" valign="middle">
Powered by
<img valign="middle" src="http://cdn.mcauto-images-production.sendgrid.net/37cafc0cf58b37be/f5b816c0-c7cc-41eb-b01b-21a635204c2b/72x20.png" alt="logo" style="width:71px;height:20px; vertical-align: middle" />
</td>
The code above is not properly middle aligning the text and the logo and producing this for Outlook 2007, although it is working for other mainstream email clients:
You can see that logo and "Powered by" text are not properly aligned in the middle, how can I fix that? Also note that, I cannot use multiple <td> tags inside a <tr> for that purpose because I want horizontal center alignment as well.
My preferred method in these situations is to add a table with no width (equating to width:auto) and utilise table cell vertical alignment which is usually super reliable.
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td valign="middle">
Powered by
</td>
<td valign="middle" align="right" style="width:76px;">
<img src="https://via.placeholder.com/71x40" alt="logo" style="width:71px;height:40px; vertical-align: middle" />
</td>
</tr>
</table>
So no height set on any table cells, literally letting the image's natural height set the height of it's wrapping cell and then the text cell will match it naturally.
I've also set the image table cell to be slightly wider than the image and aligned the image to the right to give some space between the two pieces of content.
I'm currently working on some custom responsive email templates that will be used in my clients Mailchimp. (yes, the struggle is real..) The passed week I've been trying to figure out why Outlook shows my images at their original sizes.
As you can see in my code snippet below I've set a width to my img, td and tr. Also tried to add it to the table, didn't make any difference. So even I've set a fixed with to it, in Outlook the images still shows at their original size which causes the layout to go to sh*t.
<body bgcolor="#e8ebee">
<!-- wrapper table -->
<table cellpadding="0" cellspacing="0" width="650" border="0" class="container" bgcolor="#e8ebee">
<tr>
<td>
<!-- content1 -->
<table mc:repeatable mc:variant="Section: item with image top and CTA" width="650" cellpadding="0" cellspacing="0" border="0" align="center" class="full-table" style="width:650px;">
<tr>
<td bgcolor="#FFFFFF">
<table>
<tr width="650" style="width:650px;">
<td style="padding-bottom: 15px; width:650px; max-width:650px;" width="650">
<img mc:edit="article_image" src="my_larger_image.png" alt="" style="width:650px; max-width:650px;" width="650">
</td>
</tr>
</table>
</td>
</tr>
</table>
<!-- end content1 -->
</td>
</tr>
</table>
<!-- end wrapper table -->
</body>
I also have a Litmus account which shows no errors concerning the images when I use the previews.
If I were to use images with the size I define in the attribute and the style, there would no problem. But since this is for a client who will use Mailchimp I want to make sure that even when he uploads a bigger image, everything is still as it's supposed to be.
A second problem is that I use some images as icons, which are double the size for retina screens. Here is the full code for the email at jsfiddle And on top of that it should also be responsive. So the images should scale nicely for each device/screen.
Does anyone has an idea or solution that gives me back the power over my images in Outlook? I'm also willing to forget about the fluid email, and have just 2 widths one for mobile and one for desktop.
Oh and last but not least, Yes, I did google it and I think I've been through almost every blog/article about responsive email design the past week.
Thanks in advance for any help!
The solution for this is to use HTML height and width attributes without pixels.
So
<img src="..." height="200" width="600" />
Then for mobile you can use a media query. This will mean you can use retina images or anything else you want. I would recommend you use srcset for retina images as Outlook etc will simply ignore them and download your email without downloading loads of extra images.
You can find more info here:
https://litmus.com/community/discussions/1007-outlook-image-sizes
This will solve your issue:
<img alt="" src="yourimage.png" width="650" style="display: block; width: 100%; max-width: 100%;" />
Without display: block; sometimes it happens that there will be a 1px gap below your images.
max-width: 100%; prevents your image to be larger than your container.
The width: 100% is useful, because the image will get your container's width.
You should set the width attribute to the exact width in pixels.
I observed that if I use the width attribute together with max-width: 100%; then it will be rendered correctly on Word based Outlooks. Without max-width, the original width will be applied. (On Word based Outlooks.)
Outlook uses the MS Word rendering engine, so it's going to give you problems. Im Mailchimp you have the option of not only doing inline styles, but you can create a header css sheet as well, complete with #media-screen responsive rules.
As far as Outlook is concerned, you should add two things to the html email template:
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
this tells the email that "Hey, use the MS Office Schema where necessary.
then all of this in your header CSS:
#outlook a{
padding:0;
}
.ReadMsgBody{
width:100%;
}
body{
width:100% !important;
min-width:100%;
-webkit-text-size-adjust:100%;
-ms-text-size-adjust:100%;
}
.ExternalClass{
width:100%;
}
.ExternalClass,.ExternalClass p,.ExternalClass span,.ExternalClass font,.ExternalClass td,.ExternalClass div{
line-height:100%;
}
a img{
border:none;
}
img{
display:block;
}
The ExternalClass will help show Outlook that you mean to reference use the Microsoft rendering engine. There is a really nice guide from Mailchimp regarding this very subject available here.
Good luck!
edit: many things are going to break in your template. I started a basic Mailchimp Template for you and fixed a few things. Check the snippet.
Codepen
Note that this is still not responsive. Because you have not included any code to make it so. You want to add full body styles to your tables, TD widths and images.
Okay so I've bought a theme for mailchimp and need to modify it slightly for my own personal use. The html is written in tables.
What i am aiming for, is the background image in the header of the page (top table), to resize when the browser shrinks down to mobile size.
So far i have been able to achieve the shrinking of the image (through the use of setting width to 100% and not setting a height), although, when the browser is shrunk down to mobile size, the purple body behind the image overflows underneath the image (like this http://i.imgur.com/DfLv29v.png), when do not want to see any background at all. Along with this, on shrinking, I am trying to get the title, text, and read more button to scale down with the image, and have the logo and all top links hidden.
I have tried playing around with max-height and max-width, setting overflow to hidden, and trying to re-do the whole thing using a div container instead of a table, but it got way too complicated. I have no knowledge of javascript or jquery so a html/css solution is preferred.
Here is the code for the main section that i'm trying to shrink -
<table border="0" align="center" width="800" cellpadding="0" cellspacing="0" class="container800">
<tr>
<td align="center" style="background-image: url(http://pickedmail.com/mira/img/main-bg.png); background-size: 100%; background-position: top center; background-repeat: repeat;" background="http://pickedmail.com/mira/img/main-bg.png">
<table border="0" align="center" width="590" cellpadding="0" cellspacing="0" class="container590 bodybg_color">
<tr><td height="30" style="font-size: 30px; line-height: 30px;"> </td></tr>
<tr>
<td>
<table border="0" align="left" cellpadding="0" cellspacing="0" style="border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt;" class="container590">
<tr>
<td align="center">
<table border="0" cellpadding="0" cellspacing="0" align="center">
<tr><td height="5" style="font-size: 5px; line-height: 5px;"> </td></tr>
<tr>
here is the full thing in jsfiddle - https://jsfiddle.net/jackgenesin/2zzkrqzf/
Any help appreciated, feel free to tell me its way too complicated to do purely in html/css haha, thanks
The purple body has nothing to do with the image. That's coming from the bgcolor="8a5a8d"in the first <table> tag in your fiddle. You could eliminate that and the color would go away.
With the code you've posted, you've got explicit pixel widths declared in the first two <table> tags. This tells a browser that these shouldn't be resized. You need to use a relative dimension (e.g. 100%) to make this work. Better still add this css: `style="max-width=800px;" so the table doesn't get too big on desktops.
Since you've got nested tables to make this layout (something that still is required for many email clients), to really stop the header image from spilling over into the message body, you'd have to create two sets of nested tables one after the other. If that's too much work, change the background-size: parameter to cover. That will stretch the image to fill the background, cropping edges if needed to make everything fit.
Finally, to really achieve everything you want, with the auto-hiding logos and shrinking menus, you need to make your template responsive. Take a look at the free mailchimp templates for code you might be able to reuse for this.
And you will have to do all this in HTML/CSS, since you can't rely on an email client allowing javascript.
I am working on Newsletter HTML and I can't give margin to center align the divs. How can I align the button into the center of the div. Here is the simple code
<table border="0" cellpadding="0" cellspacing="0" width="600">
<tr>
<td>
<div style="text-align:center;">
<a href="#" style="display:block; width:150px; text-decoration:none; font-weight:bold; color:#fff; background:#c72622; font-size:20px; border-radius:7px; -webkit-border-radius:7px; padding-top:10px; padding-bottom:10px;">
Buy Now
</a>
</div>
</td>
</tr>
</table>
Add align="center" to your containing table cell. This is the best way to center align in HTML email.
steer clear of all padding and margin, they are poorly / wrongly supported in a lot of clients. use lots of nested tables and <tr> <td height="1234" align="center/left/right"> instead. Avoid the <table align="center/left/right"> attribute wherever you can because outlook will generate extra whitespace. I use <table align="center"> for my wrapper tables.
For vertical alignment, use the valign attribute of your <td>s and <tr>s. Works best if another td in the row has an image with the height you'd like to vertical align to.
I am working on e-mail template. Code is something like this :
<table width="702" cellpadding="0" cellspacing="0" align="center" id="template">
<tr>
<td align="left" valign="top">
<img src="/email/new/top_bar.png" width="702" height="11" alt="" border="0">
<img src="/email/new/bottom_bar.png" width="702" height="11" alt="" border="0">
</td>
</tr>
</table>
I always get vertical whitespace between these two images.
I tried using valign, vspace but no luck. How to get rid of it?
You get whitespace because the images are laid out inline (between two rows of lines there is spacing). You can either lay them out as block elements....
img { display:block; }
.. or you can use the vertical-align property to define a different vertical align which should remove the spacing...
img { vertical-align:top; }
http://vidasp.net/media/CSS-vertical-align.gif
BTW, please stop using deprecated attributes (cellpadding, cellspacing, align, border). For each of those attributes there is a CSS alternative which should be used. Also, use some CSS reset code (like Yahoo CSS Reset)...
Strange: This shouldn't be.
Maybe the E-Mail client interprets the line break in between the <img>s as white space.
Try setting them directly next to each other: <img src...><img src...
Your lines are high enough to accommodate text in the default font, which is higher than your 11 pixel images, hence the gap.
You need to make the lines smaller; the simplest way for your example is to shrink the font:
<td style="font-size: 1px;" align="left" valign="top">
Tested in IE 8, Firefox 3.6 and Chrome 6.