Police/remplissage pas correctement affiché dans le courrier électronique dans Outlook 2007

Question

Je crée actuellement un mailing, mais j'ai un problème avec une police et les paddings n'étant pas affichés correctement dans un tableau (Outlook 2007/2010 testé jusqu'ici ici le problème se produit).

Exemple: http://i.imgur.com/apHAQpf.png

<table id="header" width="800" border="0" cellspacing="0" cellpadding="0"> 
<tr> 
<td valign="top" height="350" background="https://gallery.mailchimp.com/31b5556e401fca10882aaeeff/images/541e9551-8e52-4234-adda-f07326a65e6c.png" bgcolor="#222222" style="height:350px;background-image:url('https://gallery.mailchimp.com/31b5556e401fca10882aaeeff/images/541e9551-8e52-4234-adda-f07326a65e6c.png');background-color:#222222;"> 

    <!--[if gte mso 9]> 
    <v:image xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="border: 0; display: inline-block; width: 800px; height: 350px;" src="https://gallery.mailchimp.com/31b5556e401fca10882aaeeff/images/541e9551-8e52-4234-adda-f07326a65e6c.png" /> 
    <v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="border: 0; display: inline-block; position: absolute; width: 800px; height: 350px;"> 
    <v:fill opacity="0%" color="#222222" /> 
    <v:textbox> 
    <![endif]--> 

    <div style="padding:30px 100px 30px 50px !important;font-family:'Trebuchet MS', 'Lucida Grande', 'Lucida Sans Unicode', 'Lucida Sans', Tahoma, sans-serif !important;"> 
    <h1>Lorem ipsum dolor sit amet, consectetur adipiscing elit</h1> 
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam et cursus sem. Nam viverra in diam auctor maximus. In laoreet ipsum eget augue iaculis congue. In placerat efficitur ex. Maecenas vel dui vitae risus lacinia viverra. Nunc dapibus placerat augue, non condimentum metus aliquet at.</p> 
    <span><a href="#" class="more light">Meer</a></span> 
    </div> 

    <!--[if gte mso 9]> 
    </v:textbox> 
    </v:fill> 
    </v:rect> 
    </v:image> 
    <![endif]--> 
    </td> 
</tr> 
</table> 

J'ai essayé d'utiliser le CSS par ID/classes, directement en ligne (comme ci-dessus). Mais cela ne semble pas aider. Lorsque je n'utilise pas l'image de fond, la police et le remplissage corrects sont chargés.

Quelqu'un sait une solution comment résoudre ce problème?

Answer 1

J'ai ajouté une table dans le VML si vous avez une table qui rend le rembourrage seulement pour perspectives.

<table id="header" width="800" border="0" cellspacing="0" cellpadding="0"> 
 
<tr> 
 
<td valign="top" height="350" background="https://gallery.mailchimp.com/31b5556e401fca10882aaeeff/images/541e9551-8e52-4234-adda-f07326a65e6c.png" bgcolor="#222222" style="height:350px;background-image:url('https://gallery.mailchimp.com/31b5556e401fca10882aaeeff/images/541e9551-8e52-4234-adda-f07326a65e6c.png');background-color:#222222;"> 
 

 
    <!--[if gte mso 9]> 
 
    <v:image xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="border: 0; display: inline-block; width: 800px; height: 350px;" src="https://gallery.mailchimp.com/31b5556e401fca10882aaeeff/images/541e9551-8e52-4234-adda-f07326a65e6c.png" /> 
 
    <v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="border: 0; display: inline-block; position: absolute; width: 800px; height: 350px;"> 
 
    <v:fill opacity="0%" color="#222222" /> 
 
    <v:textbox> 
 
    
 

 
    <table width="100%" border="0" cellspacing="0" cellpadding="0"> 
 
    <tbody> 
 
    <tr> 
 
     <td style="padding:30px 100px 30px 50px;>  
 
     
 
     
 
     <![endif]--> 
 
    
 
    <div style="padding:30px 100px 30px 50px !important;font-family:'Trebuchet MS', 'Lucida Grande', 'Lucida Sans Unicode', 'Lucida Sans', Tahoma, sans-serif !important; color:#ffffff;"> 
 
    <h1>Lorem ipsum dolor sit amet, consectetur adipiscing elit</h1> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam et cursus sem. Nam viverra in diam auctor maximus. In laoreet ipsum eget augue iaculis congue. In placerat efficitur ex. Maecenas vel dui vitae risus lacinia viverra. Nunc dapibus placerat augue, non condimentum metus aliquet at.</p> 
 
    <span><a href="#" class="more light">Meer</a></span> 
 
    </div> 
 

 
    <!--[if gte mso 9]> 
 
    
 
    </td> 
 
    </tr> 
 
    </tbody> 
 
</table> 
 
    
 
    
 
    </v:textbox> 
 
    </v:fill> 
 
    </v:rect> 
 
    </v:image> 
 
    <![endif]--> 
 
    </td> 
 
</tr> 
 
</table>

Laissez-moi savoir si cela fonctionne pour vous.