I created a short and simple HTML email for a newsletter. Everything displays perfectly on gmail and hotmail. However on Outlook there's some space between the images.
Checking with firebug I can see that my line-height was ignored and the whitespace I'm seeing is actually the line height of my td. Here's a part of my code :
<tr>
<td width="10" height="80" style="line-height:0px; line-height:0; border-right:1px solid #9cc020;"> </td>
<td width="15" height="80" style="line-height:0;" > </td>
<td width="560" height="80" colspan="5" style="line-height:0;">
<img src="http://infos.mycookit.com/img/PL01bis/c1.jpg" alt="avec le code CHAMP" width="560" height="80" style="display:block">
</td>
<td width="10" height="80" style="line-height:0; border-left:1px solid #9cc020;"> </td>
</tr>
I have also tried setting font-size to 0, different ways for setting the line-height (%, em, px). I also removed the unnecessary white space between my tds and my imgs but line-height is just ignored completly. If I change it in firebug it works though. So I know the issue is none other than that.
Is there a way around this?
---edit-----
Oh and I also tried pretty much everything on this thread : Line-height not working in Outlook 2010 for HTML Email
including the weird hack.
Outlook does not use a "real" html renderer, so you're caught in a bad place. It may be that "line-height" does not work at all, or does not work for certain elements.
You can try a variety of alternate techniques. For example, wrap the content within the cell with an additional element, such as a div, span, etc., and give that element padding or margins. Example
<td>
<div style="padding: 10px 0;">[mycontent]</div>
</td>
Related
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%;">
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>
So I've just lost several hours of my life trying to win this battle, with no luck. In summary, I'm trying to fill a table with three 10px images, but GMail is forcing each cell to be 16px. Here's what I am working with:
<table border="0" cellpadding="0" cellspacing="0" width="550" style="height:10px !important">
<tr style="height:10px" height="10">
<td width="10" height="10" style="height:10px !important">
<img src="http://s3.amazonaws.com/meagain/images/templates/letterhead/corner_tl.gif" style="display:inline; padding: 0px; margin:0px" width="10px" height="10px"></td>
<td width="531" height="10" style="height:10px !important; background-color:#FFFFFF;">
<img src="http://s3.amazonaws.com/meagain/images/templates/letterhead/spacer.gif" style="display:inline; padding: 0px; margin:0px" width="10px" height="10px"></td>
<td width="9" height="10" style="height:10px !important">
<img src="http://s3.amazonaws.com/meagain/images/templates/letterhead/corner_tr.gif" style="display:inline; padding: 0px; margin:0px" width="9px" height="10px"></td>
</tr>
</table>
My apologies that there are so many redundant attributes, because I've been trying everything. Basically, I'm trying to make the table exactly 10px high. No matter what, however, GMail makes it 16px high. If I use developer tools to delete all three images straight from the source code, then the table collapses to the 10px. Also, if I delete 2 out of the three images, it still stays 16px. It's almost as if the TD must be 16px if it contains an image, or the image has 3px of padding around it.
Has anyone experienced anything like this? And if so, any ideas? I'm running out of ideas, and sanity..
Like Herbie said, make sure you set the line-height on the TD.
Also make sure you have a font-size set, because gmail might be setting the minimum height of the TD based on a space character in that cell. In general, setting a font-size of 1px in cells where there isn't any text is good practice.
It looks like this is for html email creation, correct? Take a look at this for any other issues - it's helped me out a bunch of times http://www.emailology.org/#1 and http://www.campaignmonitor.com/resources/ for tips.
I can't comment yet, so I'll post as an answer...
16px sounds like a line-height value. Have you tried setting the line-height of each TD to 10px or changing each IMG from inline to inline-block?
I was trying to figure out your solution.
This is the literal solution, put this in your TD tag:
style="line-height:0"
In your <img> tag, you can put this:
style="display:block;"
... or you can make the height to max-height. It should solve your problem.
In html - <img> tag is not a block tag so we need to use following css to let it work like a block tag
style="display:block;"
with this css the your given height will perfectly work on your HTML page.
Try once!
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.
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.