Une lacune ajoutée dans Gmail, à l'intérieur d'un html signature à partir d'outlook
J'ai créé un html signature j'ai besoin d'utiliser dans Outlook. Les recommandations suivantes, j'ai utilisé un tableau de mise en page, compte tenu de toutes les images et même de la td, tr et la table elle-même spécifique de la hauteur et la largeur, 0 de rembourrage et de la marge, et même essayé de les ajouter dans le css et dans le vieux-façon sur les balises réelles.
Dans outlook, il sort à droite, mais dans gmail, il ajoute un écart entre le tr.
À la suite de la recommandation ici: Gmail affichage d'écart entre les images, j'ai essayé d'ajouter style="display:block;" pour les images, toujours pas de chance.
Voici le code que j'utilise:
<table cellspacing="0px" cellpadding="0px" border="0px" width="592px" height="254px" style="border-collapse:collapse; border:none; padding:0px; margin:0px; width:592px; height:254px;">
<tr cellspacing="0px" cellpadding="0px" width="592px" height="90px" style="padding:0px; margin:0px; width:592px; height:90px;">
<td cellspacing="0px" cellpadding="0px" width="83px" height="90px" style="padding:0px; margin:0px; width:83px; height:90px;"> </td>
<td cellspacing="0px" cellpadding="0px" width="150px" height="90px" style="padding:0px; margin:0px; width:150px; height:90px;"><img src="new_sig.files/sig2.png" width="150px" height="90px"></td>
<td cellspacing="0px" cellpadding="0px" width="359px" height="90px" style="padding:0px; margin:0px; width:359px; height:90px;"><img src="new_sig.files/sig3.png" width="359px" height="90px"></td>
</tr>
<tr cellspacing="0px" cellpadding="0px" width="592px" height="64px" style="padding:0px; margin:0px; width:592px; height:64px;">
<td cellspacing="0px" cellpadding="0px" width="83px" height="64px" style="padding:0px; margin:0px; width:83px; height:64px;"><a href="http://www.facebook.com"><img style="border:none;" src="new_sig.files/sig4.png" width="83px" height="64px"></a></td>
<td cellspacing="0px" cellpadding="0px" width="150px" height="64px" style="padding:0px; margin:0px; width:150px; height:64px;"><img src="new_sig.files/sig5.png" width="150px" height="64px"></td>
<td cellspacing="0px" cellpadding="0px" width="359px" height="64px" style="padding:0px; margin:0px; width:359px; height:64px;"><img src="new_sig.files/sig6.png" width="359px" height="64px"></td>
</tr>
<tr cellspacing="0px" cellpadding="0px" width="592px" height="100px" style="padding:0px; margin:0px; width:592px; height:100px;">
<td cellspacing="0px" cellpadding="0px" width="83px" height="100px" style="padding:0px; margin:0px; width:83px; height:100px;"><img src="new_sig.files/sig7.png" width="83px" height="100px"></td>
<td cellspacing="0px" cellpadding="0px" width="150px" height="100px" style="padding:0px; margin:0px; width:150px; height:100px;"><img src="new_sig.files/sig8.png" width="150px" height="100px"></td>
<td cellspacing="0px" style="padding:0px 5px 0px 15px; margin:0px; width:339px; height:100px;line-height:16px; font-size:12px;color:#4f4f4f;font-family:arial;" >
Name LastName<br/>
Description<br/><br/>
<a href="http://www.site.com" style="color:#0875a4;">www.site.com</a>
<img src="new_sig.files/phone_icon.png" width="18px" height="28px"/>
972-(0)3-6960556
<img src="new_sig.files/mail_icon.png" width="18px" height="28px"/>
<a href="mailto:[email protected]" style="color:#0875a4;">[email protected]</a>
</td>
</tr>
</table>Maintenant, le code gmail lit, apparemment, qui va comme ceci:
<table width="592" cellspacing="0" cellpadding="0" border="0" style="width: 444pt; border-collapse: collapse;">
<tbody>
<tr style="min-height: 67.5pt;">
<td width="83" style="width: 62.25pt; padding: 0in; min-height: 67.5pt;">
<p class="MsoNormal"><span style="font-size: 12pt; font-family: "Times New Roman","serif";"> </span></p>
</td>
<td width="150" style="width: 112.5pt; padding: 0in; min-height: 67.5pt;">
<p class="MsoNormal"><span style="font-size: 12pt; font-family: "Times New Roman","serif";">
<img height="90" width="150" src=""></span><span style="font-size: 12pt; font-family: "Times New Roman","serif";"></span></p></td>
<td width="359" style="width: 269.25pt; padding: 0in; min-height: 67.5pt;">
<p class="MsoNormal"><span style="font-size: 12pt; font-family: "Times New Roman","serif";">
<img height="90" width="359" src=""></span><span style="font-size: 12pt; font-family: "Times New Roman","serif";"></span></p></td></tr>
<tr style="min-height: 48pt;">
<td width="83" style="width: 62.25pt; padding: 0in; min-height: 48pt;">
<p class="MsoNormal"><a target="_blank" href="http://www.facebook.com/"><span style="font-size: 12pt; font-family: "Times New Roman","serif"; color: blue; text-decoration: none;">
<img height="64" width="83" border="0" src=""></span></a><span style="font-size: 12pt; font-family: "Times New Roman","serif";"></span></p></td><td width="150" style="width: 112.5pt; padding: 0in; min-height: 48pt;"><p class="MsoNormal"><span style="font-size: 12pt; font-family: "Times New Roman","serif";">
<img height="64" width="150" border="0" src=""></span><span style="font-size: 12pt; font-family: "Times New Roman","serif";"></span></p></td>
<td width="359" style="width: 269.25pt; padding: 0in; min-height: 48pt;"><p class="MsoNormal"><span style="font-size: 12pt; font-family: "Times New Roman","serif";">
<img height="64" width="359" border="0" src=""></span><span style="font-size: 12pt; font-family: "Times New Roman","serif";"></span></p></td></tr>
<tr style="min-height: 75pt;">
<td width="83" style="width: 62.25pt; padding: 0in; min-height: 75pt;">
<p class="MsoNormal"><span style="font-size: 12pt; font-family: "Times New Roman","serif";">
<img height="100" width="83" border="0" src=""></span><span style="font-size: 12pt; font-family: "Times New Roman","serif";"></span></p></td>
<td width="150" style="width: 112.5pt; padding: 0in; min-height: 75pt;">
<p class="MsoNormal"><span style="font-size: 12pt; font-family: "Times New Roman","serif";">
<img height="100" width="150" border="0" src=""></span><span style="font-size: 12pt; font-family: "Times New Roman","serif";"></span></p></td>
<td width="339" style="width: 254.25pt; padding: 0in 3.75pt 0in 11.25pt; min-height: 75pt;">
<p style="line-height: 12pt;" class="MsoNormal"><span style="font-size: 9pt; color: rgb(79, 79, 79);">Name LastName<br>Description<br><br><a target="_blank" href="http://www.site.com">
<span style="color: rgb(8, 117, 164);">www.site.com</span></a> </span>
<span style="font-size: 9pt; color: rgb(79, 79, 79);">
<img height="28" width="18" border="0" src=""></span>
<span style="font-size: 9pt; color: rgb(79, 79, 79);">972-(0)3-6960556 </span>
<span style="font-size: 9pt; color: rgb(79, 79, 79);">
<img height="28" width="18" border="0" src=""></span>
<span style="font-size: 9pt; color: rgb(79, 79, 79);">
<a target="_blank" href="mailto:[email protected]">
<span style="color: rgb(8, 117, 164);">[email protected]</span></a> </span></p></td></tr>
</tbody></table>J'ai essayé également de donner à l'ensemble de la ligne de table-hauteur de 0, mais cela ne fonctionne pas non plus.
Les 2 images dans la dernière cellule, d'ailleurs, ne sont pas affichées dans gmail pour une raison quelconque.
mise à jour: n'ai pas vraiment d'avis à ce reçu le plus de réponses jusqu'à présent. nous avons terminé la simplification de la conception/le code un peu, et j'ai arrêté de vérifier cette page après un certain temps. pas sûr si l'une des solutions aurait fonctionné, mais je vois qu'ils en ont aidé d'autres personnes. thnx de toute façon 🙂
OriginalL'auteur AnnaC | 2011-03-09
Vous devez vous connecter pour publier un commentaire.
Pour les cellules de tableau qui contiennent seulement une image, réglez la hauteur de la ligne à 0
( E-mail Sur l'Acide était un bon conseil. )
Une grande aide. Merci!!!!
Merci!!!! Bouée de sauvetage pour moi. Très apprécié.
et pour la table de cellules qui contiennent du texte? Toutes les suggestions? Je vous remercie.
OriginalL'auteur Tim
Bien, je n'arrivais pas à reproduire le problème en envoyant un email à mon compte Gmail, mais je ne vois le problème lors de la vérification de l'HTML dans le navigateur Opera.
Essayez d'ajouter
vertical-align: middle;à la problématique de la<TD>. Il a fait le tour pour l'Opéra.Qui est, bien sûr, sans voir les images, mais le vertical align ne devrait pas le frein de quoi que ce soit.
Vous pouvez également vouloir vérifier cet outil:
http://www.emailonacid.com/
La version gratuite permet de vérifier le Web AOL, Gmail et Outlook 2003.
OriginalL'auteur Spine
Essayez de placer cela dans la tête:
Il devrait remplacer le style que contrecoeur apparaît dans Gmail.
OriginalL'auteur user3837358
Vous avez mentionné que vous avez essayé d'ajouter style="display:block" à vos images, mais je ne vois pas cela dans votre code. Un couple de choses fixe ces situations pour moi dans Gmail:
Donc, si vous assurer que vos images sont dans le format suivant il faut supprimer ces lacunes (en supposant qu'ils ne sont pas là par des valeurs de hauteur).
OriginalL'auteur David Duffett
Solution a fonctionné pour moi, est la somme de chaque solution donnée ici
fait quelque chose comme :
et il a bien fonctionné pour moi...
OriginalL'auteur Jack