2015-08-17 3 views
0

J'ai un eNewsletter que j'ai dû coder pour l'un de nos clients. Après avoir codé tout, j'ai envoyé un test via notre compte Constant Contact. J'ai testé Gmail, Yahoo & Mac Mail et ils fonctionnent bien. Lorsque je l'envoie à un courrier électronique Outlook 2013, il ne s'affiche pas correctement. J'utilise des tables imbriquées. Le point particulier donnant un problème est la table avec id = "visa". J'ai également joint une capture d'écran de l'apparence.Outlook 2013 n'affiche pas la largeur correcte pour la table imbriquée pour mon eNewsletter

Quand j'ouvre l'e-mail dans Outlook 2013 et cliquez sur Actions -> message modifier je clique droit de la zone Visa et choisissez Propriétés du tableau. Je remarque que la boîte de largeur préférée est noire mais pas vérifiée. Si je vais dans les propriétés de la cellule en haut à gauche où il est indiqué "Transférer votre solde et .." et cliquez sur la case Largeur préférée, tout est aligné correctement sans espace.

Pourquoi pas Outlook 2013 d'accepter les largeurs que je donne dans mon HTML? Que puis-je faire pour que cela devienne automatique afin que les destinataires Outlook voient correctement la newsletter?

Voici mon code:

<html xmlns="http://www.w3.org/1999/xhtml"> 
 
<head> 
 
<title>index.jpg</title> 
 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
 
<style type="text/css"> td img {border-width: 0px; 
 
     display: block; 
 
    } 
 

 
</style> 
 

 
</head> 
 
<body bgcolor="#ffffff"> <!-- 'Myriad Pro', Arial,sans-serif; --> 
 
<table border="0" cellpadding="0" cellspacing="0" width="600" align="center" style="font-family:'Myriad Pro', Arial,sans-serif; border:1px solid black;"> 
 

 
    <tr> 
 
    <td colspan="3" style="vertical-align:top; padding:0;"><a href="https://www.rbfcu.coop/" target="_blank"><img name="index_r1_c1" src="https://www.mpsecureapps.com/clients/raritan_bay/15-00477/images/header.jpg" width="600" height="134" border="0" id="index_r1_c1" alt="" /></a></td> 
 
    </tr> 
 
    <tr> 
 
<!--===================================== 
 
== LEFT SIDE RAIL START (nested table) 
 
=========================================--> 
 
    <td width="209" style="vertical-align:top; padding:0; background-color:#e0e6f4;"> 
 
     <table border="0" cellpadding="0" cellspacing="0" width="209" style="font-family:'Myriad Pro', Arial,sans-serif; font-size:11px;"> 
 
      <tr> 
 
       <td style="vertical-align:top; padding:20px 0 0 0;"><img name="vacation" src="https://www.mpsecureapps.com/clients/raritan_bay/15-00477/images/keyboard.jpg" width="209" border="0" id="vacation" alt="" /></td> 
 
      </tr> 
 
      <tr> 
 
       <td style="vertical-align:top; padding:0;"> 
 
        <p style="margin:10px 0 0 15px; color:#2063af; font-size:15px;"><strong>Money Moves To Make<br /> 
 
         This Season</strong></p> 
 
        <p style="margin:5px 0 0 15px; line-height:15px;">As the year starts winding down,<br /> 
 
         here are some smart moves to make<br /> 
 
         with your money to maximize your<br /> 
 
         earnings and save through the<br /> 
 
         winter.</p> 
 
        <p style="margin:10px 0 0 15px; color:#2063af; font-size:14px;"><strong>Give Yourself A Checkup</strong></p> 
 
        <p style="margin:5px 0 0 15px; line-height:15px;">Use a free online budgeting and<br /> 
 
         money management tool, like the<br /> 
 
         resources on our<a href="http://www.rbfcu.coop/services/financial-services/members-financial-services.html" target="_blank"> Members Financial<br /> 
 
         Services Page</a> or the one on Mint.<br /> 
 
         com to make it easy, or review<br /> 
 
         your credit union statements and<br /> 
 
         check for areas where you may be<br /> 
 
         overspending. Also, review your<br /> 
 
         health care coverage and see if you<br /> 
 
         can save if you change to a different<br /> 
 
         plan during open enrollment.</p> 
 
        <p style="margin:10px 0 0 15px; color:#2063af; font-size:14px;"><strong>Prepare For Holiday Spending</strong></p> 
 
        <p style="margin:5px 0 0 15px; line-height:15px;">To avoid one massive bill at the end<br /> 
 
         of the year, start shopping now and<br /> 
 
         finish before things get crazy. Also,<br /> 
 
         paying off your credit card bills every<br /> 
 
         month will help you save on interest<br /> 
 
         charges.</p> 
 
        <p style="margin:10px 0 0 15px; color:#2063af; font-size:14px;"><strong>Put More Into<br /> 
 
         Retirement Accounts</strong></p> 
 
        <p style="margin:5px 0 0 15px; line-height:15px;">Contribute the maximum amount<br /> 
 
         possible to prepare for the future.</p> 
 
        <p style="margin:10px 0 0 15px; color:#2063af; font-size:14px;"><strong>Weatherproof Your Home</strong></p> 
 
        <p style="margin:5px 0 0 15px; line-height:15px;">Prepare your home for colder<br /> 
 
         weather by caulking windows,<br /> 
 
         weatherstripping doors, making<br /> 
 
         sure you have enough insulation<br /> 
 
         and getting a tune&#45;up on your<br /> 
 
         heating unit. It could save you tons<br /> 
 
         in heating costs.</p> 
 
       </td> 
 
      </tr> 
 
     </table> 
 
    </td> 
 
    <td width="22" style="vertical-align:top; padding:0;"> 
 
     &nbsp;</td> 
 
