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/
Related
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
I'm designing email template. Between some texts I need to put break lines. So far so good on most clients except outlook.com(on browser). It wraps my <br> inside a <p> which has big margin by default.
I have tried to use <br>, <td> with space, <td> with <span> and space inside and <td> with <p> with margin:0 and space inside. Each time i got my html wrapped in a <p>.
Why it wraps my html in <p> ??
I've never found the .ExternalClass hacks to be of any use. Outlook.com is very iffy in general about line-height and <p> tags as a whole, so I've found the best thing to do is remove all <p> tags from my emails just and put all text sections inside a <font> tag inside the <td>.
I ran a quick litmus test and wasn't able to reproduce your results, with either <br> or <br/> however you could just nest a table inside a <td>, don't define heights, and use multiple rows in that table to simulate breaks. I've found that it doesn't mess with my usual line-height rhythm.
Outlook has trouble rendering html emails correctly.
There is a little hack that might help you:
<style type="text/css">
.ExternalClass p (Or whatever, you can target pretty much anything here)
{line-height: 50%; margin:0;}
</style>
This will talk to outlook's native stylesheets and adjust those, since outlook applies the .ExternalClass class to your email.
Here is some important information on the subject: http://www.emailonacid.com/blog/details/C13/line_height_and_outlook.com
Many will say that all styling in html-emails has to be inline. This is true to an extent because some clients will strip the head and body tags from your email. But for those that don't, like outlook, it is a valuable space for work arounds.
Hope this helps.
The reason Outlook wraps everything in <p> tags is because it uses the MS Word engine to render html instead of a browser based renderer.
The p tags are unavoidable and the suggestions above are good ways to 'zero out' the unwanted margins. Outlook doesn't strip <style> tags, however some MS Exchange servers do (for security I assume), so if you are finding your style tags ignored in Outlook, try sending to a different domain email address (particularly a non corporate one) and you should find it will work as expected.
I also suggest never using <p> tags in email and using double <br> tags between paragraphs and <br> or <br> for top and bottom 'padding' within table cells.
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 am creating an email template which has to display images from external website. I had placed some <img> tags for rendering the images and there are some <td> tags with background-image property set in inline css of the elements.
Now, when an email is received in outlook, the images are not displayed (this is expected as the images are not embedded). And I click the download images to see the images properly. The images in <IMG> tag are only shown and the background-image for the <TD> is not rendered.
Any views on solving this problem?
Thanks!
At last I found the answer.
Outlook 2007 does not use the Internet Explorer's rendering engine for loading HTML content. Instead it uses Word 2007 HTML and CSS capabilities.
Because of this CSS attributes such as background-image is not supported. And hence it's not possible to set a background image for HTML elements in outlook using standard CSS tags.
More info is available at http://msdn.microsoft.com/en-us/library/aa338201(v=office.12).aspx
Background images are not supported in Outlook. As a best practice, you should never use background images in HTML emails. If you must have a background, you can use and image PLUS a solid color. Those with email clients that support background images will get the images, and those that don't support it will fall back to the solid color.
There is actually a method to use background images in HTML emails in Outlook.
As Chaitanya mentions it can't be done with CSS, but it can be done via VML.
The technique is a bit more involved than using background: url(....) and I don't use it as frequently as I would use the CSS technique (if it worked in Outlook). But it is very useful.
I've used it successfully on a number of campaigns.
Full instructions here: including a list of email clients that support this technique.
http://www.campaignmonitor.com/forums/viewtopic.php?pid=14197
Also, here's a guide from Campaign Monitor: http://www.campaignmonitor.com/css/ which proved super helpful for me.
There is a way of displaying HTML images.
Right html emails rendered as MSWord document in outlook.
I got the solution from this https://stackoverflow.com/a/12693917/413032 post.
So we need an alternate.
In fact you may open your html email in MSWORD and finding what seems wrong and considering what can be an alternate gives idea.
Here is what I did ;
Added v namespace to html tag
< html xmlns:v="urn:schemas-microsoft-com:vml"
Added v's style to head block
< head >
<style type="”text/css”">
v\:* { behavior: url(#default#VML); display:inline-block}
</style>
In table or where you need add your MSWord alternate
<table style="background-image: url('https://e-telesaglik.com/images/email/canvas-bg.jpg');background-repeat:no-repeat;" cellpadding="0" width="960">
<!--[if gte vml 1]>
<v:shape
stroked='f'
style='position:absolute;margin-left:-90pt;margin-top:-1.55pt;
z-index:-503306481;
visibility:visible;
width:720pt;
height:475pt;
top:0;
left:0;
border:0;
'>
<v:imagedata src="https://e-telesaglik.com/images/email/canvas-bg.jpg"/>
</v:shape>
<![endif]-->
<tbody> ....
That is all.
Sure it will be a MSWord render. And more, as you notice we use absolute positioning...
Anyway this is a workaround and solves the issue in a way.
We hope one day MS-Outlook renders html e-mails with a web browser not with MS-Word.
This works in Gmail,
I tried this to show div with image in email newsletter, try inline css, sending email guidelines here