Newsletter et marge sous les images

Bonjour

Je suis en train de préparer une newsletter pour mon entreprise qui devra être envoyé depuis Outlook, ce qui me pose des problèmes.

Celle-ci s'affiche correctement sur les logiciels de mail Outlook et Thunderbird. En revanche, sur les Webmail de type Gmail, je constate une petite marge qui vient se glisser sous les images.



Notez que lorsque j'envoi le mail depuis Thunderbird, le résultat est parfait sur tous les lecteurs. J'en déduit donc que ce n'est pas mon code qui pose problème

J'ai ajouté à chaque balise <img /> les propriétés display: block et border: 0. Mais cela n'a aucun effet. Pire, en vérifiant le code du mail depuis gmail, la propriété à disparu. Lorsque je la rajoute depuis la console du navigateur, tout est OK

Est ce quelqu'un aurait une idée pour empêcher Outlook de modifier le code HTML ?

Je vous remercie par avance pour vos réponses

Salut,

Que dit le débuggeur du navigateur ?
Le plus simple dans un cas comme ça est de rechercher l'origine du problème directement depuis celui-ci. Cela permet de tester des (tentatives de) correctifs en live.

Ben, c'est ce que j'ai fait. J'ai ouvert les outils de debugger depuis une page gmail et j'ai rajouté la propriété display: block aux balises img. Tout est rentré dans l'ordre.

Ce que je ne comprends pas, c'est que cette propriété est présente quand j'importe le code dans Outlook et elle a disparu quand je reçoit le mail dans Gmail. Donc à priori, Outlook modifie le code de ma newsletter.

Ca ne serait pas la première fois qu'un éditeur fait n'importe quoi.

Je me suis arraché plus d'une fois les cheveux en utilisant l'outil d'emailing Sarbacane car celui-ci modifiait le code durant l'envoi.
Modifié par erwan21a (21 Oct 2016 - 17:16)

En supposant que tu as exporté ta news à partir de tranches réalisées via photoshop, tu devrais te retrouver avec un joli tableau html...

Dans ce tableau, effectivement à reporter sur toutes les images

<img src="" width="x" height="y"  border="0" style="display:block;">

Puis dans tes balises td contenant tes images, reporter les tailles des images.

<td width="x" height="y">
<img src="" width="x" height="y" border="0" style="display:block;">
</td>

Tu ne devrais plus avoir de problèmes.

Merci de ta réponse et c'est ce que j'ai fait, mais après du mail après Outlook, la propriété display: block a disparu, d'ou l'apparition de ces marges involontaires.

J'ai convaincu ma direction d'oublier Outlook et nous allons passer par Mailchimp, ce qui au final sera beaucoup plus performants, et les premiers tests que j'ai fait le confirment.

Oui ce sera bien plus simple c'est évident.