I may be missing something obvious but for some reason Outlook.com is overriding the margin and line-height for the P tag it conveniently wraps all images in. Any solutions to remove this unwanted space at the bottom?
<table width="196" cellspacing="0" cellpadding="0" border="0" style="border-collapse:collapse">
<tr>
<td valign="top" align="left" width="196" height="45">
<table width="196" cellspacing="0" cellpadding="0" border="0" style="border-collapse:collapse">
<tr>
<td style="font-size:0;line-height:0;border-collapse:collapse;border-bottom:1px solid #BBBBBB;padding:0;border-collapse:collapse;background:red;" valign="top" align="left" width="196">
<a href="" style="font-size:0;line-height:0;" target="_blank">
<img style="width:137px;height:44px;display:block;" src="" width="137" height="44" alt=""/></a>
</td>
</tr>
</table>
</td>
</tr></table>
put this in your header style tag:
p {margin: 1em 0;}
As the p tags are inserted at rendertime, you need to overwrite it in the style tag.
Composing e-mails in Outlook is a pain...I managed to get rid of the extra space between images by putting style="border-collapse:collapse; line-height:0;" in the TD tag and explicitly setting all width and height. And Don't forget to put style="display:block;" in your IMG tags to cover all clients.
<td width="400" height="100" style="border-collapse:collapse;line-height:0;"><img src="myimage.jpg" width="400" height="100" style="display:block; border:0; outline:none; text-decoration:none; -ms-interpolation-mode:bicubic;"></td>
You have to put the following into the head style part:
img {
line-height:100%;
}
Actually, outlook.com converts it into the following, but it will work!
.ExternalClass img {
line-height: 100%;
}
We use this solution at app.edmdesigner.com for images, and it works perfectly.
Related
Can anybody provide me with the code for this design? in the email template, I need to make this design. Text can be changed dynamically.
Email clients usually have poor support for properties like position or negative margin values. See:
Can I email… position
Can I email… margin
However, there’s a popular technique among email developers called “Faux absolute position”. The idea is to use max-height in a parent element to limit the space taken by children element in the flow. You can then position children element using positive margin values or text-align. You can read this article about it.
<!--[if mso]>
<table border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:530px; background-color:#fffff5;"><tr><td>
<![endif]-->
<div style="max-width:530px; margin:auto;">
<table border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:530px; background-color:#fffff5;">
<tr>
<td style="padding:0 20px 20px; border:1px solid #eee;">
<div style="max-height:17px;">
<div style="margin:0 20px; padding:5px 20px; background:#fc2d6a; border-radius:5px;">
<p style="margin:0; color:#fff; font:16px/1.5 sans-serif; text-align:center;">
You’ve been referred!!!
</p>
</div>
</div>
<table border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%;">
<tr>
<td style="padding:20px; border:2px dashed #fc2d6a;">
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
<!--[if mso]>
</td></tr></table>
<![endif]-->
This wouldn't work as it is in Outlook on Windows and you’d need to add a VML fallback version.
I've tried creating an email signature but whenever I paste it into outlook the padding for the bottom of the logo gets removed? I also tried adding margin instead but it still got deleted? The only way is to add a space in manually after, but I'm sure this is not a good practice?
Thanks
<div>
<td style="vertical-align: top;">
<table cellspacing="0" cellpadding="0" border="0" role="presentation" style="font-size: 0px;">
<tbody>
<tr>
<td style="vertical-align: top;"><div style="margin-right: 10px; width: 150px; border-radius: 0px; padding-bottom: 10px;">
<img src="https://s3.eu-central-1.amazonaws.com/mysigmail/upload/2019-04-29-hzc85zi6onw.png" alt="avatar" style="width: 150px; border-radius: 0px;">
</div>
Apply the padding to the parent td cell instead of the div
<table cellspacing="0" cellpadding="0" border="0" role="presentation">
<tr>
<td style="padding: 0 0 10px 0;">
** content **
</td>
</tr>
</table>
As a heads up:
Outlook 2013-2019 do not work with padding-top
apply the image width to the image. Outlook will ignore the width in style
border-radius does not work with Outlook
Good luck.
I have created an email template that is tested to work properly on desktop clients like gmail/yahoo/outlook and also tested correct responsive behavior on mobile gmail app. I am using Android/Galaxy S4.
The responsive styles are not effective on yahoo mobile app. Infact, it is not reading the CSS rules from 'style'. Though, desktop chrome set to mobile views (using Inspect -> toggle device toolbar) and logging in to yahoo mail shows the email reading the responsive styles.
Question: Does yahoo mobile app not support responsiveness? Or, does it particularly need additional hacks?
Update:
I tried moving the CSS styles from head to body. It then reads the styles. But having styles in the body may not to be a good idea, gmail mobile app now ignores it.
Here is the email code that I am using:
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Sample Page</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="x-apple-disable-message-reformatting">
<style>
body {
mso-line-height-rule:exactly;
-ms-text-size-adjust:100%;
-webkit-text-size-adjust:100%}
table, td {
mso-table-lspace: 0pt;
mso-table-rspace: 0pt}
table {
border-collapse: collapse;
border-spacing: 0;margin: 0 auto}
img, a img {
border:0 none;
height: auto;
line-height: 100%;
outline: none;
-ms-interpolation-mode: bicubic}
a[x-apple-data-detectors] {
color: inherit !important;
text-decoration: none !important;
font-size: inherit !important;
font-family: inherit !important;
font-weight: inherit !important;
line-height: inherit !important}
.x-gmail-data-detectors, .x-gmail-data-detectors *, .aBn {
border-bottom: 0 !important;
cursor: default !important}
.a6S {
display:none !important;
opacity:0.01 !important}
img.g-img + div {
display:none !important}
.button-link {
text-decoration: none !important}
#media only screen and (min-device-width: 375px) and (max-device-width: 413px) {
.ios-gm-fix {
min-width: 375px !important;}
}
</style>
<style>
#email-container {
border:1px solid #CCC;
border-radius:3px;
border-collapse:separate}
.desktop-view {color:blue}
.mobile-view {color:#444}
#media only screen and (max-width: 480px) {
#email-container-wrap {
width:100% !important;
padding:0 !important}
#email-container {
border:none;border-radius:0}
.desktop-view {color:#444}
.mobile-view {color:blue}
#email-contents {
padding:15px 22px !important;
font-size:16px!important}
}
</style>
</head>
<body width="100%" bgcolor="#FFFFFF" style="margin:0 auto;padding:0;height:100%">
<center style="width=100%;background=#ffffff">
<table role="presentation" border="0" cellpadding="0" cellspacing="0" width="100%" bgcolor="#F0F0F0" class="ios-gm-fix" style="margin:0;width:100%;line-height:100%"><tbody>
<tr>
<td align="center" valign="top" width="100%" style="padding:0;margin:0;height:100%;width:100%">
<div id="email-container-wrap" style="width:600px;max-width:600px;padding:25px 0;margin:0 auto">
<table role="presentation" border="0" cellspacing="0" cellpadding="0" width="100%" bgcolor="#ffffff" id="email-container" style="background-color:#ffffff"><tbody>
<tr>
<td align="center" valign="top" width="100%" id="email-contents" style="font-family:arial,helvetica,sans-serif;font-size:13px;line-height:18px;color:#333333;padding:20px 35px">
<table role="presentation" border="0" cellspacing="0" cellpadding="0" width="100%"><tbody>
<tr>
<td align="center" valign="top" width="100%" id="email-header">
<table role="presentation" border="0" cellspacing="0" cellpadding="0" width="100%"><tbody>
<tr>
<td align="left" valign="top" width="100%"></td>
</tr>
</tbody></table>
</td>
</tr>
<tr>
<td align="center" valign="top" width="100%" id="email-body">
<table role="presentation" border="0" cellspacing="0" cellpadding="0" width="100%">
<tbody>
<tr>
<td align="left" valign="top" width="100%">
<table role="presentation" border="0" cellspacing="0" cellpadding="0" width="100%"><tbody>
<tr>
<td align="left" valign="top" width="100%" class="desktop-view" style="padding:3px 0 16px">
<span>On Desktop, there will be a border and gray background on all sides.</span>
</td>
</tr>
<tr>
<td align="left" valign="top" width="100%" class="mobile-view" style="padding:3px 0 16px">
<span>On Mobile, the border and background will not exist.</span>
</td>
</tr>
</tbody></table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td align="center" valign="top" width="100%" id="email-footer">
<table role="presentation" border="0" cellspacing="0" cellpadding="0" width="100%"><tbody>
<tr>
<td align="left" valign="top" width="100%">
</td>
</tr>
</tbody></table>
</td>
</tr>
</tbody></table>
</td>
</tr>
</tbody></table>
</div>
</td>
</tr>
</tbody></table>
</center>
</body>
</html>
On Android, Yahoo only supports <style> tags in the <body>, not in the <head>. But Gmail only supports <style> tags in the <head>, not in the <body>. C'est la vie!
Since we're only dealing with ~20 lines of code (assuming the 2nd <style> tag in your example), you might try duplicating this <style> tag so it appears in both the <head> and <body>. I don't know for certain if this will work, but it's worth testing.
Yahoo! Mail app for Android removes the first head element, causing media queries in the element to have no chance of being applied. A workaround is adding an empty head element before the original one so that the app will only remove the empty one.
Please see this article for details: Double Head trick in Yahoo Mail App for Android
I'm designing a responsive email, and I have two tables in one <td>. The second table is not top aligned in Outlook 2007 and 2010:
Both tables inside a td have a pixel width but rest of the tables inside these two tables have width=%.
I tried align left and right, as well as style="mso-table-lspace:0;mso-table-rspace:0;" but it's still not working.
I ran into the same problem. I suspect it is due to Outlook using Word to render HTML and Word is getting confused and barfing up a page break.
I recommend placing each of the tables inside cells of a parent table. Then apply your style to the cells of the parent table. Note that "float" is generally bad to use in HTML for email, but since it's in a media query means it's safe to use.
CSS:
#media only screen and (max-width: 500px) {
.floatLeftResponse{
width:100% !important;
float:left;
}
}
HTML:
<table width="800" border="0" cellpadding="0" cellspacing="0" align="center" bgcolor="#FFFFFF">
<tr>
<td width="50%" valign="top" class="floatLeftResponse">
<table width="100%" border="0" cellpadding="0" cellspacing="0" bgcolor="#ffffff">
<tr>
<td> <!---bla bla bla this is your left column content-->
</td>
</tr>
</table>
</td>
<td width="50%" valign="top" class="floatLeftResponse">
<table width="100%" border="0" cellpadding="0" cellspacing="0" bgcolor="#ffffff">
<tr>
<td> <!---bla bla bla this is your right column content-->
</td>
</tr>
</table>
</td>
</tr>
</table>
HTML email newbie here. Cannot believe how hard a simple thing can be in this arena...
I need a left-aligned, 1 pixel high, 350 pixels wide, colored line that I can put between lines of text in an HTML email.
Something like <hr align="left" style="height: 1px; width: 350px; color: #ff0000;" /> but of course that doesn't work in various versions of Outlook (I need to support 2003+) and Entourage (I need to support 2004+). (Other clients aren't giving me the same sort of grief, of course.)
Actual <hr>s are apparently untweakable in Entourage, so I've tried all sorts of things, including 1px high <p>s with a background color. Everything I try breaks somewhere.
Anyone have a bulletproof way to produce this simple line w/o resorting to an image?
There is no way around not using an image for this.
What you need to do is add a spacer image and a background color.
Im not sure how you have your email laid out, but if this was for me i would do something like this:
http://jsfiddle.net/ZsCwX/
<table cellpadding="0" cellspacing="0" width="600">
<tr>
<td height="1px" width="350px" style="background-color:#F00;"><img src="image/spacer.gif" alt="" width="350" height="1" style="display:block" border="0" /></td>
<td height="1px" width="250px"><img src="image/spacer.gif" alt="" width="250" height="1" style="display:block" border="0" /></td>
</tr>
</table>
Try this:
<tr>
<td style="padding-top:30px;padding-bottom:30px;">
<table border="0" cellpadding="0" cellspacing="0" width="350">
<tbody>
<td align="left" bgcolor="#ff0000" style="font-size: 1px; line-height:1px; color:#ff0000"></td>
</tbody>
</table>
</td>
</tr>