Technische Frage: Problem bei der Darstellung von HTML-Emails im Onlineportal
9 years ago
Sehr geehrte Damen und Herren vom Support,
ich hätte an dieser Stelle eine rein technische Fragestellung an Sie. Es geht dabei um folgendes:
Im Rahmen meiner Firmentätigkeit verschicke ich täglich mehrere hundert Mails, wovon ein signifikanter Anteil auch an Kunden mit T-Online Konto geht. In letzter Zeit häufen sich jedoch die Beschwerden darüber, dass die Mails im Onlineportal von T-Online nicht lesbar sind. Dieses Aufkommen von Beschwerden erfolgte erst nach der kürzlichen Umstellung auf HTML E-Mails. Die Problematik die sich hierbei nun ergibt ist die, dass die selben Mails in nahezu allen Clients vollkommen korrekt angezeigt werden, darunter Thunderbird, Outlook (in allen Versionen) und Apple Mail (aber auch weitere wurden erfolgreich getestet). Die Ausnahme bildet hierbei das Onlineportal von T-Online.
Hier ist der Code einer der Mails:
<!DOCTYPE html>
<html style="margin: 0; padding: 0; font-family: Helvetica, Arial, sans-serif;">
<head style="margin: 0; padding: 0; font-family: Helvetica, Arial, sans-serif;">
<meta name="viewport" content="width=device-width" style="margin: 0; padding: 0; font-family: Helvetica, Arial, sans-serif;">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" style="margin: 0; padding: 0; font-family: Helvetica, Arial, sans-serif;">
<title style="margin: 0; padding: 0; font-family: Helvetica, Arial, sans-serif;">Initiativbewerbung für die Mitarbeit in Ihrer Einrichtung</title>
<style type="text/css">@media screen and (max-width: 600px) {
a[class="btn"] {
display:block!important;
margin-bottom:10px!important;
background-image:none!important;
margin-right:0!important;
}
table.column {
width: 100% !important;
}
table.main {
width: 100% !important;
}
table.main-half-left {
width: 100% !important;
}
table.main-half-right {
width: 100% !important;
}
div.outer-wrap {
width: 100% !important;
}
table.side {
width: 100% !important;
}
td.btn-wrapper-small {
width: 100% !important;
}
}</style>
</head>
<body style="margin: 0px; padding: 0px; font-family: Arial, Helvetica, sans-serif; -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: none; width: 100%!important; height: 100%; line-height: 120%; font-size: 12px; color: #4B4234; background: rgb(203,203,203);">
<!--[if mso 12 | mso 14 | mso 15 | mso 16]>
<div width="600" style="margin: 0 auto !important;width: 600px;display: block;">
<![endif]-->
<!--[if !mso] -->
<div class="outer-wrap" style="margin: 0 auto !important; padding: 0; font-family: Helvetica, Arial, sans-serif; max-width: 600px !important; width: 600px; display: block;">
<!-- <![endif]-->
<!-- HEADER -->
<table class="head-wrap" style="margin: 0 auto; padding: 0; font-family: Helvetica, Arial, sans-serif; border-spacing: 0; border-collapse: collapse; width: 100%; max-width: 600px;"><tr style="margin: 0; padding: 0; font-family: Helvetica, Arial, sans-serif;">
<td style="margin: 0; padding: 0; font-family: Helvetica, Arial, sans-serif;"></td>
<!--[if mso 12 | mso 14 | mso 15 | mso 16]>
<td width="600" style="width: 600px;margin:0 auto;clear:both;">
<![endif]-->
<!--[if !mso] -->
<td class="container" style="margin: 0 auto; padding: 0; font-family: Helvetica, Arial, sans-serif; display: block; width: 100%; max-width: 600px; clear: both;">
<!-- <![endif]-->
<!--[if mso 12 | mso 14 | mso 15 | mso 16]>
<div>
<![endif]-->
<!--[if !mso] -->
<div class="content" id="head-header" style="margin: 0 auto; padding: 0; font-family: Helvetica, Arial, sans-serif; max-width: 600px; display: block; margin-top: 0;">
<!-- <![endif]-->
<table id="head-table" style="margin: 0; padding: 0; font-family: Helvetica, Arial, sans-serif; border-spacing: 0; border-collapse: collapse; max-width: 600px; width: 100%; background: #FFFFFF; padding-top: 0; margin-top: 0;"><tr style="margin: 0; padding: 0; font-family: Helvetica, Arial, sans-serif;">
<!--[if mso 12 | mso 14 | mso 15 | mso 16]>
<td><img style="display: block;" src="http://www.xyz.de/new_mail_logo_scaled.png" alt="XYZ Logo" /></td>
<![endif]--><!--[if !mso] --><td style="margin: 0; padding: 0; font-family: Helvetica, Arial, sans-serif;"><img id="header-logo" style="display: block; margin: 0; padding: 0; font-family: Helvetica, Arial, sans-serif; max-width: 300px; margin-bottom: 5px; height: auto; margin-top: -10px;" src="http://www.xyz.de/wia_logo_new_claim.png" alt="XYZ Logo"></td>
<!-- <![endif]-->
</tr></table>
<!--[if mso 12 | mso 14 | mso 15 | mso 16]>
</div>
<![endif]--><!--[if !mso] -->
</div>
<!-- <![endif]-->
<!--[if mso 12 | mso 14 | mso 15 | mso 16]>
</td>
<![endif]-->
<!--[if !mso] -->
</td>
<!-- <![endif]-->
<td style="margin: 0; padding: 0; font-family: Helvetica, Arial, sans-serif;"></td>
</tr></table>
<!-- HEADER --><!-- FOOTER --><table class="footer-wrap" style="margin: 0; padding: 0; font-family: Helvetica, Arial, sans-serif; border-spacing: 0; border-collapse: collapse; margin-top: 0; width: 100%; max-width: 600px;"><tr style="margin: 0; padding: 0; font-family: Helvetica, Arial, sans-serif;">
<td style="margin: 0; padding: 0; font-family: Helvetica, Arial, sans-serif;"></td>
<!--[if mso 12 | mso 14 | mso 15 | mso 16]>
<td width="600" style="width: 600px;margin:0 auto;clear:both;">
<![endif]-->
<!-- content -->
<!--[if mso 12 | mso 14 | mso 15 | mso 16]>
<div>
<![endif]-->
<!--[if !mso] -->
<div class="content" id="footer-foot" style="margin: 0; padding: 0; font-family: Helvetica, Arial, sans-serif; max-width: 600px; display: block;">
<!-- <![endif]-->
<!-- social & contact -->
<table class="social" style="margin: 0; padding: 0; font-family: Helvetica, Arial, sans-serif; border-spacing: 0; border-collapse: collapse; padding-top: 20px; background-color: #FFFFFF; max-width: 600px; width: 100%;"><tr style="margin: 0; padding: 0; font-family: Helvetica, Arial, sans-serif;">
<td class="socialdata" align="center" style="margin: 0; padding: 0; font-family: Arial,sans-serif; color: #80827f; font-size: 12px; text-align: center;">
<!--[if mso 12 | mso 14 | mso 15 | mso 16]>
<hr style="height: 2px;background: #F4F4F4;border: 0;margin-top: 20px;margin-bottom:30px;" align="center" width="95%">
<![endif]-->
<!--[if !mso] -->
<hr class="line" id="socialline" align="center" style="margin: 0; padding: 0; font-family: Helvetica, Arial, sans-serif; max-width: 580px; height: 2px; background: #F4F4F4; margin-left: 15px; margin-right: 15px; border: 0; margin-bottom: 30px; margin-top: 20px;">
<!-- <![endif]--><p class="" style="margin: 0; padding: 0; font-family: Helvetica, Arial, sans-serif;">
<strong style="margin: 0; padding: 0; font-family: Helvetica, Arial, sans-serif;">Folgen Sie uns auf:</strong>
</p>
<div class="footer_image_wrapper" style="margin: 0; padding: 0; font-family: Helvetica, Arial, sans-serif;">
<a href="http://www.facebook.com/" title="Facebook" target="_blank" style="margin: 0; padding: 0; font-family: Helvetica, Arial, sans-serif; color: #FF6221; text-decoration: none;">
<img class="footer_image" src="http://www.xyz.de/facebook-png-mailing.png" alt="Facebook" style="margin: 0; padding: 0; font-family: Helvetica, Arial, sans-serif; max-width: 100%;"></a>
<a href="https://plus.google.com/" title="Google+" target="_blank" style="margin: 0; padding: 0; font-family: Helvetica, Arial, sans-serif; color: #FF6221; text-decoration: none;">
<img class="footer_image" src="http://www.xyz.de/google-png-mailing.png" alt="Google+" style="margin: 0; padding: 0; font-family: Helvetica, Arial, sans-serif; max-width: 100%;"></a>
<a href="http://twitter.com" title="Twitter" target="_blank" style="margin: 0; padding: 0; font-family: Helvetica, Arial, sans-serif; color: #FF6221; text-decoration: none;">
<img class="footer_image" src="http://www.xyz.de/twitter-png-mailing.png" alt="Twitter" style="margin: 0; padding: 0; font-family: Helvetica, Arial, sans-serif; max-width: 100%;"></a>
<a href="https://www.xing.com/" title="Xing" target="_blank" style="margin: 0; padding: 0; font-family: Helvetica, Arial, sans-serif; color: #FF6221; text-decoration: none;">
<img class="footer_image" src="http://www.xyz.de/xing-png-mailing.png" alt="Xing" style="margin: 0; padding: 0; font-family: Helvetica, Arial, sans-serif; max-width: 100%;"></a>
</div>
<br style="margin: 0; padding: 0; font-family: Helvetica, Arial, sans-serif;"><font class="impressum" style="margin: 0; padding: 0; font-family: Arial, sans-serif; color: #505050; line-height: 150%; font-size: 12px; text-align: left;">
<font class="impressum_head" style="margin: 0; padding: 0; font-family: Helvetica, Arial, sans-serif;">HABEN SIE FRAGEN?</font><br style="margin: 0; padding: 0; font-family: Helvetica, Arial, sans-serif;">
Schreiben Sie eine Email an unseren Kundenservice: <a href="mailto:kundenservice@xyz.de" style="margin: 0; padding: 0; font-family: Helvetica, Arial, sans-serif; color: #FF6221; text-decoration: none;">kundenservice@xyz.de</a><br style="margin: 0; padding: 0; font-family: Helvetica, Arial, sans-serif;">
oder rufen Sie uns an unter <font class="impressum_phone" style="margin: 0; padding: 0; font-family: Helvetica, Arial, sans-serif;">0123456</font>
</font>
<br style="margin: 0; padding: 0; font-family: Helvetica, Arial, sans-serif;"><br style="margin: 0; padding: 0; font-family: Helvetica, Arial, sans-serif;"><font class="impressum" style="margin: 0; padding: 0; font-family: Arial, sans-serif; color: #505050; line-height: 150%; font-size: 12px; text-align: left;">
XYZ GmbH, Geschäftsführung: Testperson<br style="margin: 0; padding: 0; font-family: Helvetica, Arial, sans-serif;">
Adressdummy
</font>
<br style="margin: 0; padding: 0; font-family: Helvetica, Arial, sans-serif;"><br style="margin: 0; padding: 0; font-family: Helvetica, Arial, sans-serif;">
</td>
</tr></table>
<!-- /social & contact --><!--[if mso 12 | mso 14 | mso 15 | mso 16]>
</div>
<![endif]--><!--[if !mso] -->
</div>
<!-- <![endif]--><!-- /content -->
<!--[if mso 12 | mso 14 | mso 15 | mso 16]>
</td>
<![endif]-->
<td style="margin: 0; padding: 0; font-family: Helvetica, Arial, sans-serif;"></td>
</tr></table>
<!-- /FOOTER --><!--[if mso 12 | mso 14 | mso 15 | mso 16]>
</div>
<![endif]--><!--[if !mso] -->
</div>
<!-- <![endif]-->
</body>
</html>Den eigentlichen Inhalt habe ich weggelassen. So sollte jetzt eigentlich noch der Header und der Footer der Mail angezeigt werden. Tatsächlich wird jedoch nur noch der Header angezeigt, sowie zwei horizontale Linien (bedingt durch die <hr>-Tags.
Ich hoffe Sie können mir bei dieser Problemstellung helfen. Für Rückfragen stehe ich Ihnen gerne zur Verfügung.
Mit freundlichen Grüßen,
Alexander Keller
Note:
This post has been closed.
Note:
This post is no longer open for answers or comments and is no longer visible to community members.
1011
0
This could help you too
Solved
in
770
0
1
Solved
in
3249
0
5
Solved
285
0
4
5 years ago
in
283
0
2
