nicht angemeldet
Darstellungsprobleme bei HTML-Newsletter
Hallo Ihr Lieben,
ich habe heute ich einen Newsletter gebaut, welcher im unteren Teil aus aufeinanderfolgenden Bilder besteht.
In Google Gmail (unabhängig vom Betriebssystem), in Hotmail und in Yahoo werden die Bilder nun dummerweise mit weißen Lücken angezeigt.In allen anderen großen Mail-Clients ist hingegen alles in bester Ordnung.
Kann mir vielleicht jemand den entscheidenden Tipp geben, wie ich das Problem beheben kann?
Besten Dank
Eure Sabine
-
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Mailing_Frozen_Joghurt_RZ</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
<!--
body,td {font-family: Arial, Helvetica, sans-serif;color: #919292;font-size:12px;}
a{color: #919292;}
img a{border:0;}
-->
</style>
</head>
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0"><img src="http://gallery.mailchimp.com/520ccba69448954d8a2728625/images/spacer2.png" width="116" height="42" align="absmiddle">Dieser Newsletter wird nicht korrekt angezeigt, dann klicken Sie bitte <a href="#">hier</a>
<table id="Tabelle_01" width="700" border="0" cellpadding="0" cellspacing="0">
<tr>
<td colspan="5">
<img src="http://gallery.mailchimp.com/520ccba69448954d8a2728625/images/top.png" width="700" height="78" alt=""></td>
</tr>
<tr>
<td colspan="4">
<img src="http://gallery.mailchimp.com/520ccba69448954d8a2728625/images/top2.1.png" width="700" height="117" alt=""></td>
</tr>
<tr>
<td colspan="4">
<img src="http://gallery.mailchimp.com/520ccba69448954d8a2728625/images/eiskaltprofitieren.png" width="700" height="50" alt=""></td>
</tr>
<tr>
<td width="109" height="32" align="left">
<img src="http://gallery.mailchimp.com/520ccba69448954d8a2728625/images/links1.png" width="109" height="32" alt=""></td>
<td height="32" colspan="2" valign="middle">
<p align="left" style="font-family:Verdana, Arial, Helvetica, sans-serif; font-size:13px; color:#666666; line-height:14px; margin:0;"><strong><img src="http://gallery.mailchimp.com/520ccba69448954d8a2728625/images/Abstandhalter.gif" width="7" height="27" align="absmiddle">*|MERGE4|* *|MERGE6|* *|MERGE1|* *|MERGE2|*,</strong></p></td>
<td height="32" align="left">
<img src="http://gallery.mailchimp.com/520ccba69448954d8a2728625/images/rechts1.png" width="112" height="32" alt=""></td>
</tr>
<tr>
<td colspan="4"><img src="http://gallery.mailchimp.com/520ccba69448954d8a2728625/images/text1.png" width="700" height="128" alt=""></td>
</tr>
<tr>
<td colspan="4">
<img src="http://gallery.mailchimp.com/520ccba69448954d8a2728625/images/text2.png" width="700" height="145" alt=""></td>
</tr>
<tr>
<td colspan="4">
<img src="http://gallery.mailchimp.com/520ccba69448954d8a2728625/images/links2.png" width="700" height="59" alt=""></td>
</tr>
<tr>
<td colspan="4">
<img src="http://gallery.mailchimp.com/520ccba69448954d8a2728625/images/bottom.png" width="700" height="127" alt=""></td>
</tr>
<tr>
<td>
<img src="http://gallery.mailchimp.com/520ccba69448954d8a2728625/images/links3.png" width="109" height="146" alt=""></td>
<td>
<img src="http://gallery.mailchimp.com/520ccba69448954d8a2728625/images/impressum.png" width="425" height="146" alt=""></td>
<td colspan="2">
<img src="http://gallery.mailchimp.com/520ccba69448954d8a2728625/images/mailing2_14.png" width="166" height="146" alt=""></td>
</tr>
<tr>
<td>
<img src="http://gallery.mailchimp.com/520ccba69448954d8a2728625/images/Abstandhalter.gif" width="109" height="1" alt=""></td>
<td>
<img src="http://gallery.mailchimp.com/520ccba69448954d8a2728625/images/Abstandhalter.gif" width="425" height="1" alt=""></td>
<td>
<img src="http://gallery.mailchimp.com/520ccba69448954d8a2728625/images/Abstandhalter.gif" width="54" height="1" alt=""></td>
<td>
<img src="http://gallery.mailchimp.com/520ccba69448954d8a2728625/images/Abstandhalter.gif" width="112" height="1" alt=""></td>
</tr>
</table><center>
<br>
<br>
<br>
<br>
<br>
<br>
<table border="0" cellpadding="20" cellspacing="0" width="100%" style="background:#EEEEEE !important; border-top:1px solid #DDDDDD; clear:both;" id="canspamBarWrapper">
<tr>
<td align="center" valign="top" style="padding-bottom:0;">
<table border="0" cellpadding="0" cellspacing="0" width="600" id="canspamBar">
<tr>
<td align="left" valign="top" style="color:#505050 !important;font-family:Verdana,Arial,Sans !important;font-size:11px !important;font-weight:normal !important;font-style:normal !important;text-decoration:none !important;vertical-align:top !important;text-align:left !important;">
Sent to *|EMAIL|* — <a href="*|ABOUT_LIST|*" style="font-family:Verdana,Arial,Sans !important;font-size:11px !important;font-weight:normal !important;font-style:normal !important;text-decoration:underline !important;color:#404040 !important;"><em>why did I get this?</em></a>
<br>
<a href="*|UNSUB|*" style="font-family:Verdana,Arial,Sans !important;font-size:11px !important;font-weight:normal !important;font-style:normal !important;text-decoration:none !important;color:#369 !important;">unsubscribe from this list</a> |
<a href="*|UPDATE_PROFILE|*" style="font-family:Verdana,Arial,Sans !important;font-size:11px !important;font-weight:normal !important;font-style:normal !important;text-decoration:none !important;color:#369 !important;">update subscription preferences</a>
<br>
*|LIST:ADDRESSLINE|*
</td>
<td align="left" valign="top"></td>
</tr>
</table>
</td>
</tr>
</table>
</center>
<style type="text/css">
@media only screen and (max-width: 480px){
#canspamBar {display:inline;}
#canspamBar td {display:block; margin:0 0 10px 0; text-align:center !important;}
}
</style></body>
</html>-
1. Weg mit dem Tabellenlayout.
2. Mit CSS auch Border, Margin und Padding von Tabellen, Zeilen und Zellen festlegen, sonst macht es der Webmailer.
3. Du kannst Dich bei Webmailern außer auf Primitive auf nichts verlassen. Die setzen sogar den Doctype selbst.4. Mach das HTML für Emails NIE zu kompliziert.
5. (Das lohnt eh nicht, Werbung liest kaum jemand.)
6. Ich lese meine Mails per Einstellung des Programms prinzipiell im Textformat und ignoriere HTML. Was würde ich zu sehen bekommen?
Jörg Reinholz
-
-
Weg mit dem Tabellenlayout.
-
Mit CSS auch Border, Margin und Padding von Tabellen, Zeilen und Zellen festlegen, sonst macht es der Webmailer.
-
Du kannst Dich bei Webmailern außer auf Primitive auf nichts verlassen. Die setzen sogar den Doctype selbst.
-
Mach das HTML für Emails NIE zu kompliziert.
-
(Das lohnt eh nicht, Werbung liest kaum jemand.)
-
Ich lese meine Mails per Einstellung des Programms prinzipiell im Textformat und ignoriere HTML. Was würde ich zu sehen bekommen?
Jörg Reinholz
Hallo Jörg, hättest Du Lust Dir die Sache mal anzuschauen? Würde dafpr natürlich auch zahlen.
LG Sabine
-
-
Moin!
- Weg mit dem Tabellenlayout.
Das ist leider Blödsinn. Ohne Tabellenlayout kriegt man HTML-Newsletter zur Zeit nicht so formatiert, dass sie annähernd korrekt in einer großen Anzahl von Mailclients angezeigt werden.
- Sven Rautenberg
-
-
Moin!
Es ist eine alte Weisheit, dass
<td><img/></td>
etwas anderes ist als
<td>
<img/></td>oder
<td><img/>
</td>oder
<td>
<img/>
</td>Bei dem allerersten werden Bilder passgenau aneinandergeklebt, bei den drei anderen ist Whitespace bzw. "Zeilenhöhe" im Spiel, weil es durch die Zeilenschaltung eine Zeile gibt.
Wenn schon Tabellenlayout, dann richtig. :)
PS: border="0" könnte noch hilfreich sein - das Einbinden der Bilder von einem externen Host hingegen nicht, das verhindert so gut wie alle Mailclients in der Standardeinstellung.
- Sven Rautenberg
-