Outlook newsletter ne veut pas afficher correctement HTML CSS

Question

J'ai du mal à trouver quel pourrait être le problème avec mon en-tête de newsletter. Cela fonctionne parfois correctement quand je teste mais le moindre changement change tout et je ne peux même pas remarquer ce qui cause l'erreur.

Voici le code et une image montrant ce que mon problème est:

<table cellpadding="" cellspacing="0" border="0" vallign="top" align="center" style="height:auto; max-width=600px; border-bottom: none!important;border-right: none !important;" > 
 
    <tr> 
 
    <td background="http://img.anpdm.com/BalticDevelopmentForum/background-100.jpg" max-width="600px" height="440px" alt="Lighouse in Germany" bgcolor="#333333" style="display:block; background-repeat: no-repeat; padding: 0;width: 100%;" valign="middle;"> 
 
    <!--[if gte mso 9]> 
 
    <v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="max-width: 600px; max-height: 440px;"> 
 
    <v:fill type="tile" src="http://img.anpdm.com/BalticDevelopmentForum/background-100.jpg" color="#333333" /> 
 
    <v:textbox inset="0,0,0,0"> 
 
    <![endif]--> 
 
     <table border="0" cellpadding="0" cellspacing="30" style="max-width:600px;"> 
 
     <tr> 
 
      <td align="center" > 
 
      <br> 
 
      <img alt="" src="http://img.anpdm.com/BalticDevelopmentForum/Asset-2.png" width="88px" height="47px" align="center" link="" style="display:block;"/> 
 
      </td> 
 
     </tr> 
 
     <tr> 
 
      <td align="center" valign="middle"> 
 
      <font style="font-weight:100;font-family:Arial, Helvetica, sans-serif; font-size: 12px; color: #ffffff !important;"> 
 
      <anpa href="http://www.bdforum.org" style="font-weight:100;color: #ffffff; text-decoration: none; padding-right: 1em;"> 
 
      WEBSITE</anpa> 
 
      <anpa href="##TellAFriend##" style="font-weight:none;color: #ffffff; text-decoration: none; padding-right: 1em;"> 
 
      FORWARD</anpa> 
 
      <anpa href="http://www.anpdm.com/form/4743504075464B5943/414358407446455F4571" style="font-weight:none;color: #ffffff; text-decoration: none; padding-right: 1em;"> 
 
      SUBSCRIBE</anpa> 
 
      <anpa href="##OptOutAll##" style="font-weight:none;color: #ffffff; text-decoration: none;"> 
 
      UNSUBSCRIBE<br> 
 
      </anpa></font> 
 
      </td> 
 
     </tr> 
 
     <tr> 
 
      <td width="600px" align="center" valign="middle"><font style="font-weight:none;font-family:Arial, Helvetica, sans-serif; font-size: 24px; color: #ffffff !important;"> 
 
      <anpa href="http://www.bdforum.org" style="font-weight:100;color: #ffffff; text-decoration: none;"> 
 
      Baltic Development Forum</anpa></font></td> 
 
     </tr> 
 
     
 
     <tr> 
 
\t \t \t <td align="center"> 
 
\t \t \t <font style="font-weight:100;font-family:Arial, Helvetica, sans-serif; font-size: 12px; color: #ffffff !important;"> 
 
\t \t \t 
 
\t \t LATEST BDF NEWS ESPECIALLY FOR YOU 
 
\t \t \t </font></td> 
 
     </tr> 
 
     
 
     <tr> 
 
     <br> 
 
     <td align="center">   \t 
 
     \t <div><!--[if mso]> 
 
    <v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="http://www.bdforum.org" style="height:35px;v-text-anchor:middle;width:160px;" arcsize="58%" stroke="f" fillcolor="#d1003e"> 
 
    <w:anchorlock/> 
 
    <center> 
 
    <![endif]--> 
 
     <a href="http://www.bdforum.org" 
 
style="background-color:#d1003e;border-radius:20px;color:#ffffff;display:inline-block;font-family:Arial, Helvetica, sans-serif; font-size:12px;line-height:35px;text-align:center;text-decoration:none;width:160px;-webkit-text-size-adjust:none;">WEBSITE</a> 
 
    <!--[if mso]> 
 
    </center> 
 
    </v:roundrect> 
 
<![endif]--></div> 
 
\t \t \t </td> 
 
     </tr> 
 
     </table> 
 
     <!--[if gte mso 9]> 
 
    </v:textbox> 
 
    </v:rect> 
 
    <![endif]--></td> 
 
    </tr> 
 