<!--===================================== 
 
== BODY START (nested table) 
 
=========================================--> 
 
    <td width="369" style="vertical-align:top; padding:0;"> 
 
     <table border="0" cellpadding="0" cellspacing="0" width="369" style="font-family:'Myriad Pro', Arial,sans-serif; font-size:11px;"> 
 
      <tr> 
 
       <td width="369" style="vertical-align:top; padding:0;"> 
 
        <table id="visa" border="0" cellpadding="0" cellspacing="0" width="369" style="width:369px; font-family:Arial,sans-serif; font-size:9px;"> 
 
         <tr> 
 
          <td width="132" style="vertical-align:top; padding:0; "> 
 
           <p style="margin:5px 0 0 0; color:#2063af; font-size:12px;"><strong><span style="font-size:13px;">Transfer Your<br />Balance And Save</span><br /> 
 
            Lower Your Monthly<br /> 
 
            Credit Card Payment</strong></p> 
 
          </td> 
 
          <td width="74" style="vertical-align:top; padding:0;"> 
 
           <p style="margin:0;"> 
 
            <img style="display:block;" name="n1500477RaritanBayAug_e_NL151_r1_c2" src="https://www.mpsecureapps.com/clients/raritan_bay/15-00477/images/index_r1_c2.jpg" width="74" border="0" id="n1500477RaritanBayAug_e_NL151_r1_c2" alt="" /> 
 
           </p> 
 
          </td> 
 
          <td width="163" style="vertical-align:top; padding:0;"> 
 
           <p style="margin:0;"> 
 
            <img style="display:block;" name="n1500477RaritanBayAug_e_NL151_r1_c3" src="https://www.mpsecureapps.com/clients/raritan_bay/15-00477/images/index_r1_c3.jpg" width="163" border="0" id="n1500477RaritanBayAug_e_NL151_r1_c3" alt="" /> 
 
           </p> 
 
          </td> 
 
         </tr> 
 
         <tr> 
 
          <td colspan="2" style="vertical-align:top; padding:0;"> 
 
           <p style="margin:5px 0 0 0; line-height:15px;">If you're currently paying too much interest<br /> 
 
            on your credit card balance, RBFCU can<br /> 
 
            help lower your monthly payment. Transfer<br /> 
 
            your high-interest debt from other credit<br /> 
 
            cards to the Raritan Bay FCU Platinum Visa&reg;<br /> 
 
            and you could lower the monthly payment<br /> 
 
            on your existing balance. With no balance<br /> 
 
            transfer fee and a fixed rate as low as 9.99%<br /> 
 
            APR* you could save big. 
 
           </p> 
 
           <p style="margin:5px 0 0 0;">Other Advantages Include:</p> 
 
           <p style="margin:5px 0 0 0;"><span style="color:#0167b1;">&#9632;&nbsp; </span>No annual or balance transfer fees</p> 
 
           <p style="margin:5px 0 0 0;"><span style="color:#0167b1;">&#9632;&nbsp; </span>24/7 customer service</p> 
 
           <p style="margin:5px 0 0 0;"><span style="color:#0167b1;">&#9632;&nbsp; </span>25-day grace period on new purchases</p> 
 
           <p style="margin:5px 0 0 0;"><span style="color:#0167b1;">&#9632;&nbsp; </span>Valuable ScoreCard&reg; Rewards Points</p> 
 
           <p style="margin:5px 0 0 0;">Don't miss this chance to save.</p> 
 
          </td> 
 
          <td width="163" style="vertical-align:top; padding:0;"> 
 
           <p style="margin:0;"> 
 
            <img style="display:block;" name="n1500477RaritanBayAut_e_NL151_r2_c3" src="https://www.mpsecureapps.com/clients/raritan_bay/15-00477/images/index_r2_c3.jpg" width="163" border="0" id="n1500477RaritanBayAug_e_NL151_r2c3" alt="" /> 
 
           </p> 
 
          </td> 
 
         </tr> 
 
         <tr> 
 
          <td colspan="3" style="vertical-align:top; padding:0;"> 
 
           <p style="margin:10px 0 0 0; color:#2063af; font-size:12px;"><strong>Apply Today!</strong></p> 
 
           <p style="margin:5px 0 0 0;">Apply online today or call (732) 727-3500 ext. 220.</p> 
 
           <p style="margin:5px 0 10px 0; font-size:8px;">*APR = Annual Percentage Rate. Qualified borrowers only. Rate subject to change without notification. Contact the credit union for complete details. Other rates available based on creditworthiness.</p> 
 
          </td> 
 
         </tr> 
 
        </table>     
 
        
 
       </td> 
 
      </tr> 
 
      <tr> 
 
       <td style="vertical-align:top; padding:10px 0 0 0; border-top:1px solid #0167b1;"> 
 
        <table border="0" cellpadding="0" cellspacing="0" width="369" style="font-family:'Myriad Pro', Arial,sans-serif;"> 
 
         <tr> 
 
          <td width="185" style="vertical-align:top; padding:0; font-size:11px; border-right:1px solid #0167b1;"> 
 
           <img src="https://www.mpsecureapps.com/clients/raritan_bay/15-00477/images/chalkboard.jpg" width="185" /> 
 
           <p style="margin:10px 0 0 0; color:#2063af; font-size:15px;"><strong>Take A Deserved Break<br /> 
 
            With A Teacher Loan</strong></p> 
 
           <p style="margin:5px 0 0 0;">A Teacher Loan* from Raritan Bay<br /> 
 
            FCU is perfect for educators, since<br /> 
 
            you can take two months off of<br /> 
 
            your payments. Borrow at a low<br /> 
 
            rate for whatever you need and<br /> 
 
            don&rsquo;t worry about paying during<br /> 
 
            the summer break.</p> 
 
           <p style="margin:5px 0 0 0; color:#2063af; font-size:14px;"><strong>Advantages Include:</strong></p> 
 
           <p style="margin:5px 10px 0 0;"><span style="color:#0167b1;">&#9632;&nbsp; </span>Low rates</p> 
 
           <p style="margin:5px 10px 0 0;"><span style="color:#0167b1;">&#9632;&nbsp; </span>Auto and signature loans</p> 
 
           <p style="margin:3px 10px 0 13px;">available</p> 
 
           <p style="margin:5px 10px 0 0;"><span style="color:#0167b1;">&#9632;&nbsp; </span>Make only 10 payments per</p> 
 
           <p style="margin:3px 10px 0 13px;">year</p> 
 
           <p style="margin:5px 10px 0 0;"><span style="color:#0167b1;">&#9632;&nbsp; </span>Skip two months of loan</p> 
 
           <p style="margin:3px 10px 0 13px;">payments</p> 
 
           <p style="margin:5px 0 0 0;">Call us at (732) 727&#45;3500 ext.<br /> 
 
            220 and ask about our Teacher&rsquo;s<br /> 
 
            Loan option today.</p> 
 
           <p style="margin:5px 0 0 0; font-size:8px;">*Qualified borrowers only. Interest will continue<br /> 
 
            to accumulate on your loan during the months a<br /> 
 
            payment is not made. Please contact a Credit Union<br /> 
 
            Representative for rates, terms and conditions.</p> 
 
          </td> 
 
          <td width="184" style="vertical-align:top; padding:0; font-size:11px;"> 
 
           <p style="margin:0 0 0 0;"><img src="https://www.mpsecureapps.com/clients/raritan_bay/15-00477/images/back_to_class.jpg" width="184" /></p> 
 
           <p style="margin:10px 0 0 10px; color:#2063af; font-size:14px;"><strong><span style="font-size:15px;">Head Back To Class With<br /> 
 
            Everything You Need</span><br /> 
 
            <em>With A Raritan Bay FCU<br /> 
 
             <a style="color:#0167b1;" href="http://www.rbfcu.coop/loans/promo-loan.html" target="_blank">Back To School</a> Loan</em></strong></p> 
 
           <p style="margin:5px 0 0 10px;">It&rsquo;s that time of year again, when<br /> 
 
            you need to shop for school<br /> 
 
            supplies, books, clothes, computers<br /> 
 
            and other items for the upcoming<br /> 
 
            school year. Raritan Bay FCU makes<br /> 
 
            it easier for parents and students<br /> 
 
            with a special low&#45;rate Back to<br /> 
 
            School Loan.</p> 
 
           <p style="margin:5px 0 10px 10px; font-size:8px;">*APR = Annual Percentage Rate. Qualified borrowers only. Rates subject to change without notification.</p> 
 
           <hr style="color:#0167b1; width:170px" /> 
 
           <p style="margin:10px 0 0 10px; color:#2063af; font-size:14px;"><strong>Holiday Closing</strong></p> 
 
           <p style="margin:5px 0 0 10px;">Labor Day<br /> 
 
            Monday, September 7, 2015</p> 
 
          </td> 
 
         </tr> 
 
        </table> 
 
       </td> 
 
      </tr> 
 
     </table> 
 
    </td> 
 
    </tr> 
 
