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%"/>
Related
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; }
}
I do support for an older, large website that was written without the DOCTYPE being set. The test example below shows the discrepancies, but is there a way to make the sizes render identically using the same style sheet?
(WHY?: Adding the DOCTYPE to this site will have to be a gradual and carefully tested implementation for the several thousand pages of code, and before I get started I'm seeing if it's possible to avoid maintaining two separate CSS sheets).
Source Code (with doctype):
<!DOCTYPE html>
<head><title>Untitled 1</title>
<style type="text/css">
input, div{
font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
}
input[type=text],input[type=password]{
border:1px #AAAAAA solid;
height:24px;
line-height:24px;
margin:0px;
padding:0px 0px 0px 3px;
}
</style>
</head>
<html>
<body>
<table cellpadding="0" cellspacing="0">
<tr>
<td>
<input type="text" value="Too big with doctype" style="width:200px" onclick="alert(this.offsetHeight)">
</td>
<td>
<div style="height:24px;width:100px;background-color:#dddddd;">100 x 24px</div>
</td>
<td>
<input type="text" value="Too small without doctype" style="width:200px;height:22px" onclick="alert(this.offsetHeight)">
</td>
</tr>
</table>
<table cellpadding="0" cellspacing="0">
<tr>
<td>
<div style="height:24px;width:200px;background-color:#dddddd;">200 x 24px</div>
</td>
<td>
<div style="height:24px;width:100px;background-color:silver;">100 x 24px</div>
</td>
<td>
<div style="height:24px;width:200px;background-color:#dddddd;">200 x 24px</div>
</td>
</tr>
</table>
</body>
</html>
So to me it appears that without the doctype, the sizes of text inputs render exactly as you specify them. But with the doctype, it adds the border and any padding to the height or width. Can I get around this without creating a separate stylesheet?
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>
There is a table inside a paragraph. The cell inside the table has extra new line. Below is relevant part of the code.
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
div.Page1773023 {}
.f31 {font-family:Times New Roman;font-size:12.00pt;font-style:normal;font-weight:normal;line-height:114%;}
.f1 {font-family:Arial;font-size:10.00pt;font-style:normal;font-weight:normal;line-height:114%;}
</style>
</head>
<body>
<div class="Page1773023" style="height:1056px;width:816px;">
<p class="normal"><pre>
<table class="normal" style="width:99.00px;border-spacing:0px;border-collapse:collapse;border:1.00px solid #000000;;">
<tr>
<td style="height:16.000px;width:96.000px;;;" >
<p class="normal"><pre>
<span class="f1" style="color:#FF0000;" >11111</span></pre></p>
</td>
</tr>
</table><br style="clear:left;"/>
</pre></p>
</div>
</body>
</html>
Now when I remove the <pre> tag from outer most <p>, the new lines is not seen. Any ideas why this is happening?
Download HTML Tidy Plugin on firefox and fix the errors...
By the way, I would try to minimize the tags you have used. Why do you need p, span, table, div, pre ?
First decide on what the layout should be and write only the code you really need.
Here is an example of how you could achieve around the same output. Make sure you have firebug or some inspect tools on your browser. It helps you make minor changes to margins and find the correct values.
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
.box {
width:104px;
height:80px;
border:1px solid;
margin-top:10px;
}
.box td {
color: red;
font-family: Arial;
font-size: 10.00pt;
font-style: normal;
font-weight: normal;
line-height: 114%;
}
</style>
</head>
<body>
<table class="box">
<tr>
<td>
11111
</td>
</tr>
</table>
</body>
</html>
The new line between <pre> and <table> is displayed as it is within a <pre> tag. This could be fixed by placing them on the same line: <pre><table ...>
I am trying to construct a simple, one-column layout. I want the top two rows to have smaller, fixed heights. The third row should expand to fill the rest of the page. Here is my current source:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<style type="text/css">
html, body
{
height:100%;
width:100%;
border:0px;
margin:0px;
}
</style>
</head>
<body>
<table style="width:100%;height:100%;" cellpadding="0" cellspacing="0">
<tr>
<td style="height:50px;background:red;">Header 1</td>
</tr>
<tr>
<td style="height:10px;background:blue;">Header 2</td>
</tr>
<tr>
<td style="background:green;">Content</td>
</tr>
</table>
</body>
</html>
This works wonderfully in Safari, Firefox, and Opera. However, it fails miserable in both IE6 and IE7. In these two browsers, the first two rows are rendered much bigger than their specified heights. Not only that, but they actually dynamically resize with the height of the browser window. It's like IE is converting the constant pixel height to a percentage height.
It is important to me that the browser window not display scrollbars unless the content of the third row is big enough to require it. Setting the height of the 3rd <td> to 100% will cause these scrollbars to always appear since the height of that row will actually be set equal to the height of the entire table (it will be 100% of its containing element).
Removing the doctype declaration and reverting to quirks mode seems to make the issue go away in IE, but I need to use HTML 4.01 transitional as that is what all of the other existing pages in this application expect.
Here is an article for you that tells you how this can be done. I just tested the example that they provided in IE 6 and it works.
It appears that you must use the height property of the table, and NOT do it via a style attribute.
How about adding position:fixed to the table? I tested it in IE8 and seemed to work.
Set the height of your last td to 100%:
<tr>
<td style="background:green;height:100%;">Content</td>
</tr>
Does this work:?
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<style type="text/css">
html, body
{
height:100%;
width:100%;
border:0px;
margin:0px;
}
</style>
</head>
<body>
<table width="100%" height="100%" cellpadding="0" cellspacing="0">
<tr>
<td height="50" style="background:red;">Header 1</td>
</tr>
<tr>
<td height="10" style="background:blue;">Header 2</td>
</tr>
<tr>
<td style="background:green;">Content</td>
</tr>
</table>
</body>
</html>
If you're using this to layout a page why not use div's instead?
This sort of works:
<style>
.outer {
position:relative;
height: 100%;
width: 500px;
background-color: blue;
}
.top {
height: 30px;
background-color: red;
width: 100%
}
.middle {
height:30px;
background-color: green;
width: 100%
}
</style>
<div class="outer">
<div class="top">
content1
</div>
<div class="middle">
content2
</div>
content3
</div>