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.
Related
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.
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'm creating a newsletter and I observed that in Yahoo mail a blue border is added to the images inside a link. I already checked other forums and you can solve this by applying any of these two options in the CSS inline:
border:none;
border:0;
This does work and you wont see the blue border on yahoo mail. The problem is that for my design I want to add a border-color to the image as link. So if I apply this solution for Yahoo mail I will have no border on the images.
Is there any way which I can solve this issue?
Here you have my code:
<tr>
<td width="260px">
<a href="#">
<img alt="" src="link-to-image/pic1.jpg" style="width:258px;border: rgba(235, 173, 21, 0.5) 1px solid;display:block;" />
</a>
</td>
</tr>
try border="1" border-color="#005288" in your image tag. Always use the 6-digit hex code also.
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.