</table>

Et ici vont les photos de:

ce que je veux obtenir

Et ce qui se passe en ce moment quand je l'ouvre dans Outlook

De toute évidence, cela fonctionne dans tous les autres messages électroniques "client" par exemple. Gmail. Je suis un peu désespéré à ce stade ...

Answer 1

Je nettoyais votre code ci-dessous. J'ai ajouté quelques width="100%" s et width="600" depuis Outlook ne prend pas en charge max-width. J'ai également déplacé tous les attributs CSS en ligne style.

Les deux blocs <!--[if gte mso 9]> (pour l'image de fond et le bouton) ne s'entendaient pas. J'ai l'image d'arrière-plan à afficher, mais la partie VML du bouton semble ancrée dans le coin supérieur gauche du bloc. La suppression de la partie VML du bouton a corrigé la disposition, mais a perdu le rayon de bordure (arcsize) du bouton dans Windows Outlook (border-radius couvre la plupart des autres clients de messagerie).

Pas parfait pixel partout, mais j'espère que c'est un pas dans la bonne direction!

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
    <title></title> 
 
</head> 
 
<body> 
 
    <table align="center" border="0" cellpadding="" cellspacing="0" style="height:auto; max-width:600px; border-bottom: none!important;border-right: none !important;" width="600"> 
 
     <tr> 
 
      <td bgcolor="#333333" height="440" background="http://img.anpdm.com/BalticDevelopmentForum/background-100.jpg" style="display:block; background-repeat: no-repeat; padding: 0;" valign="middle;" width="100%"> 
 
       <!--[if gte mso 9]> 
 
    <v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width: 600px; height: 440px;"> 
 
    <v:fill type="tile" src="http://img.anpdm.com/BalticDevelopmentForum/background-100.jpg" color="#333333" /> 
 
    <v:textbox inset="0,0,0,0"> 
 
    <![endif]--> 
 
       <table border="0" cellpadding="0" cellspacing="30" style="max-width:600px;" width="100%"> 
 
        <tr> 
 
         <td align="center"><br> 
 
         <img align="center" alt="" height="47px" src="http://img.anpdm.com/BalticDevelopmentForum/Asset-2.png" style="display:block;" width="88px"></td> 
 
        </tr> 
 
        <tr> 
 
         <td align="center" valign="middle"><font style="font-weight:100;font-family:Arial, Helvetica, sans-serif; font-size: 12px; color: #ffffff !important;">WEBSITE FORWARD SUBSCRIBE UNSUBSCRIBE<br></font></td> 
 
        </tr> 
 
        <tr> 
 
         <td align="center" valign="middle" width="600px"><font style="font-weight:none;font-family:Arial, Helvetica, sans-serif; font-size: 24px; color: #ffffff !important;">Baltic Development Forum</font></td> 
 
        </tr> 
 
        <tr> 
 
         <td align="center" style="font-weight:100;font-family:Arial, Helvetica, sans-serif; font-size: 12px; color: #ffffff !important;">LATEST BDF NEWS ESPECIALLY FOR YOU</td> 
 
        </tr> 
 
        <tr> 
 
         <td align="center"> 
 
           
 
          <table role="presentation" aria-hidden="true" cellspacing="0" cellpadding="0" border="0" align="center" width="160" style="margin: auto;"> 
 
           <tr> 
 
            <td style="border-radius: 30px; background: #d1003e; text-align: center;"> 
 
             <a href="http://www.bdforum.org" style="background-color:#d1003e;border: 5px solid #d1003e; border-radius:30px;color:#ffffff;display:block;font-family:Arial, Helvetica, sans-serif; font-size:12px;line-height:35px;text-align:center;text-decoration:none;"> 
 
              <span style="color:#ffffff;">WEBSITE</span> 
 
             </a> 
 
            </td> 
 
           </tr> 
 
          </table> 
 
           
 
         </td> 
 
        </tr> 
 
       </table><!--[if gte mso 9]> 
 
    </v:textbox> 
 
    </v:rect> 
 
    <![endif]--> 
 
      </td> 
 
     </tr> 
 
    </table> 
 
</body> 
 
</html>

Answer 2

D'après un peu de recherche, il semble que Outlook 2007 et au-delà n'a pas la capacité d'afficher des images qui sont définies en utilisant "background-image". Vous pouvez cependant utiliser des tags.

Vérifiez ce fil pour plus d'info: Background images not working in Outlook 2007 and later