</table> 
 
</body> 
 
</html>

+0

je n'étais pas en mesure de télécharger une image, mais où il a l'image de carte Visa il a un espacement à droite et en bas. Et le texte à gauche de celui-ci est à une largeur plus étroite que celle spécifiée dans la balise td. –

Répondre

1

Comme vous le savez probablement (puisque vous utilisez des tables), il y a beaucoup de bizarreries à Outlook. Outlook 2007/2010/2013/2016 (versions Windows) utilisent tous le moteur de rendu Microsoft Word HTML.

Email sur l'acide est un service très utile pour tester le rendu de courrier électronique dans une grande variété de clients et de dispositifs. Ils ont également des conseils pour corriger les bogues communs chez ces clients. Découvrez leur libre PDF of tips for Outlook (à partir de this blog post).

de note particulière pour cette question:

Étape 1. Ajoutez la propriété border-collapse à votre CSS

intégré Étape 2. Mettre à zéro la frontière, cellpadding et cellspacing dans chacune de votre table Mots clés. Etape 3. Si vous essayez d'aligner "à droite" ou "à gauche" plusieurs tables imbriquées, le correctif est un peu plus complexe.

Dans ce cas, vous pouvez voir de grandes lacunes entre vos tables. Voici les étapes pour corriger que:

  1. Ajouter un bgcolor à chaque TD dans votre table aligné (s) - sélectionnez la couleur en fonction de votre mise en page. Ajoutez une bordure 1px à votre table alignée (s) - il doit être de la même couleur que le td à l'intérieur.

  2. diminuer la largeur de la table alignée (s) par 2px pour tenir compte de la frontière.

  3. Enroulez le contenu du premier TD dans une balise de paragraphe.Style balise de paragraphe en utilisant les éléments suivants: mso-table-lspace:0;mso-table-rspace:0;

