I have an animated .gif that is 1200px wide in total, but I'd like to scale it down to 600px wide for a clearer image in 120dpi. Below is the code that's in the message; it's displaying in the right width but the wrong height (as you can see there's no height defined, and it's not auto-scaling the way I'd like it to).
Outlook 2019 is the only email client in which it's displaying wrong. It looks fine in all other email clients. Also, the other images (.jpgs) in my message are displaying exactly the way I want them to, and they contain the same inline CSS.
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td style="padding: 0; text-align: center"><a href="https://www.lookoptic.com/collections/screen-products" target="_blank"> <img alt="FRAMES FOR THE FAMILY | Make protecting your eyes from harmful blue light a family choice. With matching frames for adults and kids, we keep it easy for the whole family to keep their eyes healthy even while spending more time in front of screens than ever." border="0" src="https://d3k81ch9hvuctc.cloudfront.net/company/HQd5zH/images/57fbdbba-e232-441f-abc2-098444d1525f.gif" width="600" style="display: block; border: 0px; outline: none;
width: 100%; height: auto; max-width: 600px;background: #fff; font-family: sans-serif; font-size: 15px; line-height: 15px; color: #555555;" /></a> </td>
</tr>
</tbody>
</table>
Any ideas? Thanks in advance.
Outlook will ignore the style sheet for your image. So you can use the height and width tags to direct the behavior of Outlook and allow modern email clients to operate the way they need.
If your animated image on Outlook is supposed to be 600px x 600px, do this:
<img src="#" width="600" height="600">
Then for the other clients, add in an inline style sheet (like you did in your example.
<img src="#" style="width: 100%; height: auto; max-width: 600px;" width="600" height="600">
This will work for any image format supported in Outlook.
Good luck.
Related
I'm creating an email signature template for our team. The email signature has a profile image of a team member above a table row with a dark background; however, Gmail is creating a space between bottom of the image and the section underneath. I've tried virtually everything that I could find on stackoverflow, email monks, etc.
The table's cellspacing, cellpadding, and border have been set to 0. display:block hasn't worked, setting the font-size to less than 2px hasn't either.
Any help would be appreciated.
<tr>
<td width="202" rowspan="3" valign="bottom" style="vertical-align: bottom;">
<div valign="bottom">
<img
src="IMAGEURL.png"
align="absbottom"
width="202"
height="242"
border="0"
style="display: block; line-height: 0px; font-size: 0px; border: 0px; padding: 0px; vertical-align: bottom !important;"
/>
</div>
</td>
</tr>
Can't replicate unfortunately but what happens when you remove the div?
There really isn't any need for the div in there to be honest, you may as well remove it anyway and the align="bottom" should only be set on the table cell as the image will inherit that property by default.
To be honest, it would be good if you could post your entire code you're using as it'll give us context of what you're working with. Even if it's with placeholder content like you already have done with the image path.
I am trying to create a table where the height will completely collapse when an image isn't populated. I am having trouble in that the table will not fully collapse when the image isn't served (through DART) - it will be blank but will be several pixels tall and the desired effect is that the height will completely collapse. Any ideas on how I can achieve this desired effect? And styling of imgs isn't the issue. Thank you!
Example:
<table cellspacing="0" cellpadding="0" width="435">
<tbody>
<tr>
<td valign="middle"><a href="$clickthrough(adv_imglink_new,concat(URL=http://ad.doubleclick.net/N536/jump/bc3.email/dailydigest;dd=,todayformat(0,MM),_,todayformat(0,dd),_,todayformat(0,yyyy),;tile=4;sz=435x103;dcove=r;us=,lookup(ADSTAGE),;us=$lookup(AD_STAGE_WEEK)$;ord=,lookup(BD_LOGINCODE),todayformat(0,yyyyMMddhhmm),?))$" target="_blank">
<img src="http://ad.doubleclick.net/N536/ad/bc3.email/dailydigest;dd=$todayformat(0,MM)$_$todayformat(0,dd)$_$todayformat(0,yyyy)$;tile=4;sz=435x103;dcove=r;us=$lookup(ADSTAGE)$;us=$lookup(AD_STAGE_WEEK)$;ord=$lookup(BD_LOGINCODE)$$todayformat(0,yyyyMMddhhmm)$?" border="0" alt="" />
</a></td>
</tr>
</tbody>
</table>
Outlook in particular has a minimum table height of around 19px. Try using this:
<td height="1" style="font-size: 1px; line-height: 1px;">
Personally, I'd just design it to borrow 20px of padding from whatever you have above, and avoid line-height hack all together. If you have text above it for example, just remove the bottom padding there and add it to top pad this cell, avoiding the min-height issue all together.
Please try to add below code
<td height="1" style="font-size: 1px; line-height: 1px; mso-line-height-rule:exactly;">
Add below code <td style="font-size: 0%; line-height: 1px; mso-line-height-rule: exactly;">, then email will not have more white spacing. Its best practice to have this for out table when we create template based html email. Thanks
I am supposed to send out the newsletter for a local club. Formatting in HTML appears fine, but if user views the email in a web based client (e.g. yahoo, gmail, etc.), the image also appear separately as an attachment; even though I am using a URL to reference the image. How can I avoid having the image appear as an attachment? Thanks!
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Club News</title>
</head>
<body leftmargin="0" marginwidth="0" topmargin="0" marginheight="0" offset="0" style="-webkit-text-size-adjust: none;margin: 0;padding: 0;background-color: #FAFAFA;width: 100%;">
<center>
<table id="table1" style="background-color: #ffffff; border-bottom: 0px none; width: 600px;" border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td>
<img style="position: relative; right: 0; bottom: 0;border: 0px none; line-height: 100%; outline: none; text-decoration: none; display: block; float: left;" title="Club1" src="http://www.clubswebsite.com/assets/img/clublogo.png" alt="logo" align="center"/>
</td>
</tr>
</tbody>
</table>
</tr>
</tbody>
</table>
One solution you can use, if your image is relatively simple (such as clip-art or logo), is to convert the image to pure HTML. You can find tools that convert the bitmap to an HTML table, coloring the cells in the pixel's color. Some convertors (here's one that I wrote - source code here) apply RLE compression to make sure that HTML isn't too large.
Note, that even with RLE this greatly increases the image size (e.g., a 5kb PNG might grow to be 80kb HTML) but AFAIK, as long as you keep the e-mail size under ~120kb it displays well on all e-mail clients.
I have a pixel border showing between table rows when doing email testing. iPhone and iPad only.
I have tried:
* {
margin:0;
padding:0;
}
I have also tried:
this makes the border blue instead of white but I want the border removed completely?
This apparently happens when you've applied background colors or images to individual table cells. I removed individual bgcolor and background-color references from the tables with mystery borders, and the problem went away!
Source: iPhone fail: The trouble with table borders and HTML email (Campaign Monitor)
Try adding this:
<meta content='width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;' name='viewport' />
This will stop users from zooming in. I found this works too:
<meta content='width=device-width; initial-scale=1.0;' name='viewport' />
But, it looks broken again when you zoom in. Initial load worked, so I was happy with the second option.
try adding:
border-collapse:collapse;
see what happens
It's an issue in iOS, for more info see: http://www.campaignmonitor.com/blog/post/3585/iphone-fail-the-trouble-with-table-borders-and-html-email
Basically, it has to do with different background-colors for the table cells. To quote:
"To prevent these borders from appearing on the iPhone, you can try:
Removing background colors or images from individual table rows and cells, and/or;
Nesting the problematic table in a new table, featuring a background color that matches that of the inner table."
I "solve" this using box-shadow. I know it's not pretty but hey, we're talking about tables here :)
Simply put a box-shadow to any TD having the parent node color showing up on iPad. You can even do this only for the iPad inside an iPad specific media query.
border: 0;
should do it nice and easy
images? add style="display:block;" to images
While changing the background color of the containing table worked for most parts of my layout, for one section, that wasn't an option. There I used relative positioning and a left value of -1 (on the right cell). I was surprised to see positioning supported (at least in iOS 6.1). I suppose a negative margin would have worked too.
In my case I wanted a table that looked like overlapping boxes where the background box ended before the end of the row and the foreground box started indented from the start of the row. After reading every web site, Q/A, suggested here and trying every alternative what eventually worked was specifying a box-shadow, e.g.:
<table style="margin-right: auto; margin-left: auto; width: 100%;" cellspacing="0" cellpadding="3">
<tbody>
<tr>
<td colspan="4" style="width: 90%; background-color: navy;">
<span style="color: #ffffff;">Background Box Line 1</span>
</td>
<td style="width: 10%;">
</td>
</tr>
<tr>
<td style="background-color: navy; width: 25%; box-shadow: 0px -1px 0px navy;">
<span style="color: #ffffff;">BG Box Line 2</span>
</td>
<td colspan="4" rowspan="2" style="background-color: red; width: 75%;">
Foreground Box Line 1<br>
Foreground Box Line 2
</td>
</tr>
<tr>
<td>
</td>
</tr>
</tbody>
</table>
The line I had to get rid of was a thin horizontal gap line between the 2 "background" navy cells appearing on iPhones and the box-shadow: 0px -1px 0px navy; let me put a thin navy line above the bottom navy cell and so filled in what otherwise was that gap between the top and bottom navy cells.
I know this horse has just about been beat to death.. but I've got a Gmail table spacing issue that is just stumping me this morning.
<td valign="top">
<img src="###/enewsletter_layout_v3_18.jpg" alt="" />
<table cellpadding="0" cellspacing="0" style="background: #000; width: 700px; margin: 0 0 0 8px; text-align: center; color: #fff;">
<tr>
<td valign="top" style="background: #890000; height: 50px; padding: 10px 15px; font-size: 24px; font-weight: bold;">
New Patient Special Offer <br/>
Save $$$
</td>
</tr>
<tr>
<td valign="top" style="background: #000; height: 50px; padding: 5px 15px 15px 15px;">
<h1 style="font-size: 24px; font-weight: bold;">Do you have a question?</h1>
If you have read anything in this newsletter and have any questions or would like to
discuss further, please contact <br/>
The Centre at (555) 555-5555
</td>
</tr>
</table>
</td>
No matter what I do, the first image in the table there (layout_v3_18) always has spacing under it. About 2-3 pixels of white space in Gmail. Happens on a couple other images in the email, but the rest work fine. No matter how many times I compare the tables, it won't work.
Thoughts?
I've actually run into this problem a lot recently. The code we found that works best (read: looks consistent in the most mail clients) is the following:
<img src="###" style="display: block;" />
Just add the display: block to every image and it fixes the problem.
In answer to my own question (in case someone else has a similar issue), I finally found the issue (or a solution anyways).
I added a style="float: left" to the image itself, which magically fixed it.
Alternatively, using "display: block" tends to have a similar result if used on all images, but the float seems to clear the spacing specifically for GMail when it's working perfectly fine elsewhere.
Gmail can add white space around any table, including nested tables.
Although a bit of a hack adding the following as an inline style to the table removes the white space:
style="font-size:0.0em;" ...
Had the same issue, I added below line
style="line-height:1px;"
in the td tag above.
In my html template in filelist.
Using display:block on images reduced some space between image cells but didn't remove all gaps.
Adding the deprecated cellpadding/cellspacing attributes on the parent table (<table border="0" cellpadding="0" cellspacing="0">) those last gaps were gone too.
I had the same problem and did all the above style options but nothing worked. I made the table height shorter and it removed all the spacings.