I have a new challenge, which I haven't seen posted or answered here....
I have an image that needs to appear in the top-right corner of an email in Outlook, but that image is treated like a background image - the main content of the email is floated over it. The image file is NOT the width of the email. It's about 15% of the width of the email and perhaps 20% the height.
The email body must be 640px wide, height is variable. The image is 203px wide and 432px tall.
I'm using VML to display the background image in Outlook. The image is set to be the background image of a <td> tag, and that tag contains a number of additional tables that provide the email body (hence the variable height). The image should appear only once at the top right of the td.
Would coordorigin and coordposition be a valid approach to keep the image to a single location, or would it negatively impact the td containing the rest of the email body?
Any help would be appreciated.
Below is the bare minimum you need to achieve what you are asking for:
<!-- main containing table -->
<table width="100%" cellpadding="0" cellspacing="0" border="0">
<tr>
<td align="center">
<!-- main body table -->
<table class="w320" width="640" cellpadding="0" cellspacing="0" border="0" style="position:relative;">
<tr>
<td style="position:relative;>
<!--[if gte mso 9]-->
<v:image src="...yourimagehere.jpg" style="width:203px;height:432px;position:absolute;top:0;right:0;z-index:-1;" />
<![endif]-->
Your email here
Bear in mind that using a negative z-index on VML objects when using a background colour on the body of your email will result in the VML object displaying behind the bgcolor
VML allows a lot more styles than your typical HMTL rendered in the word processor, take full advantage where you can.
I can't actually remember if "right" works for position in Outlook. if not just use left:397px; instead.
Hope this helps
Related
Im having some difficulty. Im trying to have my email be responsive in outlook clients but its just not having it - It wants a set width in pixels but when I do this it looks rubbish in outlook mobile but most frustratingly it looks rubbish in GMAIL because the percentages have been removed.
Is there anyway to get around this? Specifically I want my image to be 100% width with a max width of 600px.
<tr container">
<td class="content">
<img width="100%"
src="imagelink" />
Generally what you want is the width attribute for Outlook, e.g. width="600", and the style attribute, which Outlook ignores, set to width:100%.
i.e. <img width="600" style="width:100%;max-width:600px" src="..." />
Not sure why your percentage is removed in Gmail - but perhaps because your stray quote mark here <tr container">. The other possibility (only guessing because you've only posted part of your code) is that you have not inlined the code. Some email clients do not respect embedded CSS, so you can't rely on it. You can use this tool to fix: https://inliner.cm/
I've got this responsive email template (that's just a portion of it, more on jsfiddle):
<!--[if mso]>
<v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="http://byensejendom.dk/conference/signup/559"
style="height:200px;v-text-anchor:middle;width:140px" stroke="f" fillcolor="#9B4242">
<w:anchorlock/>
<center style="color:#ffffff;font-size:16px;font-weight:bold">Tilmeld dig</center>
</v:roundrect>
<![endif]-->
http://jsfiddle.net/cC5tr/
Here are results from Litmus:
https://litmus.com/pub/74df5e9/screenshots
The section that SHOULD format the button right next to the image is enclosed with tags, however I can't get it right in 2007,2010 and 2013.
Thanks
The problem was that the two tables next to each other had both align="left" attribute. I changed the other table's attribute to align="right" and it started working
I have a MailChimp template I am working on for a client. In Gmail only, I get some images that are much larger than the stated dimensions in the template. In this example, the image is shown in Gmail at 600px x 120px but the <td> is:
<td cellpadding="0" cellspacing="0" style="border-collapse:collapse;vertical-align:top" height="4px" width="600px">
<img src="http://www.marketingscience.co/boa/hero-header.png" style="display:block;border:0;min-height:4px;width:600px;background-color:#696969;color:white;font-size:18px;line-height:100%;outline:none;text-decoration:none">
</td>
Any suggestions would be greatly appreciated.
Try setting image dimesions in plain html, like this:
<img src="image.png" width="100px" height="300px" />
Also, you have no height set in 'style' attribute, so adding it may solve the issue
Add a style element in your email template and set some default styles for all images in your email, like this:
<style>
img {
display:block;
height:auto;
line-height:100%;
}
</style>
MailChimp will add these styles inline to every <img> element before it sends the email.
Then, when possible, add the height and width attributes to each image as Alex Ponomarev suggested.
<table cellpadding="0" cellspacing="0" class="auto-style1" style="width: 100%; height: 100%">
<tr>
<td>edtretrt</td>
</tr>
</table>
Despite the fact that I specified that the height is 100% it doesn't fill the whole screen.
I want to use that table to set the background and because I want to send html email, I can't just change the background of the <body>
When you view that as a html file in your browser, your browser assumes it has a body and the body by default has some amount of margin. I can get rid of the border by specifying the body and removing the margin from the body. I also switched to a div instead of a table, to make the code simpler and removed margin from the div as well.
<body style="margin:0;">
<div style="width:100%;height:100%;background-color:orange;margin:0;">
edtretrt
</div>
</body>
I searched for changing background color of an email. It appears that most mail clients ignore or strip any body tags. It also appears that changing background colors in emails is not totally reliable. This site seems to indicate that you should use a table and you should use the bgcolor attribute with a six character color code to be supported by the largest number of mail clients: http://litmus.com/blog/background-colors-html-email
I understand that HTML emails need to use really old school layouts - as per lots of other answers on SO (e.g. HTML email: tables or divs?, HTML Email using CSS).
However, there seems to be some debate over whether it's still a good idea to use spacer gifs in email.
For example, compare these three layouts:
DIMENSIONS:
<table cellpadding="0" cellspacing="0" border="0" width="100">
<tr>
<td width="100" height="10"></td>
</tr>
</table>
WITH SPACER GIF:
<table cellpadding="0" cellspacing="0" border="0">
<tr>
<td><img src="spacer.gif" width="100" height="10"></td>
</tr>
</table>
WITH SPACER GIF AND DIMENSIONS:
<table cellpadding="0" cellspacing="0" border="0" width="100">
<tr>
<td width="100" height="10"><img src="spacer.gif" width="100" height="10"></td>
</tr>
</table>
How do I use them with dimensions? Are there any email clients that still require spacer gifs? Is there any harm done either way?
Personally, I never use spacer gifs, because they destroy the layout when image blocking is turned off, for three reasons:
If they don't render at all, any layout that requires the spacer image is lost.
If they render incorrectly (such as reverting to their original size, or proportionally to their original size) they break the layout.
Even if they do render properly and the layout works, all the image placeholders that are displayed when image blocking is turned on distract from the message of the email.
To get around issue #2, you can save each image with its actual dimensions. However, this obviously increases:
Time to build
Number of images to be downloaded by client
and it doesn't solve issues #1 and #3.
The reason for using spacer gifs is because some clients (Outlook 2007, Outlook 2010, Lotus Notes, Hotmail / Live Mail) will not render an empty cell. It's very difficult to have absolute precision over dimensions of a text node, and so a spacer image suffices. However, even those clients mentioned will render an empty cell that has width defined.
So as long as you're defining pixel widths on any empty cells you are fine. To go back to the examples in the question:
Dimensions-only - works with and without image-blocking in all major email clients
Spacer images only - works only when image-blocking is turned off
Dimensions and spacer images - works only when image-blocking is turned off
Because of this, you should use dimensions and not spacer gifs.
Various articles talk about this question as well (search for 'spacer images' on the pages)
http://www.banane.com/workblog/?p=61
http://www.campaignmonitor.com/design-guidelines/
You can definitely avoid using spacer gifs.
I find that the following code works in all clients. I generally either specify the width or the height of these empty cells. This specific example is what I use to create vertical space:
<tr>
<td style="line-height: 0; font-size: 0;" height="10"> </td>
</tr>
If you keep your cells higher than 19px (the min default height of Outlook), you never need to use line-height, and a simple <td height="20"> </td> works great. Example:
<table width="600" border="0" cellpadding="0" cellspacing="0" bgcolor="#CCCCCC">
<tr>
<td align="center">
top
</td>
<tr>
</tr>
<td height="20">
</td>
<tr>
</tr>
<td align="center">
bottom
</td>
</tr>
</table>
But, for vertical spacing, in most cases you can probably avoid doing that and add padding into the row above or below:
<table width="600" border="0" cellpadding="0" cellspacing="0" bgcolor="#CCCCCC">
<tr>
<td align="center">
top
</td>
<tr>
</tr>
<td align="center" style="padding-top:20px;">
bottom
</td>
</tr>
</table>
or like this, without padding:
<table width="600" border="0" cellpadding="0" cellspacing="0" bgcolor="#CCCCCC">
<tr>
<td align="center">
top
</td>
<tr>
</tr>
<td align="center">
<br>
bottom
</td>
</tr>
</table>
Note on the last example I used <br> instead of just <br>. This is because Outlook will collapse any line or cell that has no content in it. That is the same reason why the original example also has a in the spacer cell. If you were to add multiple rows or padding underneath, it would look like this:
<td align="center">
<br>
<br>
<br>
bottom
<br>
<br>
<br>
</td>
There are a couple of benefits of the two options without the spacer cell. First is that it is quicker and contains less code. The second is that it renders more consistently when someone forwards your email out of Outlook. Outlook's fabulous MS Word engine wraps everything in <p> tags, which add an unavoidable gap between rows. Having one less row will keep your email closer to your original design.
Note: Outlook 2007/2010 treats empty cells as spaces. AND applies default text and background color attributes to them. (so if your user likes purple backgrounds, cells with no color come out with purple background peeking through).
To offset this format your empty spacer cell this way:
<td width=(a percentage or a pixel width) height=(optional unless needed) bgcolor="#FFFFFF(always use 6 digit hex!)" style="font-size:1px; line-height:1px;")> </td>