Voici un échantillon du début à la fin:

<style type="text/css"> 
    table {border-collapse: collapse;} 
</style> 
<table border="0" width="600" cellspacing="0" cellpadding="0"> 
    <tr> <td> 
    <table align="left" width="198" border="0" cellpadding="0" cellspacing="0" style="border:1px solid #00CC99"> 
     <tr> 
     <td bgcolor="#00CC99"><p style="mso-table-lspace:0;mso-table- 
rspace:0;">Content in 1</p></td> </tr> 
     <tr> 
     <td bgcolor="#00CC99">Content in 1</td> 
     </tr> 
    </table> 
    <table align="left" width="198" border="0" cellpadding="0" cellspacing="0" style="border:1px solid #33FFFF"> 
     <tr> 
     <td bgcolor="#33FFFF"><p style="mso-table-lspace:0;mso-table- 
rspace:0;">Content in 2</p></td> </tr> 
     <tr> 
     <td bgcolor="#33FFFF">Content in 2</td> 
     </tr> 
    </table> 
    <table align="left" width="198" border="0" cellpadding="0" cellspacing="0" style="border:1px solid #993366"> 
     <tr> 
     <td bgcolor="#993366"><p style="mso-table-lspace:0;mso-table- 
rspace:0;">Content in 3</p></td> </tr> 
     <tr> 
     <td bgcolor="#993366">Content in 3</td> 
     </tr> 
    </table> 
    </td> </tr> 
</table>