I'm creating an email newsletter and actually testing around with various (native and web) mail clients. So far, Gmail, Outlook.com (native) iOS Mail Client are showing the email as expected. Only MacOS's native mail client cuts off the end of the mail, but the HTML code is still there (when opening the raw source in Apple Mail). Does anyone knows what how to prevent this?
So far, I tried to add empty div elements, line breaks (< br >), and an image. The last option has shown the the expected text, but cut off the image.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html lang="en">
<head><meta name="viewport" content="width=device-width,initial-scale=1" /><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Unread News | Issue #1 14.05.2019</title>
<style type="text/css">* {
font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}
a {
color: #2ba9e0;
text-decoration: none;
text-decoration-style: initial;
text-decoration-color: initial;
}
p {margin: 1em 0;}
.ExternalClass, .ExternalClass p, .ExternalClass span, .ExternalClass font, .ExternalClass td, .ExternalClass div {line-height: 100%;}
h1 {
text-align: center;
font-size: 40px;
margin-bottom: 20px;
line-height: 1.2em;
font-weight: 300;
text-transform: none;
}
h1, h2, h3, h4, h5, h6 {color: #3A3A3A !important;} /* or whatever color you want it to be */
h2 {
font-size: 30px;
margin-bottom: 20px;
line-height: 1.2em;
font-weight: 300;
text-transform: none;
}
h3 {
font-size: 20px;
margin-bottom: 20px;
line-height: 1.2em;
font-weight: 400;
text-transform: none;
}
body {
margin: 0;
padding: 0;
color: #3a3a3a;
font-weight: 400;
text-transform: none;
font-size: 17px;
line-height: 1.5;
}
table {
background: white;
max-width: 1300px;
margin-left: auto;
margin-right: auto;
line-height: 100% !important;
}
p {
margin: 0;
padding: 0;
}
.logo {
margin-top: 3vh;
width: 80%;
max-width: 400px;
}
.subject-td {
max-width: 100%;
margin-top: 10px;
}
.center__text {
text-align: center;
}
.main__content {
padding-left: 5%;
padding-right: 5%;
padding-bottom: 5%;
}
.small {
font-size: 12px;
}
.footer{
padding-top: 10px;
}
</style>
</head>
<body>
<p></p>
<table border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td class="small center__text">Wenn du Unread durch Zufall erhalten hast, kannst du dich <a href="https://unread.news?newsletters_link=e4f7fa2ee4e645fd368c7ea87ca3b13d&history_id=1">hier</a> anmelden!</td>
</tr>
<tr>
<td class="small center__text">Wenn Dir Unread gefällt, dann nimm Dir eine Sekunde Zeit und leite diese Mail an deine Freunde weiter.</td>
</tr>
<tr>
<td class="center__text"><img class="logo" src="data:image/png;base64, ... base64 goes here ... " /></td>
</tr>
<tr>
<td class="subject-td center__text">
<h1>Unread News | Issue #1 14.05.2019</h1>
</td>
</tr>
<tr>
<td class="main__content"><div class="newsletters_content"><h2>Category 1</h2>
<h3><a href="#">Lorem Ipsum Dolor Sit Amet</a></h3>
<div>Lorem Ipsum Dolor Sit Amet</div>
<h3><a href="#">Internet-Scanner: Zivilgesellschaft warnt vor zunehmender Deep Packet Inspection (7 Minuten Lesezeit)</a></h3>
<div>Lorem Ipsum Dolor Sit Amet</div>
<h2>Category 2</h2>
<h3><a href="#">Lorem Ipsum Dolor Sit Amet</a></h3>
<div>Lorem Ipsum Dolor Sit Amet</div>
<h3><a href="https://unread.news?newsletters_link=3482e6577f5b6e4782986af5f755444e&history_id=1">Internet-Scanner: Zivilgesellschaft warnt vor zunehmender Deep Packet Inspection (7 Minuten Lesezeit)</a></h3>
<div>Lorem Ipsum Dolor Sit Amet</div>
<h2>Category 3</h2>
<h3><a href="#">Lorem Ipsum Dolor Sit Amet</a></h3>
<div>Lorem Ipsum Dolor Sit Amet</div>
<h3><a href="https://unread.news?newsletters_link=3482e6577f5b6e4782986af5f755444e&history_id=1">Internet-Scanner: Zivilgesellschaft warnt vor zunehmender Deep Packet Inspection (7 Minuten Lesezeit)</a></h3>
<div>Lorem Ipsum Dolor Sit Amet</div>
<h2>Category 4</h2>
<h3><a href="#">Lorem Ipsum Dolor Sit Amet</a></h3>
<div>Lorem Ipsum Dolor Sit Amet</div>
<h3><a href="https://unread.news?newsletters_link=3482e6577f5b6e4782986af5f755444e&history_id=1">Internet-Scanner: Zivilgesellschaft warnt vor zunehmender Deep Packet Inspection (7 Minuten Lesezeit)</a></h3>
<div>Lorem Ipsum Dolor Sit Amet</div>
</div></td>
</tr>
<tr>
<td class="small footer center__text">This is emai was sent ...</td>
</tr>
<tr>
<td class="small center__text">You are receiving this mail ... <a class="newsletters_unsubscribe newsletters_link" href="#" title="Abonnement Deaktivieren" style="color:;">Abonnement Deaktivieren</a>.</td>
</tr>
<tr>
<td class="small center__text"><a class="newsletters_online newsletters_link" href="#" style="color:;">E-Mail ausdrucken</a></td>
</tr>
</tbody>
</table>
</body>
</html>
Apple Mail cuts off (does not show) the last three tags:
</tr>
<tr>
<td class="small footer center__text">This is emai was sent ...</td>
</tr>
<tr>
<td class="small center__text">You are receiving this mail ... <a class="newsletters_unsubscribe newsletters_link" href="#" title="Abonnement Deaktivieren" style="color:;">Abonnement Deaktivieren</a>.</td>
</tr>
<tr>
<td class="small center__text"><a class="newsletters_online newsletters_link" href="#" style="color:;">E-Mail ausdrucken</a></td>
</tr>
But I expect to see them.
