0
votes

Rembourrage supplémentaire ajouté à l'élément de table dans Outlook Windows

Voici mon HTML:

<table align="center" border="0" cellpadding="0" cellspacing="0" id="wrapper"
  style="max-width: 550px; padding-top: 10px; width: 100% !important; " width="100%">
  <!--[if mso]><center><tr><td><table border="0" cellpadding="0" cellspacing="0" width="550"><![endif]-->
  <tr>
    <td style="border-collapse: collapse; mso-table-lspace: 0pt; mso-table-rspace: 0pt ; ">
      <table border="0" cellpadding="0" cellspacing="0" width="100%">
        <tr>
          <td style=" font-family: Helvetica, Arial, sans-serif; font-size: 16px; line-height: 150%; border-collapse: collapse; mso-table-lspace: 0pt; mso-table-rspace: 0pt; padding: 0 10px ; ">
            <table bgcolor="#90ee90" border="0" cellpadding="0" cellspacing="0" style="margin: 28px 0px; padding: 0;" width="100%">
              <tbody>
                <tr>
                  <td>
                    <!--[if mso]>
                    <table align="left" border="0" cellpadding="0" cellspacing="0" style="width: 30%;" width="165">
                    <tr>
                    <td style="padding-right: 20px">
                    <![endif]-->
                      <img align="left" style="width: 30%; margin-right: 4%;" width="165" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAOEAAADhCAMAAAAJbSJIAAAAh1BMVEUxMjH8/v8tLixQUVEYGhjU0tT29/ghHx/P0dIhIiEnKScVFhXm6OqCf4CnqKnW1dUbHBvb3N/JyMlYVVUAAAANDwyGh4lEPz8kJSO5u734+vuwsLGdnJ3v8PFBQUEqKSlJSklfX1+enp+Uk5Vzc3N5d3cBBgC9v8CDhIRpaGloZGVFRkY6OjlfBncRAAADPklEQVR4nO3Z6XKiQBSGYWQIkUUFAw4ad03U0fu/vlGkEfXQahFTUvU+vxJz6PQnbS9oGAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACeyBQ9UCrX5tckjmVZQaKrKmn3duN3cf6IpJbNqVyraT3x/iz6zWazO5x5TmmV3GxqVjmgN2+IYqHW6si1H2VvtOsMR3nVaB64YpX5V2421U2qBlyUtCwmbD6W0FvaZ3X2LHg0YVfqxyOsXlnTP5Awbl9V9qSImoRv3tMC/kDCYCiUboSBWp4wFO/5A4J1acDqCc0PqXTwSELfqziTJq3ygNUTemEh1+nHz+sZtSyhH1QMaG47b0rWBT9/QRwfKuGpLNWZCj0xt6qjq5mbuMs8r3Vduwvztvxjkb3/sTupvBaagZWJsoa/vtUrQj9OCdenspTUk0RN0pv48Gc36me/L4VxmrcUZWvXW7TfJFTNV+RlCVvygpV3JEvY05elEtXX7+yFKFsZh7oFzsmm3474DlfwhISqryMvK3YXq/7eaqG7uE4J1T1s+MvguJdxg5T22ldJ2IoKH8KSQVdYLOz+l2c5d00br5LQDwvmJRFjv1EQtj/iO0K+SsIz/ZIjgzm7KBy1x+KsW1SrhIZzvWNaGTdOCvVKaAQb+6p6qV/lapZwfzy8Pl18ae9i3RLue5z0Lk/NY91n8VUSht0C7Qp+eIxhtPrFaXWlG6evknAdBydll8RH5mGwepNefvsHE81/eJWE9+xp4sbgoDE7DkrX26rThXQSUWqVMNtof6q+ukaWUDrmK3VKGKhhuVXFUbZ2/KvBPWxF8Rmpy656BGSPj0d1a6Mi1yChPTozEJ9iTPLZsz1NLMdQJ2Jbu7q8SMJLYkKn+KjNP+1u9OtnnRIaVigW7+qw4t+X0Nxdb0v3s5TuFtYsoeGO/avSof4hds0SGqb3eV442tzo+dMSWuHA3ruVMOimZZfKv3sygvHn6cunsGfdWkiTduPQ4qD5o48SD5z31K0j+ORdpLnMdOLpejhvz4ebnXfHRiH7D1W/UvtdppskTpLcEQ8AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAADAL/oP5BU3wQ/BxT8AAAAASUVORK5CYII=" />
                    <!--[if mso]>
                    </td>
                    </tr>
                    </table>
                    <![endif]-->

                    <div style="margin: 4%;">
                      <p style="margin: 1em 0;">This is a test email. You can see that the text is cut off on the left when viewed on Outlook office 365(Windows) This is a test email. You can see that the text is cut off on the left when viewed on Outlook office 365(Windows) This is a test email. You can see that the text is cut off on the left when viewed on Outlook office 365(Windows) This is a test email. You can see that the text is cut off on the left when viewed on Outlook office 365(Windows) This is a test email. You can see that the text is cut off on the left when viewed on Outlook office 365(Windows)</p>
                    </div>
                  </td>
                </tr>
              </tbody>
            </table>
          </td>
        </tr>
      </table>
      <!--[if mso]></td></tr></table></center><![endif]-->
    </td>
  </tr>
