I have created an e-mail-signature in HTML and I am using it with the native Apple Mail-app on Mac and iPhone.
I am using Dark Mode, too, but sadly, the background of my emails turns white if I use my signature. I tested it, and it's because of the image I included in the signature.
Is there any way to prevent Apple Mail from showing the white background? I want the background to be dark (just as with plain text-emails). The option "Use dark backgrounds for messages" in the settings of Apple Mail is activated and in my HTML code I do not define a background color…
I'm on macOS Catalina 10.15.7 and have Apple Mail version 13.4.
This is the HTML code for my signature (I posted it without my real contact information here, of course). Everything is working correctly, just the background is white.
<body><br /><br /><br />
<style type="text/css">
:root {Color-scheme: light dark; supported-color-schemes:light dark;}
a {margin:0; padding:0; border:none; text-decoration:none;}
table, tr, td, a, span {font-family:"Helvetica Neue",Helvetica,Arial,sans-serif; font-size:15px;}
img {border-radius: 50%;}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="format-detection" content="telephone=no" />
<meta name="format-detection" content="address=no" />
<meta name="format-detection" content="email=no" />
<meta name="color-scheme" content="light dark" />
<meta name="supported-color-schemes" content="light dark" />
<table width="320" cellspacing="0" cellpadding="0" border-spacing="0" style="width:85px; margin:0; padding:0;">
<tr>
<td valign="top" width="80" style="width:80px; margin:0; padding:0; vertical-align:top;">
<img moz-do-not-send="true" src="URL OF IMAGE" alt="MY NAME" width="80" height="80" style="border:none; width:80px; height:80px; display:block; border-radius: 50%;">
</td>
<td width="10" style="width:10px; min-width:10px; max-width:10px; margin:0; padding:0;">
</td>
<td style="margin:0; padding:0;">
<table cellspacing="0" cellpadding="0" border-spacing="0" style="padding:0; margin:0; font-family:'Helvetica Neue',Helvetica,Arial,sans-serif; font-size:15px; mso-line-height-rule:exactly; line-height:25px; color:#b0b0b0; border-collapse:collapse; -webkit-text-size-adjust:none;">
<tr style="margin:0; padding:0;">
<td style="margin:0; padding:0; font-family:'Helvetica Neue',Helvetica,Arial,sans-serif; font-size:15px; white-space:nowrap;">
<b><span style="color:#0099cc;">MY NAME</span></b>
</td>
</tr>
<tr style="margin:0; padding:0;">
<td style="margin:0; padding:0; font-family:'Helvetica Neue',Helvetica,Arial,sans-serif; font-size:15px; white-space:nowrap;">
<span style="color:#b0b0b0">MY EMAIL ADDRESS</span>
</td>
</tr>
<tr style="margin:0; padding:0;">
<td style="margin:0; padding:0; font-family:'Helvetica Neue',Helvetica,Arial,sans-serif; font-size:15px; white-space:nowrap;">
<span style="color:#b0b0b0">domain.com · LinkedIn</span>
</td>
</tr>
</table>
</td>
</tr>
</table><br />
</body>
Here's an screenshot of the email signature (black boxes for privacy reasons). The background of the email turns white as soon as I send the email or save it as a draft. If I edit the draft later, the background stays white.
Thank you for your answer!
I had the same problem (or at least it sounds almost identical) and I think just worked around it. Are you letting Gmail resize the images? Like, are you selecting "small", "medium", or "large" size?
The solution for me was to upload the images at the exact resolution I needed, and force Gmail to show them "original" upload size. Now the background is showing up black again in dark mode, with no extra html, css, etc required. It seems to be a bug/issue between Apple's mail apps and Gmail with image resizing.
I was pulling my hair out over this all night because it was definitely triggered by adding an image, and I knew others had it working. I searched and found nothing but your thread. But I finally got it to work, I hope this solves your issue too!
on
MacOS Big Sur 11.3.1
Apple Mail Version 14.0 (3654.80.0.2.43)
everything works fine, so maybe it's an old version problem?
Apple Mail will allow dark mode unless you have an image, in which case you need to carefully set it up to retain dark mode capability. If you haven't set it up right, it will turn off dark mode - hence the white background.
It looks like you have the <meta> parts setup okay: however, you could try putting it in the <head> section above the <body>.
But it looks like you're missing what you'd like the background colour to be.
So, put a class on the body: <body class="darkmode">, and add some styles to that class:
#media (prefers-color-scheme: dark) {
.darkmode { background-color: #111111; }
.darkmode h1, .darkmode p, .darkmode span, .darkmode a { color: #ffffff; }
}
Related
My html email template works well with gmail except windows 10 mail. Some images look giant on my windows 10 mail but normal size on my gmail. I have check out this post and its solution, but it is not working. Below is my whole html code
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" xmlns="http://www.w3.org/1999/html">
<head>
<title th:remove="all"></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<style>
#container {
text-align: center;
max-width: 900px;
width:80%;
margin-left:10%;
margin-right:10%;
}
#salutation {
color: #e45042;
font-style: bold;
font-size:14px;
margin-top:5%;
}
#title {
font-style: bold;
font-size:17px;
color: #2869af;
}
#qrText {
margin-top:5%;
font-size: 11px;
font-style:italic;
}
#bodytext {
font-size:14px;
}
#footer {
text-align: center;
font-size: 11px;
width:70%;
margin-left:15%;
margin-top:5%;
}
</style>
</head>
<body>
<div id="container">
<div>
<img th:src="#{${environmentUrl+'/dist/img/email/some_img.png'}}" style="width:100%;"/>
</div>
<div id="salutation">
<p>Hi <span th:text="${name}"></span>,</p>
</div>
<div id="bodytext">
<p>
<b>SOME TEXT</b>
</p>
</div>
<div>
<table style="width:100%;">
<tr>
<td style="width:23%"><img th:src="#{${environmentUrl+'/dist/img/email/some_img.png'}}" style="width:100%"/></td>
<td style="vertical-align:bottom;width:31%"><img th:src="#{${environmentUrl+'/dist/img/email/some_img.png'}}" width="100%"/></td>
<td style="width:23%"><img th:src="#{${environmentUrl+'/dist/img/email/some_img.png'}}" style="width:100%"/></td>
<td style="width:23%"><img th:src="#{${environmentUrl+'/dist/img/email/some_img.png'}}" style="width:100%"/></td>
</tr>
<tr>
<td><b>SOME TEXT</b></td>
<td><b>SOME TEXT</b></td>
<td><b>SOME TEXT</b></td>
<td><b>SOME TEXT</b></td>
</tr>
</table>
</div>
</div>
</body>
</html>
This template works well in gamil, everything down to the size and align of the images are correct, it is just not working in windows 10 mail.
What I have tried:
changed 100% -> 100px
changed 100% -> 100
Actual result: nothing changes
Expected result: images and align to be working in windows 10 mail.
Windows 10 Mail uses Word's rendering engine, just like the Outlooks on Windows. Word's rendering engine doesn’t understand the style attribute on <img> elements. So what you need to do is define a width attribute with the expected value for Outlook, and have a more flexible width in an inline style for other email clients.
Also please note that the Outlooks (and Windows 10 Mail) don’t react properly to percentage widths. Setting a width="100%" would make the image "100% the width of the file physical width", and not "100% of its parent element" as you'd expect in CSS. So don't use percentages for the width attribute.
In your case, it would end up looking something like the following:
<img th:src="#{${environmentUrl+'/dist/img/email/some_img.png'}}" width="600" style="width:100%"/>
I have tried EVERYTHING I could find. The famous 1px vertical gap on the right side of images still doesn't seem to have a solid fix! Please someone help to to resolve this. I literally have no hair left after pulling them out one by one!
Plesae can someone help?
<style type="text/css">
/* /\/\/\/\/\/\/\/\/ RESET STYLES /\/\/\/\/\/\/\/\/ */
body{
margin:0;
padding:0;
}
img{
border:0 none;
height:auto;
line-height:100%;
outline:none;
text-decoration:none;
}
a img{
border:0 none;
}
.imageFix{
display:block;
}
table, tr, td{
border-collapse:collapse;
}
#bodyTable{
height:100% !important;
margin:0;
padding:0;
width:799px !important;
max-width: 799px !important;
}
</style>
<table bgcolor="red" width="799" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td width="176" height="115">
<img src="https://www.htref.co.za/signatures/images/img01-01.png" class="imageFix" alt="logo" width="176" height="115">
</td>
<td width="623" height="115">
<img src="https://www.htref.co.za/signatures/images/img01.png" class="imageFix" alt="logo" width="623" height="115">
</td>
</tr>
</tbody>
</table>
Example show of 1px vertical gap on the right side of the image
bgcolor="red"
Is it necessary? Without this the gap disappeared.
On my computer, no border appear !
Put a lightgrey background-color to body, anything at the right of the image.
Why using a table when you can do this with Flexbox, for example ?
Have you tried not put any white space before or after your images? I kind of remember that whitespace in your source code HTML is collapsed but still rendered as a space character in the output. So no space, tab or newline character before or after your img tag.
But if this is all you signature has, you don't need a table (which is a very 90s way to align pictures). You could use directly your imgs (but still without whitespace before or after your tags):
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
body{
width: 799px
}
</style>
</head>
<body><img src="https://www.htref.co.za/signatures/images/img01-01.png"
alt="logo" width="176" height="115"
/><img src="https://www.htref.co.za/signatures/images/img01.png"
alt="logo" width="623" height="115"
/></body>
</html>
I need to create an email template. My email template MUST work in GMail and the mail app on iPhone. I had the template working properly in the mail app on iPhone with Zurb Ink. However, Gmail doesn't support the style tag in HTML emails. For that reason, I removed that framework and started from scratch. Now, the email template works fine in GMail, but the text doesn't scale up in the mail app on the iPhone. The text is all scrunched together. Currently, my HTML looks like this:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" style="height:100%;" height="100%">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width" />
<title>Welcome.</title>
</head>
<body style="background-color:silver; color: #2D2D2D; font-family: 'Helvetica Neue Light', 'HelveticaNeue-Light', 'Helvetica Neue', Arial; font-weight: normal; padding:0; margin: 0; text-align: left; line-height: 1.3; width:100%; height:100%; min-width: 100%; -webkit-text-size-adjust:100%; -ms-text-size-adjust:100%; ">
<table style="border:solid 0px #fff; width:100%;">
<tr>
<td align="center" valign="top" style="width: 100%;">
<center>
<table style="width:600px; border:solid 0px #fff; border-collapse: collapse;">
<tr>
<td align="right" style="text-align: right; vertical-align: middle;">
<span style="color: #898989; font-size:12px;">Trouble viewing email? view it in your browser</span>
</td>
</tr>
<tr>
<td style="height:77px; vertical-align: middle; padding-left:35px; background-color:#fff; border-left: solid 1px #D6D6D6; border-right:solid 1px #D6D6D6;">
<img alt="Welcome." src="http://dummyimage.com/126x36/d907d9/fff.png&text=Hello" height="36" width="126" />
</td>
</tr>
<tr>
<td>
<img alt="Welcome." width="600" height="250" src="http://dummyimage.com/600x250/d907d9/fff.png&text=Welcome+to+the+new" style="display:block;" />
</td>
</tr>
<tr>
<td style="padding:0px 32px 36px 32px; background-color:#fff; border-top:solid 0px #fff;">
<div style="color:#92cc0a; padding-top:29px; font-size:36px; font-weight:lighter;">Welcome.</div>
<div style="padding-top:15px; font-size:14px; color:#363636;">
Thanks for downloading our app. Prepare to experience a new world of imagination. Check us out on <a style="text-decoration: none;" href="https://www.facebook.com/myApp" target="_blank">Facebook</a>, <a style="text-decoration: none;" href="https://twitter.com/myApp" target="_blank">Twitter</a>, and <a style="text-decoration: none;" href="https://plus.google.com/+myApp/posts" target="_blank">Google +</a> for the latest details. Oh, and tell your friends!
</div>
<br />
Thank You
</td>
</tr>
</table>
</center>
</td>
</tr>
</table>
</body>
Why isn't the text scaling properly on the mail app on the iPhone. I've included the viewport details. I've included the webkit-text-adjust stuff. Can someone please help me out?
Thank you so much!
You can't actually rely on styles getting inherited, which means you will have to apply every single style to every single element all the time...
This means the font-size on the div won't actually have any effect on the text within it.
For a quick fix I suggest wrapping the text in a paragraph and applying the needed styles to it.
<div style="padding-top:15px; font-size:12px; color:#363636;">
<p style="font-family: 'Helvetica Neue Light', 'HelveticaNeue-Light', 'Helvetica Neue', Arial; font-weight: normal; font-size: 26px; line-height: 36px;">Thanks for downloading our app. Prepare to experience a new world of imagination. Check us out on <a style="text-decoration: none;" href="https://www.facebook.com/myApp" target="_blank">Facebook</a>, <a style="text-decoration: none;" href="https://twitter.com/myApp" target="_blank">Twitter</a>, and <a style="text-decoration: none;" href="https://plus.google.com/+myApp/posts" target="_blank">Google +</a> for the latest details. Oh, and tell your friends!</p>
</div>
Generally I would advise writing the styles in a style tag and then using a service like http://inliner.cm when you're finished and ready to inline the styles for gmail support. That way you won't have to copy&paste the font-family and default styles everywhere yourself
Using the suggested method of styling your html email in a <style> tag in the head and then using an inliner, you can actually go back to using the ink framework too and still have it work in gmail.
Add this to your <style> tag:
body{width:100% !important; -webkit-text-size-adjust:100%; -ms-text-size-adjust:100%; margin:0; padding:0;}
The width/padding/margin/ms-text is is obviously unrelated, but should also be there.
Also, iPhone uses webkit to render, so you should be able to override the styling manually by adding a class in the <style> tag. Gmail will ignore this of course.
Try this:
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
If I remember correctly, iPhones auto scale email content unless otherwise told not to by adding initial-scale=1.0
Hope that helps. I know very well how frustrating email development can be.
Hey mate I didnt see your code but recently I fixed my newsletter by adding
-webkit-text-size-adjust:none;
in your td style
I had the same problem.
Try it might be the issue.
I had the same problem this week and tried out a lot of code. The only solution that worked was adding this line to your <style>:
<style>
body{width:100% !important; -webkit-text-size-adjust:100%; -ms-text-size-adjust:100%; margin:0; padding:0;}
</style>
I am trying to create a newsletter using tags to line up the data. I have created the following code:
<div style="width:410px; height:207px; background-color:#ffffff; float:left;">
<p style="text-align:left; font-family:Arial, sans-serif; size:15px; line-height:20px; color:#000000; padding:0 10px 0 0;">
<a href="hyperlink">
<img align="left" src="image.png" width="190" height="207" style="width:190px; height:207px; border:none; padding:-10px 0 0 0;">
</a>
text
</p>
</div>
However, when I view this design in Outlook mail, the second doesn't fall below the first and crowds into the first along with the third instead.
Any thoughts on what I can try to do? Thanks!
OB
You can add the following CSS code to your div element.
clear: both;
Here's are JSFiddle's with and without clear: both;
Actually, ignore that. Removing float: left; from all div elements will sort the trick - JSFiddle
Add br tags where you want it to start on new line. <br /> , you can even do <br /><br /> as many times as you want to give it extra space.
<div style="width:410px; height:207px; background-color:#ffffff; float:left;">
<p style="text-align:left; font-family:Arial, sans-serif; size:15px; line-height:20px; color:#000000; padding:0 10px 0 0;">
<a href="hyperlink"><br />
<img align="left" src="image.png" width="190" height="207" style="width:190px; height:207px; border:none; padding:-10px 0 0 0;"></a><br />
text</p>
</div>
Divs for emails is a baaaad choice, email clients usually ignore some css properties to protect it's users, you should use tables (yes, it's sad but true) and do simple designs for emails. I guess float is being ignored by the email client.
just remove float:left; from div style
Email clients do seem to prefer tables to divs, but divs aren't necessarily 'evil' in emails. You just can't expect the HTML rendering engine of Outlook to behave like Chrome or FireFox. So...code for the least common denom, right?
<table cellpadding="0" cellspacing="0">
<tr>
<td style="width:410px; height:207px; padding:0; margin:0; background-color:#efefef; float:left; text-align:left; font-family:Arial, sans-serif; size:15px; line-height:20px; color:#000000">
<img align="left" src="http://lorempixel.com/output/abstract-h-g-190-207-10.jpg" width="190" height="207" style="width:190px; height:207px; border:none; padding:-10px 0 0 0;"/>text
</td>
</tr>
</table>
Your code was probably close to working. Think of the <td> as your <p> element, and the <table> as the <div>. In some ways, I think email markup is easier (lots of limitations, and fewer options -- forces one to keep it simple).
Since both your links were going to the same place, I wrapped your <img> inside the <a>, which is legit.
This ought to get you close, I think.
http://jsfiddle.net/KhE4B/
I have a rich HTML email. I was wondering how, in Outlook 2010 and 2007, you get the table in the layout to sit flush with the edge of the browser?
Have a look at this pic:
The pink is the background color of the body tag and the grey is the bg of the table. They both have 0 everything (margin, paddting ect). But there is still some space. The pink should not be visible.
Does anyone know how to get rid of this space on the body?
Also here’s some CSS for the start of the email:
<html>
<head>
<style type="text/css">
html, body{ width:100%; }
body{ background-color:#ff00ff; }
</style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Test</title>
</head>
<body topmargin="0" style="margin:0; padding:0; width:100%; background-color:#ff00ff;" >
<table topmargin="0" align="center" cellpadding="0" cellspacing="0" width="100%" style="border-collapse: collapse;border-spacing: 0;border: 0; margin:0; padding:0; background-color:#eee;" >
Cheers!
Outlook 2007/2010 adds 15px top/bottom and 10px left/right body padding to all html emails. You can't get rid of it.
Here's a trick to fake full backgrounds: http://www.campaignmonitor.com/forums/viewtopic.php?pid=17048
Outlook uses the broken Microsoft Word HTML engine and is not based on any reasonable resemblance to a browser.
If you have Word, you can at least open your email as html and see how it renders it without having to go through the whole mail cycle.
Outlook really in the bane of any email marketer. It is an absolute pile of crap and fails to support even the most basic CSS expectations.
I'd have to have many frank and disappointing discussions with graphic designers over the limitations of email as a platform due to Outlook. Microsoft has seriously made a step backwards in using the Word engine for Outlook.
Stange that the <body style="padding:0px; margin:0px;"> doesn't work.
I find that with outlook 2007/2010 that if you have padding-top applied to a column but not the other columns in the same row Outlook will apply that padding to all the columns for some reason. Are you able to paste more of the email code so we can have a look that its not something else causing the issue.
Try using margintop="0" marginleft="0" marginright="0" on the <body> tag (updated to full example):
<html>
<head>
<title>Title Tag</title>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
</head>
<body margintop="0" marginleft="0" marginright="0" bgcolor="#ff00ff">
<table width="100%" cellmargin="0" cellspacing="0" border="0"><tr><td width="100%">
<table width="600" cellpadding="0" cellspacing="0" bgcolor="#ffffff"><tr><td width="600">
</td></tr></table>
</td></tr></table>
</body>
</html>
You will need to set the width of 600 to whatever the width of your email is.
There are cross-email client bugs with body tags, and padding/margin values in CSS.
NB - this is only necessary, and only works, on the body tag.
With pure CSS (I'm not sure the makers of IE like reading that), you can use !important to force the margin and padding of the <table> and the <body> to be 0px:
html, body
{
margin: 0px !important;
padding: 0px !important;
}
table
{
margin: 0px !important;
}
Maybe it'll work, but maybe not. I'm not sure how Outlook handles CSS...
As outlook doesn't support margin -reference. My work around to this issue was as below. Hope it will help someone.
<table cellpadding="0" cellspacing="0" border="0" style="width:100% !important; margin:0; padding:0; background-color:#ffffff; line-height: 100% !important; border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt;">
<!-- SECTION:TOP -->
<tr style="margin:0; padding:0; border:0;">
<td>
<img src="/assets/images/10049-2013-Email_03.gif" alt="" height="104" width="145" border="0" style="display:block;" />
</td>
<td>
<img src="/assets/images/10049-2013-Email_04.gif" alt="" height="104" width="261" border="0" style="display:block;" />
</td>
<td>
<img src="/assets/images/10049-2013-Email_05.gif" alt="" height="104" width="144" border="0"style="display:block;" />
</td>
</tr>
<tr style="margin:0; padding:0; border:0;">
<td>
<img src="/assets/images/10049-2013-Email_06.gif" alt="" height="104" width="145" border="0" style="display:block;" />
</td>
<td>
<img src="/assets/images/10049-2013-Email_07.gif" alt="" height="104" width="261" border="0" style="display:block;" />
</td>
<td>
<img src="/assets/images/10049-2013-Email_08.gif" alt="" height="104" width="144" border="0"style="display:block;" />
</td>
</tr>
I know this is a bit late, but I came across this post and thought you might be able to test this method as well.
http://theboywhocriedfox.com/code-snippets/fixing-the-forced-body-padding-in-outlook-2007-2010-and-2013/
"Fixing the forced body padding in Outlook 2007, 2010 and 2013
Testing a html email recently with a high percentage of recipients
likely to be users of Microsoft Outlook I came across a bug where it’s
not possible to overwrite the forced body padding in versions of
outlook (which use MS Words rendering engine 2007, 2010, 2013).
This was breaking the design and causing unwanted whitespace on the
left margin of the email. The offending versions of outlook support
margin (including negative margin) but only support inline styles. So
the fix/hack is to wrap the entire email in a wrapper table and apply
negative margin to just the problematic email clients – using html ‘if
statements’ as below."
<!--[if !gte mso 9]><!---->
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td>
<!--<![endif]-->
<!--[if gte mso 9]>
<table width="100%" border="0" cellspacing="0" cellpadding="0" style="margin-left:-10px;">
<tr>
<td>
<![endif]-->
<!-- YOUR CONTENT HERE -->
</td>
</tr>
</table>