Ich habe ein seltsames Verhalten der GMail App auf Android beim Anzeigen einer HTML-Signatur mit Outlook 2017 von Mac OS erstellt.Outlook HTML Unterschrift in GMail App: Lücke zwischen Elemente
Zunächst einmal hier ist, was ich tat:
- Ich habe eine HTML-Signatur mit einem einfachen Tabellen-Layout und die in einem Browser
- ich den Inhalt aus dem Browser-Fenster in dem Unterschriftsfeld kopiert in Outlook (Outlook -> Einstellungen -> Signature)
- hielt ich die ursprüngliche Formatierung nach dem Inhalt einfügen
Nun ist die Signatur grundsätzlich im Browser, Outlook o gut aussieht n Mac und in der iPhone Standard Mail App. In Google Mail unter Android gibt es sehr große Lücken zwischen den Tabellenzeilen und ich kann keine Möglichkeit finden, sie zu steuern. Natürlich habe ich etwas Forschung und endete mit den Empfehlungen here und here unter vielen anderen Quellen. Die Formatierungsprobleme wurden in Google Forums adressiert. Some People waren in der Lage, es auf eine bestimmte CSS-Klasse MsoNormal von Outlook hinzugefügt, aber sie sind alle ziemlich alt und die Vorschläge scheinen nicht für mich arbeiten. Ich habe viele Sachen ausprobiert und habe drei verschiedene Versionen mit gleichen oder ähnlichen Ergebnissen bekommen.
Die erste Version verwendet divs in der Tabelle um den Text zu Struktur:
<table style='font-family:Arial; cellspacing:0px; cellpadding:0px; padding:0px; margin:0px; border-spacing: 0; line-height:60%;'>
<tbody>
<tr>
<td>
<img src='http://361nutrition.de/signature/img/dummy.jpg' alt='line' style='width:85px; height:130px; display:block; vertical-align:text-top; line-height:0;' />
</td>
<td style='width:5px'></td>
<td style='vertical-align:top;'>
<div style='font-size: 11px; margin:0px; padding:0px;'>
Peter Pan<br>
Chief Executive Officer<br>
<b>The Company</b>
</div>
<div style='font-size: 9px; margin:0px; padding:0px;'>
Reach me at:<br>
[email protected]<br>
+00 324 244 20
</div>
<div style='font-size: 9px; margin:0px; padding:0px;'>
...or visit me at:<br>
My Office<br>
Office Street Nr.<br>
44556 Officetown
</div>
</td>
</tr>
</tbody>
</table>der zweite eine Tabelle in der Tabelle verwendet:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style type="text/css">
p.MsoNormal {
margin: 0px !important;
}
</style>
</head>
<body>
<table class='tbl' style='min-width:300px; font-family:Arial; cellspacing:0px; cellpadding:0px; padding:0px; margin:0px; border-spacing: 0; line-height:60%;'>
<tbody class='tbl_body'>
<tr class='tbl_tr' style="display: block; white-space: nowrap;">
<td class='tbl_td' style="line-height:0; display: inline-block;"><img src='http://361nutrition.de/signature/img/dummy.jpg' alt='line' style='width:85px; height:130px; display:block; vertical-align:text-top' /></td>
<!--<td style='width:5px; display: inline-block;'></td>-->
<td class='tbl_td' style='vertical-align:top; display: inline-block;'>
<table class='tbl' style='font-family:Arial; cellspacing:0px; cellpadding:0px; padding:0px; margin:0px; border-spacing: 0; line-height:60%;'>
<tbody class='tbl_body'>
<tr class='tbl_tr' style='font-size: 11px; margin:0px; padding:0px; display: block; white-space: nowrap;'>
<td class='tbl_td' style="display: inline-block;">Peter Pan<br>Chief Executive Officer<br><b>The Company</b></td>
</tr>
<tr class='tbl_tr' style='font-size: 11px; margin:0px; padding:0px; display: block; white-space: nowrap; '>
<td class='tbl_td' style="display: inline-block;">Reach me at:<br>[email protected]<br>+00 324 244 20</td>
</tr>
<tr class='tbl_tr' style='font-size: 11px; margin:0px; padding:0px; display: block; white-space: nowrap;'>
<td class='tbl_td' style="display: inline-block;">...or visit me at:<br>My Office<br>Office Street Nr.<br>44556 Officetown</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</body>
</html>Und schließlich habe ich eine 3 x 2 Tabellenlayout mit der Bild Spanning 3 Reihen:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style type="text/css">
p.MsoNormal {
margin: 0px !important;
}
</style>
</head>
<body>
<table style='font-family:Arial; cellspacing:0; cellpadding:0; border:0; border-collapse: collapse; padding:0px; margin:0px; border-spacing: 0; line-height:60%;'>
<tbody>
<tr style='margin:0px; padding:0px;'>
<td rowspan="3" style='line-height:0'>
<img src='http://361nutrition.de/signature/img/dummy.jpg' alt='line' style='width:85px; height:130px; display:block; vertical-align:text-top' />
</td>
<td style='font-size: 11px; margin:0px; padding:0px;'>Peter Pan<br>Chief Executive Officer<br><b>The Company</b></td>
</tr>
<tr style='margin:0px; padding:0px;'>
<td style='font-size: 11px; margin:0px; padding:0px;'>Reach me at:<br>[email protected]<br>+00 324 244 20</td>
</tr>
<tr style='margin:0px; padding:0px;'>
<td style='font-size: 11px; margin:0px; padding:0px;'>...or visit me at:<br>My Office<br>Office Street Nr.<br>44556 Officetown</td>
</tr>
</tbody>
</table>
</body>In GMail die Ergebnisse für die Tabelle Ansätze etwas wie folgt aussehen:
Und der div-Ansatz etwa so:
Wie Sie sehen können, gibt es große Lücken zwischen den Textfeldern, obwohl es keinen Rand, Padding, Zellenabstand oder was auch immer gibt.
Ich habe viel mit CSS herumgespielt und keine Lösung gefunden.
Ich hoffe, dass jemand helfen kann.
Grüße, Markus