Outlook zu Gmail horizontale Lücken

Nach ein paar Tagen zu versuchen, dies herauszufinden, über meine eigene Forschung, ich habe offiziell aufgegeben und haben Sie zu Experten für Hilfe kommen.Outlook zu Gmail horizontale Lücken

Ich habe einen Kunden, der das folgende Bild für ihre E-Mail-Signatur mit Telefonnummer, E-Mail und Website anklickbar anfordert, so habe ich es aufgeschnitten und gehe diese Route, weil Image Mapping nicht funktioniert, wenn von seinem Mac gesendet wird, obwohl es auf seinem Mac funktioniert, wenn ich es über Google Mail sende.

Sie verwenden Outlook auf einem Mac für ihr Geschäft. Ich teste diese auf Outlook via PC und auf anderen Clients über EmailOnAcid bevor das Endprodukt zu liefern und die folgenden Probleme:

Outlook auf Outlook

Outlook in Google Mail gesendet

Outlook auf Outlook w/line-height: 0

Outlook zu Gmail w/line-height: 0

So im Wesentlichen, sieht alles zunächst groß, wenn von Outlook zu Outlook, aber die lästigen horizontalen Lücken auftreten, in Outlook zu Google Mail gesendet.

Wenn ich den Zeilenhöhentrick mache, bricht Outlook in Outlook jetzt zusammen, während Gmail jetzt gut aussieht.

Ich habe alle Tricks hier - https://www.emailonacid.com/blog/article/email-development/12_fixes_for_the_image_spacing_in_html_emails - und anderswo vergeblich versucht.

FYI Der Code ist möglicherweise nicht mehr sehr konsistent, weil ich eine Menge verschiedener Dinge ausprobiert habe, aber es sollte Ihnen eine Idee geben. Außerdem ist das resultierende Bild ein bisschen mehr als doppelt so groß wie das, was ich brauche, um am Ende eine hohe Auflösung zu erreichen.

Jede Hilfe wäre super-geschätzt ... Danke!

<!DOCTYPE html> 
 

 
<html> 
 
<head> 
 
<meta> 
 

 
<title>Untitled Document</title> 
 
</head> 
 

 
<body> 
 
<table border="0" cellpadding="0" cellspacing="0" width="980"> 
 
<tr> 
 
<td><img alt="Example Image" border="0" src="https://makalla.com/wp-content/uploads/2017/10/Rebuilt-Signature-v4_01.jpg" style="display: block;"></td> 
 
</tr> 
 

 
<tr> 
 
<td> 
 
<table border="0" cellpadding="0" cellspacing="0"> 
 
<tr> 
 
<td height="49px"><img alt="Example Image" border="0" src="https://makalla.com/wp-content/uploads/2017/10/Rebuilt-Signature-v4_02.jpg" style="display: block;"></td> 
 

 
<td height="49px"><img alt="Example Image" border="0" src="https://makalla.com/wp-content/uploads/2017/10/Rebuilt-Signature-v4_03.jpg" style="display: block;"></td> 
 
</tr> 
 
</table> 
 
</td> 
 
</tr> 
 

 
<tr> 
 
<td> 
 
<table border="0" cellpadding="0" cellspacing="0"> 
 
<tr> 
 
<td><img alt="Example Image" border="0" src="https://makalla.com/wp-content/uploads/2017/10/Rebuilt-Signature-v4_04.jpg" style="display: block;"></td> 
 

 
<td><img alt="Example Image" border="0" src="https://makalla.com/wp-content/uploads/2017/10/Rebuilt-Signature-v4_05.jpg" style="display: block;"></td> 
 
</tr> 
 
</table> 
 
</td> 
 
</tr> 
 

 
<tr> 
 
<td> 
 
<table border="0" cellpadding="0" cellspacing="0"> 
 
<tr> 
 
<td><img alt="Example Image" border="0" src="https://makalla.com/wp-content/uploads/2017/10/Rebuilt-Signature-v4_06.jpg" style="display: block;"></td> 
 

 
<td><img alt="Example Image" border="0" src="https://makalla.com/wp-content/uploads/2017/10/Rebuilt-Signature-v4_07.jpg" style="display: block;"></td> 
 
</tr> 
 
</table> 
 
</td> 
 
</tr> 
 

 
<tr> 
 
<td> 
 
<table border="0" cellpadding="0" cellspacing="0"> 
 
<tr> 
 
<td><img alt="Example Image" border="0" src="https://makalla.com/wp-content/uploads/2017/10/Rebuilt-Signature-v4_08.jpg" style="display: block;"></td> 
 

 
<td><img alt="Example Image" border="0" src="https://makalla.com/wp-content/uploads/2017/10/Rebuilt-Signature-v4_09.jpg" style="display: block;"></td> 
 