</table>

C'est censé ressembler à ceci:

Cela semble bien sur la plupart des clients de messagerie, mais lorsqu'il est affiché dans les fenêtres Outlook, cela ressemble à ceci:

Il semble qu'un rembourrage supplémentaire soit ajouté autour de l'image et la marge sur le texte ne semble pas non plus fonctionner. Quelqu'un at-il une idée sur la façon de résoudre ce problème?

html css email html-email

0 commentaires

3 Réponses :

0
votes

Cette disposition ne semble pas réparable. Ce que fait Outlook est une tentative de «faire flotter» l'image sur le div, mais cela ne fonctionne clairement pas tout à fait.

Cet article suggère un autre problème avec cette mise en page en ce que les liens peuvent ne pas être cliquables lorsqu'ils sont à côté d'une image dans un bloc de texte (par opposition à une cellule de tableau séparée, par exemple): https://help.activecampaign.com/hc/en -us / articles / 115001444310-Common-email-display-issues-with-Outlook - testez également cet aspect.

IMHO, mieux vaut le mettre dans sa propre cellule de table. Les divisions n'ont jamais été bien soutenues.

1 commentaires

Merci pour toutes les informations! Mais si je mets le texte dans sa propre cellule de tableau. Je ne pourrai pas l'enrouler autour de l'image. Avez-vous des suggestions à ce sujet?

0
votes

Il semble que cela provienne de la table fantôme supplémentaire que vous avez autour de l'image.

Supprimer cela résout le problème, mais vous devez ensuite ajouter un espacement.

Pour cela, vous pouvez utiliser un attribut hspace="" sur l'image pour donner la marge.

<p style="margin: 1em 0;">
    <img align="left" style="width: 30%; margin-right: 4%;" hspace="20" width="165" src="https://dummyimage.com/165x165/000/fff&text=test" />This is a test email. You can see that the text is cut off on the left when viewed on Outlook office 365(Windows) This is a test email. You can see that the text is cut off on the left when viewed on Outlook office 365(Windows) This is a test email. You can see that the text is cut off on the left when viewed on Outlook office 365(Windows) This is a test email. You can see that the text is cut off on the left when viewed on Outlook office 365(Windows) This is a test email. You can see that the text is cut off on the left when viewed on Outlook office 365(Windows)</p>

Bien que cela s'applique à la fois à gauche et à droite.

Ce n'est pas une solution complète mais c'est peut-être un début.

0 commentaires

1
votes

En fait, j'ai une autre solution ...

Remplacez le remplissage du <td> par une marge de la <table> . On dirait que ça marche.

Quant à savoir pourquoi cela fonctionne, je ne suis pas encore trop sûr ...

<!--[if mso]>
    <table align="left" border="0" cellpadding="0" cellspacing="0" style="width: 30%;margin-right: 20px" width="165">
    <tr>
    <td>
    <![endif]-->
        <img align="left" style="width: 30%; margin-right: 4%;" width="165" src="https://dummyimage.com/165x165/000/fff&text=test" />
    <!--[if mso]>
    </td>
    </tr>
    </table>
<![endif]-->
    ```

1 commentaires

Cela résout le problème! Cela peut être dû au fait qu'après avoir changé le remplissage en marge, le bgcolor n'est plus appliqué sur l'espace.