I have been working on this newsletter for a customer. Everything looks perfect and exactly the way I want it to. Even Outlook understands the newsletter but then.. Gmail.. I really don't understand what is wrong with Gmail in the browser. I have this piece of code.
<table class="w650" width="650" cellpadding="0" cellspacing="0" border="0">
<tbody>
<tr>
<td height="20"></td>
</tr>
<tr>
<td width="225" bgcolor="#e1822d" valign="top" align="left">
<div style="padding:12px 20px 0px 20px;">
<div style="font-family:arial;font-size:20px;color:#FFFFFF;line-height:36px;">
<singleline label="Title">Tenerife</singleline>
</div>
<div style="font-family:arial;font-size:11px;color:#FFFFFF;line-height:20px;">
<multiline label="Description">Click to see all properties <br /> Lorem Ipsum Dolor sit amet</multiline>
</div>
</div>
</td>
<td width="425" valign="top" align="left">
<img editable="true" src="images/side_image_01.jpg" label="Image" width="425" border="0" style="border:none;" alt="Image" />
</td>
</tr>
</tbody>
</table>
And in every other mail client it outputs like this:
But in Gmail and Gmail only it outputs with an additional size in the orange column:
I know it is silly to focus on but it really annoys me that my HTML code is bullet proof and even old Outlook mail clients can show it right but then Gmail twists it.
Does anybody know what I should type either in the inline css or head css or anything - to make Gmail understand?
Add display: block; to the image tag's style attribute or img { display: block; } if you have a <style> section anywhere and need to apply this to other images as well.
For some reason Gmail adds extra margin to images that aren't explicitly specified as display: block.
Each mail client has different HTML rendering technique.
I can not really find out the difference from both the images. I see both images are identical.
From what I have understood, All I can say is, you can set fixed width inline in order to force Gmail to use your styling. !important can help you to force the styling.
Related
This week I was introduced to the wonder that is html emails. I have an email that needs to display an image and some text side by side. The problem that I'm coming up against is that the image is getting stretched vertically instead of the height being auto set by the width.
This problem only happens in outlook.
This is what is being rendered:
and this is the code that makes it up:
<table class="container" align="center" width="640" cellpadding="0" cellspacing="0">
<tr>
<td width="256" style="width:40%; float:left; text-align:right;">
<img class="max-image" width="256" style="display:block;width:100%; height:auto;" src="https://cdn.pixabay.com/photo/2015/06/25/17/56/people-821624_1280.jpg" alt="coach picture"/>
</td>
<td width="384" style="width:60%; float:left; text-align:center;">
<table width="100%">
<tr>
<td width="10"></td>
<td>
<div style="padding-left: 10px;text-align: center;">
<p style="color:#6AA342;"><strong>Meet The Coach</strong></p>
<p>{{ coach_first_name }}</p>
<p>{{ bio }}</p>
</div>
</td>
</tr>
</table>
</td>
</tr>
</table>
From what I've gathered online so far, outlook doesn't seem to like when you don't explicitly set the height property of the image, but the issue I have is that this image is dynamically set and it may be a different aspect ratio from email to email, so I can't really set the height of the image.
If you take a look at the following line:
<td width="256" style="width:40%; float:left; text-align:right;">
You may see the float:left property which is not supported in Outlook. The fact is that Outlook uses Word for rendering HTML bodies.
You can find the full list supported and unsupported HTML elements, attributes, and cascading style sheets properties in the following 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 am trying to send html emails with images. Images look good in all email clients but in outlook they are too wide. How to fix max-width of image?
<table id="cg-cmgxsgg" class="widget widget-image " width="580" data-widget-code="email-image">
<tbody>
<tr>
<td align="center">
<div><img src="http://vcap.me//file/get/ce2c1e66-2129-41e8-903c-a40300e7bbd0" width="580" alt="" style="float: none; margin-left: auto; margin-right: auto;"></div>
</td>
</tr>
</tbody>
</table>
Regardless of CSS support or HTML attributes, the main factor that is causing the issue in Outlook is the actual size of the image. Outlook usually ignores whatever HTML sizing (width= or height=) or CSS styling (width:, height:) and goes off of the embedded information in teh image. This is all based off DPI setting as well as the renderings of the Word HTML engine.
Mailchimp solutions
Below is snippet explaining the issue in more detail from here
"This issue usually happens when you are using a picture other than 96dpi.
When inserting a picture, Outlook will rescale the image as if it was a 96dpi image. This means that if you have a picture of 150dpi with a height of 88px, it will be displayed as an image of 56px high;
88px/150dpi * 96dpi = 56px
It even gets worse; upon sending, Outlook will convert and compress (re-render) the images to 96dpi with the new dimensions permanently! This means that all the "detailed" picture information is lost and you'll be sending an image of 96dpi which is 56px high. This is of course a severe and very visible quality loss.
If your picture is less than 96dpi, then the opposite happens. A picture of 88px high with a dpi of 32 would then result in a 96dpi image of 264px high. So the result will be a very large image (but this time you can resize it back without the image becoming blurry).
This is a long outstanding issue/function/design choice which goes back all the way to Word 6.0 from 1993."
For setting a max-width on images for Outlook I add a Width="600" attribute to the img tag. Note the lack of px on that size, with px it doesn't work and it must be on the img tag, not any parent element.
E.g.
<img width="600" src="http://www.myimage.co.nz/myimage.jpg" alt="My Image" />
On a side but related note I use a width of 280 for side by side images in a 600 width table. This is because Outlook adds padding (or maybe margin) and they would stack if you made them both 300.
Couple of things, I'd refrain from using floats etc in your emailer code and also would remove that wrapper div, with emailers you've really got to go with simple table markup. Also try to avoid things like p tags etc as they create additional space etc.
For your actual question I'd try something like this, I'd set a height on my image and ive it display:block
<table id="cg-cmgxsgg" class="widget widget-image" width="580" data-widget-code="email-image" cellpadding="0" cellspacing="0" border="0">
<tbody>
<tr>
<td align="center">
<img src="http://vcap.me//file/get/ce2c1e66-2129-41e8-903c-a40300e7bbd0" width="580" height="200" alt="" style="display:block;">
</td>
</tr>
</tbody>
</table>
max-width is not a supported CSS style in Outlook 2007. (Neither is float, apparently.) Outlook is notorious for providing very limited CSS support.
Your best solution is to specify a smaller width (and height) in the HTML attributes:
<td align="center">
<div><img src="..." width="500" height="300" alt="" style="margin-left: auto; margin-right: auto;"></div>
</td>
I'm a bit late to the party (got here via Google). What works for me, and what I didn't see in the answers, is conditional comments for Outlook.
They work like this:
<!--[if mso]>
<table align="left" border="0" cellspacing="0" cellpadding="0" width="100%" style="width:100%;">
<tr>
<td valign="top" width="600" style="width:600px;">
<![endif]-->
<table align="left" width="100%" border="0" cellpadding="0" cellspacing="0" style="min-width:100%;">
<tbody>
<tr>
<td>
<img align="center" alt="" src="[image source here]" width="[desired width here]">
</td>
</tr>
</tbody>
</table>
<!--[if mso]>
</td>
</tr>
</table>
<![endif]-->
What your're doing here is essentially wrapping your image table in another table with fixed width, but only for Outlook.
MailChimp has a nice reference you should check out if you run into problems with Outlook: https://templates.mailchimp.com/development/css/outlook-conditional-css/
Hope this helps some fellow Googlers!
I am using this with perfect success in Outlook 365 (2022):
<img src="https://picsum.photos/1000/1000" width="100%" style="width: 100%;">
Hello guys i am trying to send an email with HTML in it, and of course i know that the formatting and alot of CSS is not supported in Outlook, but i was wondering why this simple thing was showing broken, is there any quick fix or a workaround/alternative? look at how the buttons should appear:
http://puu.sh/84ijt.png
But they appear like this:
http://puu.sh/84ijA.png
Here is the code for it:
<tr>
<td style="display:block;min-height:38px;max-height:38px;">
<p style="margin-left:15px;">
<a style="font-size: 10pt;color: #fff;text-align: center;display:block; width:70px;height:25px;text-decoration:none;background-color: #c64141;padding:5px 5px 0px 5px;border: 1px solid #901313;margin-right:10px;float:left;"
href="link here..">Enquire</a>
Full Details
</p>
</div>
</tr>
</td>
There is a bit of mis-information in this thread.
You can use an image for a button, however more advanced designers are trending towards "bulletproof" buttons these days. They display with images turned off. See this link: buttons.cm
Background images are supported in Outlook, but only in the <body> tag OR using VML, see the buttons.cm link above or backgrounds.cm for examples.
Back to your specific example, there are a few ways to accomplish it, but here is how I would do it:
<table width="300" border="0" cellpadding="0" cellspacing="0" style="border:solid 1px #000000;">
<tr>
<td style="padding-top:20px; padding-bottom:10px;">
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="50">
</td>
<td width="90" height="30" align="center" valign="middle" bgcolor="#c64141" style="border:solid 1px #000000; font-size:12px;">
Enquire
</td>
<td width="20">
</td>
<td width="90" height="30" align="center" valign="middle" bgcolor="#c64141" style="border:solid 1px #000000; font-size:12px;">
Full Details
</td>
<td width="50">
</td>
</tr>
</table>
</td>
</tr>
</table>
On a side note, you need to use the 6-digit hex colors in html email, and don't waste your time with the following css properties as they have inconsistent support:
margin (use padding instead)
text-align (use align="" instead)
min-height & max-height
float (use align="" instead)
background-color (use bgcolor="" instead)
Also, avoid shorthand like padding:5px 5px 0px 5px;. Unfortunately you need to write it out padding:5px; padding-bottom:0;
As an email marketer I suggest you use an image for your button. Especially if it is a call to action. The one thing you don't want to be broken is that, and the only way you can trust it wont be and that is to use an image within a table cell.
I hope that helps!
Have you tried giving the <td> the background-color? (or another container)
You could also try
<a href="#">
<span style="display:block;background-color:red;color:white;width:100px;text-align:center;">link</span>
</a>
I haven't tested in Outlook but it might work.
Using images isn't the best solution, especially since most of the time emails are rendered without images until the user accepts to view images.
The way I do it is a table with in a table, so something like this:
<table width="outside container width here">
<tbody>
<tr>
<table style="apply your styles here, background colors, paddings etc (do not use margins, poorly supported.)" height="height of inner container" width="inner container width here" align="however you want it aligned">
<tbody><tr><td>Your button actually goes here</td></tr></tbody>
</table>
</tr>
</tbody>
</table>
I have an html newsletter which works in most email carriers but the formatting is messed up in outlook. I have put vspace="10" on the image tag to put 10px margin on the top and bottom of the image to have a space between the image and text below it. However, in Outlook the vspace is not being picked up and the text appears directly under the image with no space between.
Does anyone know how to get this to work? I tried to put a margin-bottom of 10px on the image, but again this did not work.
It might be easier to use a nested table and define the height of the row to be 10px. What you are contending with in Outlook 2007+ is Word HTML rendering which handles CSS in it's own special way.
With HTML Email there is a lot of nuances between the different browsers. One thing i have learnt from creating emails is that it needs to be extremely simple. Both margin & padding are not supported by Outlook (due to it using the word rendering engine).
The solution
Replace the image and the space with a table containing 2 spacer gifs and the image in the centre. For example (you need to use absolute paths to your images):
<table cellpadding="0" cellspacing="0">
<tr>
<td>
<img style="display:block" border="0" src="images/spacer.gif" width="IMAGEWIDTH" height="10" />
</td>
</tr>
<tr>
<td>
<img style="display:block" border="0" src="YOUR IMAGE" width="" height="" />
</td>
</tr>
<tr>
<td>
<img style="display:block" border="0" src="images/spacer.gif" width="IMAGEWIDTH" height="10" />
</td>
</tr>
</table>
As we all know, Outlook 2007 uses the Word 2007 rendering engine, causing endless grief when designing HTML email message. [Insert rant here] In particular, float, margin, and padding are - shall we say? - poorly supported.
To simulate float so that text wraps around an image, apparently we can simply use:
<img src="foo.png" align="right">
The issue is padding/margin. Without padding/margin, the wrapped text butts up against the image which looks goofy. One workaround is to edit the image and add transparent framing that simulates margin.
Does anyone know any other workarounds?
After reading Microsoft's documentation on Outlook 2007 support, I found that using hspace on an image will work to create white space around it similar to padding.
[ img src="image.jpg" align="left" border="0" hspace="10" ]
That will give you the equivalent of 10px of padding. Works pretty well across email clients.
Figured I'd share in case someone else Googling the issue stumbles across this question like I did.
I have tried it this morning and sadly borders on images arnt supported, however, you can implement the concept on the text area :).
border-left: 7px solid #fff;
for example, inside a white container would give the visual effect of left padding....
One place that padding is supported in Outlook '07 is <td> tags. So I have solved this by wrapping the image in a table:
<table cellspacing="0" cellpadding="0" border="0" align="left">
<tbody>
<tr>
<td>
<table cellspacing="0" cellpadding="0" border="0" align="left">
<tbody>
<tr>
<td valign="top" style="padding: 0px 10px 0 0;">
<img src="http://www.mysite.com/images/myimage.jpg" style="width:60px; height:100px;" border="0" />
</td>
</tr>
</tbody>
</table>
<p>The text I want to see wrap...</p>
</td>
</tr>
</tbody>
</table>
Note the align="left" is on the parent table as well as the one immediately holding the image. This hack is needed for Outlook 2013. Everything else looked great without it on Litmus.
Adding padding around in image for Outlook and all other email clients.
I found that this works.
img {
padding-left: 25px!important;
padding-top: 25px!important;
padding-bottom: 25px!important;
padding-right: 25px!important;
}
I know this thread is old, but an alternative would be to give the image a solid border the same colour as the container.
If you add a inline style to the img tag with a margin command like this:
<img src="foo.png" align="right" style="margin:5px;">
I'm guessing that is what you're trying to do.