</tr> 
 
</table> 
 
</td> 
 
</tr> 
 

 
<tr> 
 
<td> 
 
<table border="0" cellpadding="0" cellspacing="0"> 
 
<tr> 
 
<td><img alt="Example Image" border="0" src="https://makalla.com/wp-content/uploads/2017/10/Rebuilt-Signature-v4_10.jpg" style="display: block;"></td> 
 

 
<td><img alt="Example Image" border="0" src="https://makalla.com/wp-content/uploads/2017/10/Rebuilt-Signature-v4_11.jpg" style="display: block;"></td> 
 
</tr> 
 
</table> 
 
</td> 
 
</tr> 
 
</table> 
 
</body> 
 
</html>

Quelle

2017-10-25 Makalla

Verwenden Sie Outlook die E-Mail zu schicken? – Syfer

Ja, da wird der Client die Signatur installieren und senden von.Ich weiß, Outlook hat seine Probleme, aber ich fühle mich wie ich bin so nah dran, um diese Sache in. – Makalla

Erstens fallen die Höhen auf TD, sie haben unterschiedliche Ergebnisse auf E-Mail-Clients. Auch das hast du getan? _Überprüfen Sie den HTML-Code und kopieren Sie ihn in die Signatur. Aktivieren Sie Signaturen auf Outlook, verfassen Sie E-Mails und senden Sie sie. Wenn nicht, würde ich vorschlagen, dass Sie dies tun. Das Hinzufügen eines HTML-Codes zu einer zu versendenden E-Mail ist nicht der beste Test. – Syfer

Versuchen style="border-collapse: collapse !important;" auf jedem TD Element und Tisch. Das wird dein erster Schritt sein.

<!DOCTYPE html> 
 

 
<html> 
 
<head> 
 
<meta> 
 

 
<title>Untitled Document</title> 
 
</head> 
 

 
<body> 
 
<table border="0" cellpadding="0" cellspacing="0" width="980"> 
 
<tr> 
 
<td style="border-collapse: collapse !important;"><img alt="Example Image" border="0" src="https://makalla.com/wp-content/uploads/2017/10/Rebuilt-Signature-v4_01.jpg" style="display: block;"></td> 
 
</tr> 
 

 
<tr> 
 
<td> 
 
<table border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse !important;"> 
 
<tr> 
 
<td height="49px" style="border-collapse: collapse !important;"><img alt="Example Image" border="0" src="https://makalla.com/wp-content/uploads/2017/10/Rebuilt-Signature-v4_02.jpg" style="display: block;"></td> 
 

 
<td height="49px" style="border-collapse: collapse !important;"><img alt="Example Image" border="0" src="https://makalla.com/wp-content/uploads/2017/10/Rebuilt-Signature-v4_03.jpg" style="display: block;"></td> 
 
</tr> 
 
</table> 
 
</td> 
 
</tr> 
 

 
<tr> 
 
<td> 
 
<table border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse !important;"> 
 
<tr> 
 
<td style="border-collapse: collapse !important;"><img alt="Example Image" border="0" src="https://makalla.com/wp-content/uploads/2017/10/Rebuilt-Signature-v4_04.jpg" style="display: block;"></td> 
 

 
<td style="border-collapse: collapse !important;"><img alt="Example Image" border="0" src="https://makalla.com/wp-content/uploads/2017/10/Rebuilt-Signature-v4_05.jpg" style="display: block;"></td> 
 
</tr> 
 
</table> 
 
</td> 
 
</tr> 
 

 
<tr> 
 
<td> 
 
<table border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse !important;"> 
 
<tr> 
 
<td style="border-collapse: collapse !important;"><img alt="Example Image" border="0" src="https://makalla.com/wp-content/uploads/2017/10/Rebuilt-Signature-v4_06.jpg" style="display: block;"></td> 
 

 
<td style="border-collapse: collapse !important;"><img alt="Example Image" border="0" src="https://makalla.com/wp-content/uploads/2017/10/Rebuilt-Signature-v4_07.jpg" style="display: block;"></td> 
 
</tr> 
 
</table> 
 
</td> 
 
</tr> 
 

 
<tr> 
 
<td> 
 
<table border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse !important;"> 
 
<tr> 
 
<td style="border-collapse: collapse !important;"><img alt="Example Image" border="0" src="https://makalla.com/wp-content/uploads/2017/10/Rebuilt-Signature-v4_08.jpg" style="display: block;"></td> 
 

 
<td style="border-collapse: collapse !important;"><img alt="Example Image" border="0" src="https://makalla.com/wp-content/uploads/2017/10/Rebuilt-Signature-v4_09.jpg" style="display: block;"></td> 
 
</tr> 
 
</table> 
 
</td> 
 
</tr> 
 

 
<tr> 
 
<td> 
 
<table border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse !important;"> 
 
<tr> 
 
<td style="border-collapse: collapse !important;"><img alt="Example Image" border="0" src="https://makalla.com/wp-content/uploads/2017/10/Rebuilt-Signature-v4_10.jpg" style="display: block;"></td> 
 

 
<td style="border-collapse: collapse !important;"><img alt="Example Image" border="0" src="https://makalla.com/wp-content/uploads/2017/10/Rebuilt-Signature-v4_11.jpg" style="display: block;"></td> 
 
</tr> 
 
</table> 
 
</td> 
 
</tr> 
 
</table> 
 
</body> 
 
</html>

Quelle

2017-10-25 18:08:27 scoopzilla

Kein Würfel ... Sieht genauso aus wie das ursprüngliche Beispiel von Google Mail oben. Danke für den Vorschlag aber ... Hatte das noch nicht probiert! – Makalla

Schnelle Frage - warum würdest du es nicht einfach 1 Bild machen? – scoopzilla

Sie wollen Image Mapping/Hotspots für die Links hinzufügen? Ich habe es getan, und es funktioniert gut über mein Google Mail, aber funktioniert nicht auf Client-Ende von Outlook auf Mac ... Hotspots sind bei der Lieferung abgestreift. – Makalla

Ich habe vor etwas Glück mit dieser Vorlage in Outlook hat. Ehrlich gesagt bin ich mir nicht sicher warum. Was ich mache, um es zum Laufen zu bringen, ist dies in Word zu öffnen, zu kopieren und in Outlook einzufügen. Weiß nicht, Probieren Sie es aus?

<!doctype html> 
 
<html> 
 
<head> 
 
<meta charset="UTF-8"> 
 
<title>Email Signature</title> 
 
<style type="text/css"> 
 

 
body { 
 
\t background-color: #ffffff; 
 
\t margin: 0; 
 
\t padding: 0; 
 
\t color: #000; 
 
\t font-family: Arial, Helvetica, sans-serif; 
 
\t font-size: 75%; 
 
\t line-height: 5px; 
 
\t top: auto; 
 
} 
 

 
/* ~~ Element/tag selectors ~~ */ 
 
ul, ol, dl { /* Due to variations between browsers, it's best practices to zero padding and margin on lists. For consistency, you can either specify the amounts you want here, or on the list items (LI, DT, DD) they contain. Remember that what you do here will cascade to the .nav list unless you write a more specific selector. */ 
 
\t padding: 0; 
 
\t margin: 0; 
 
} 
 
h1, h2, h3, h4, h5, h6, p { 
 
\t margin-top: 0; \t /* removing the top margin gets around an issue where margins can escape from their containing div. The remaining bottom margin will hold it away from any elements that follow. */ 
 
\t padding-right: 15px; 
 
\t padding-left: 15px; /* adding the padding to the sides of the elements within the divs, instead of the divs themselves, gets rid of any box model math. A nested div with side padding can also be used as an alternate method. */ 
 
} 
 
a img { 
 
\t border: none; 
 
} 
 
/* ~~ Styling for your site's links must remain in this order - including the group of selectors that create the hover effect. ~~ */ 
 
a:link { 
 
\t color: #42413C; 
 
\t text-decoration: underline; /* unless you style your links to look extremely unique, it's best to provide underlines for quick visual identification */ 
 
} 
 
a:visited { 
 
\t color: #6E6C64; 
 
\t text-decoration: underline; 
 
} 
 
a:hover, a:active, a:focus { /* this group of selectors will give a keyboard navigator the same hover experience as the person using a mouse. */ 
 
\t text-decoration: none; 
 
} 
 

 
/* ~~ this fixed width container surrounds all other elements ~~ */ 
 
.container { 
 
\t background-color: #FFF; 
 
\t margin: 0 auto; /* the auto value on the sides, coupled with the width, centers the layout */ 
 
} 
 

 
/* ~~ This is the layout information. ~~ 
 

 
1) Padding is only placed on the top and/or bottom of the div. The elements within this div have padding on their sides. This saves you from any "box model math". Keep in mind, if you add any side padding or border to the div itself, it will be added to the width you define to create the *total* width. You may also choose to remove the padding on the element in the div and place a second div within it with no width and the padding necessary for your design. 
 

 
*/ 
 
.content { 
 
\t padding: 0px 0; 
 
} 
 

 
/* ~~ miscellaneous float/clear classes ~~ */ 
 
.fltrt { /* this class can be used to float an element right in your page. The floated element must precede the element it should be next to on the page. */ 
 
\t float: right; 
 
\t margin-left: 8px; 
 
} 
 
.fltlft { /* this class can be used to float an element left in your page. The floated element must precede the element it should be next to on the page. */ 
 
\t float: left; 
 
\t margin-right: 8px; 
 
} 
 
.clearfloat { /* this class can be placed on a <br /> or empty div as the final element following the last floated div (within the #container) if the overflow:hidden on the .container is removed */ 
 
\t clear:both; 
 
\t height:0; 
 
\t font-size: 1px; 
 
\t line-height: 0px; 
 
} 
 
.container .content div center a { 
 
\t font-family: Arial, Helvetica, sans-serif; 
 
} 
 

 
</style> 
 
</head> 
 

 
<body> 
 

 
<div class="container"> 
 
    <div class="content"> 
 
    <blockquote> 
 
     <table border="0" cellpadding="0" cellspacing="0" width="980"> 
 
<tr> 
 
<td><img alt="Example Image" border="0" src="https://makalla.com/wp-content/uploads/2017/10/Rebuilt-Signature-v4_01.jpg" style="display: block;"></td> 
 
</tr> 
 

 
<tr> 
 
<td> 
 
<table border="0" cellpadding="0" cellspacing="0"> 
 
<tr> 
 
<td height="49px"><img alt="Example Image" border="0" src="https://makalla.com/wp-content/uploads/2017/10/Rebuilt-Signature-v4_02.jpg" style="display: block;"></td> 
 

 
<td height="49px"><img alt="Example Image" border="0" src="https://makalla.com/wp-content/uploads/2017/10/Rebuilt-Signature-v4_03.jpg" style="display: block;"></td> 
 
</tr> 
 
</table> 
 
</td> 
 
</tr> 
 

 
<tr> 
 
<td> 
 
<table border="0" cellpadding="0" cellspacing="0"> 
 
<tr> 
 
<td><img alt="Example Image" border="0" src="https://makalla.com/wp-content/uploads/2017/10/Rebuilt-Signature-v4_04.jpg" style="display: block;"></td> 
 

 
<td><img alt="Example Image" border="0" src="https://makalla.com/wp-content/uploads/2017/10/Rebuilt-Signature-v4_05.jpg" style="display: block;"></td> 
 
</tr> 
 
</table> 
 
</td> 
 
</tr> 
 

 
<tr> 
 
<td> 
 
<table border="0" cellpadding="0" cellspacing="0"> 
 
<tr> 
 
<td><img alt="Example Image" border="0" src="https://makalla.com/wp-content/uploads/2017/10/Rebuilt-Signature-v4_06.jpg" style="display: block;"></td> 
 

 
<td><img alt="Example Image" border="0" src="https://makalla.com/wp-content/uploads/2017/10/Rebuilt-Signature-v4_07.jpg" style="display: block;"></td> 
 
</tr> 
 
</table> 
 
</td> 
 
</tr> 
 

 
<tr> 
 
<td> 
 
<table border="0" cellpadding="0" cellspacing="0"> 
 
<tr> 
 
<td><img alt="Example Image" border="0" src="https://makalla.com/wp-content/uploads/2017/10/Rebuilt-Signature-v4_08.jpg" style="display: block;"></td> 
 

 
<td><img alt="Example Image" border="0" src="https://makalla.com/wp-content/uploads/2017/10/Rebuilt-Signature-v4_09.jpg" style="display: block;"></td> 
 
</tr> 
 
</table> 
 
</td> 
 
</tr> 
 

 
<tr> 
 
<td> 
 
<table border="0" cellpadding="0" cellspacing="0"> 
 
<tr> 
 
<td><img alt="Example Image" border="0" src="https://makalla.com/wp-content/uploads/2017/10/Rebuilt-Signature-v4_10.jpg" style="display: block;"></td> 
 

 
<td><img alt="Example Image" border="0" src="https://makalla.com/wp-content/uploads/2017/10/Rebuilt-Signature-v4_11.jpg" style="display: block;"></td> 
 
</tr> 
 
</table> 
 
</td> 
 
</tr> 
 
</table> 
 

 
\t </blockquote> 
 
\t </div> 
 
\t </div> 
 
</body> 
 
</html>

Quelle

2017-10-26 20:16:28 scoopzilla

Danke für den Vorschlag und die Zeit, es zusammenzusetzen, aber es ist immer noch das gleiche Ergebnis in Google Mail wie alle anderen Versuche ... Ist diese Outlook-Sache nicht frustrierend? – Makalla

Outlook ist das schlechteste E-Mail-Programm aller Zeiten. Und es wird der Fluch deiner Existenz sein. Ich würde vorschlagen, nur ein einzelnes Bild zu verwenden. – scoopzilla

Einverstanden. Das habe ich getan. – Makalla

Outlook zu Gmail horizontale Lücken

Antwort

Verwandte Themen