2017-10-12 1 views
1

Ich bin ein Newsletter für einen Client einrichten, aber es kontinuierlich Bilder sprengt und Containerbreiten nicht lesen. Ich habe versucht, strikte Breiten auf jeder einzelnen Ebene hinzuzufügen und alle div in Tabellen zu turnen. Weiß jemand, warum Outlook 2013 CSS-Stile für Container möglicherweise nicht erkennt? Dies scheint nur in Outlook 2013 zu passieren und bisher konnte ich noch kein Mittel finden, dies zu beheben.Probleme mit Enews in Outlook 2013

<html> 
<head> 
    <!-- <style type="text/CSS">body, #body_style { 
     background:#f3f2e8; 
     color:#000; 
     font-family:Arial, Helvetica, sans-serif; 
     font-size:12px;} 
     .yshortcuts {color: #F00;} 
    </style> 
!--> 
    <meta charset="UTF-8"> 
    <title>Halloween Cocktails to Heat Up Your Bar</title> 
</head> 
<body bgcolor="#f3f2e8" style="padding:0;margin:0;background:url('http://betterbartend.com/wp-content/uploads/2017/10/Wallpaper-1.jpeg');font-family:arial, sans-serif;font-size:12px; background-color: white;"> 
<table align="center" border="0" cellpadding="5" cellspacing="0" width="728"> 
    <tbody> 
     <tr valign="center"> 
      <td align="left" style="font-family: Arial, Helvetica, sans-serif; font-style: normal; font-variant: normal; line-height: normal; font-size: 10px; font-weight: normal; padding-left: 10px;" valign="bottom" width="400">Better Bartending - October 11, 2017</td> 
      <td align="right" style="font-family: Arial, Helvetica, sans-serif; font-style: normal; font-variant: normal; line-height: normal; font-size: 10px; font-weight: normal; padding-right: 20px;" valign="bottom" width="328">To view this email as a web page, click <a href="@{mv_online_version}@">here.</a></td> 
     </tr> 
    </tbody> 
</table> 
<table style="margin: 10px auto; max-width: 760px !important; width: 760px !important; background-color: white;"> 
    <tr> 
<td style="margin: 10px auto; max-width: 760px !important; width: 760px !important; background-color: white;"> 
    <table><tr> 
<td style="padding: 20px; max-width: 720px !important; width: 720px !important; background-color: white;"> 
<p><a href="https://beverage-handbook-store.myshopify.com/collections/print-editions/products/2017-beer-handbook" target="_blank"><img border="0" class="ads" src="https://epgmedia.s3.amazonaws.com/email/cheers/CH_WeeklyEnewsletter/2017/images/BIG%20Beer%20HB%20728x90.jpg" style="display:block" width="728" /></a></p> 
&nbsp; 

<p style="max-width: 720px !important; width: 720px !important; background-color: white;"><img src="https://epgmedia.s3.amazonaws.com/email/Better%20Bartending/images/BB-newsletter-header.jpg" style="max-width: 720px;" /></p> 

<table style="max-width: 720px !important; width: 720px !important; background-color: white;"> 
    <tr style="max-width: 720px !important; width: 720px !important; background-color: white;"> 
     <td style="max-width: 720px !important; width: 720px !important; background-color: white;"> 
<table style="max-width: 720px !important; width: 720px !important; background-color: white;"> 
    <tbody> 
     <tr> 
      <td align="left" style="max-width: 330px; border-right: 1px solid black; padding: 10px;" valign="middle" width="330"> 
      <p><a href="http://betterbartend.com/halloween-cocktails-to-heat-up-your-bar/" target="_blank"><img alt="Story Image Here" src="https://epgmedia.s3.amazonaws.com/email/Better%20Bartending/BB%20-%20photos%2020171011/PanamaJack-Halloween-Drink.jpg" style="max-width: 320px;" /></a></p> 

      <h1 style="color: purple;"><a href="http://betterbartend.com/halloween-cocktails-to-heat-up-your-bar/" target="_blank">Halloween Cocktails to Heat Up Your Bar</a></h1> 

      <p>&nbsp;</p> 

      <p>We know Halloween is not just for kids: It&rsquo;s a major occasion for adults to cut loose, dress up and enjoy an adult beverage or two. Bars with costume contests or parties are a huge draw. Even if your bar doesn&rsquo;t host a Halloween bash, you can still get in on the action by offering some festive cocktails. Here are a few ideas. <a href="http://betterbartend.com/halloween-cocktails-to-heat-up-your-bar/" target="_blank">Read More</a></p> 
      </td> 
      <td align="left" style="padding: 20px; vertical-align: top;" valign="middle" width="300"> 
      <h1 style="color: purple;">Survey Says: </h1> 

      <p style="font-size: 16px;"><a href="" target="_blank"><img alt="Poll" src="https://epgmedia.s3.amazonaws.com/email/Better%20Bartending/BB%20-%20photos%2020171011/SurveyGraphic1.jpg" style="float: right; padding-right: 0px; width: 300px; max-width: 300px; max-height: 300px;" /></a></p> 
      &nbsp; 

     <h2 style="color: purple;">&nbsp;</h2></td> 
     </tr> 
    </tbody> 
</table> 
     </td></tr></table> 

<p style="background-color: black; height: 20px; max-width: 720px !important; width: 720px !important;">&nbsp;</p> 

<table style="max-width: 720px !important; width: 720px !important; background-color: white;"> 
    <tr style="max-width: 720px !important; width: 720px !important; background-color: white;"> 
     <td style="max-width: 720px !important; width: 720px !important; background-color: white;"> 
<table style="max-width: 720px !important; width: 720px !important; background-color: white;"> 
    <tbody> 
     <tr> 
      <td style="max-width: 330px; padding: 10px;" width="330"><a href="http://betterbartend.com/qa-tracey-mellon-of-american-whiskey-in-new-york/" target="_blank"><img alt="Q and A" src="https://epgmedia.s3.amazonaws.com/email/Better%20Bartending/BB%20-%20photos%2020171011/Tracey-Mellon-700x350.jpg" style="float: left; padding-right: 20px;" width="140" /></a> 

      <h1 style="color: purple;"><a href="http://betterbartend.com/qa-tracey-mellon-of-american-whiskey-in-new-york/" target="_blank">Q&amp;A:<br /> 
      Tracey Mellon</a></h1> 

      <p><em>Tracey Mellon is a bartender at American Whiskey in New York.</em></p> 

      <p><strong>Better Bartending:</strong> You just won the New York leg of Drambuie&rsquo;s 2nd annual Modern Classics. Is this your first cocktail contest or have you competed in others?<br /> 
      <br /> 
      <strong>Tracey Mellon:</strong> This was in fact my first competition. After I joined the U.S. Bartender&rsquo;s Guild, and I started bartending at American Whiskey, I was heavily exposed to the cocktail competition world and immediately wanted to take part. <a href="http://betterbartend.com/qa-tracey-mellon-of-american-whiskey-in-new-york/" target="_blank"><br> 
      Read More</a></p> 
      </td> 
      <td align="left" style="text-align: center;" valign="middle"> 
      <p><a href="http://www.getyourhoney.com" target="_blank"><img alt="" src="https://epgmedia.s3.amazonaws.com/email/Better%20Bartending/Ads%20-%20BB%20Oct/Better-Bartending-Ad.jpg" style="width: 300px; height: 250px; margin: 0 auto; text-align: center;" /></a></p> 
      </td> 
     </tr> 
    </tbody> 
</table> 
     </td></tr></table> 

<table style="width: 720px !important; max-width: 720px !important; background-color: white;"> 
    <tr style="width: 720px !important; max-width: 720px !important; background-color: white;"> 
     <td style="width: 720px !important; max-width: 720px !important; background-color: white;"> 
<table style="width: 720px !important; max-width: 720px !important; background-color: white;"> 
    <tbody style="width: 720px !important; max-width: 720px !important; background-color: white;"> 
     <tr style="width: 720px !important; max-width: 720px !important; background-color: white;"> 
      <td style="border-right: 1px solid black; padding: 10px; width: 300px !important; max-width: 300px !important;"> 
      <h1 style="color: purple;">BLOG WATCH</h1> 

      <h1 style="width: 280px !important; max-width: 280px !important;"><a href="http://betterbartend.com/gastronomista/" target="_blank">Gastronomista</a></h1> 

      <p style="width: 280px !important; max-width: 280px !important;">Launched in 2009, Gastronomista focuses on the finer elements of cocktail culture. Founder/writer Emily Arden Wells is by day an architect, and lends her attention to detail to the world of drinks in this long-running, award-winning blog. <a href="http://betterbartend.com/gastronomista/" target="_blank">Read More</a></p> 
      </td> 
      <td style="padding-left: 20px; width: 390px !important; max-width: 390px !important;"> 
      <h1 style="color: purple;">TREND WATCH</h1> 

      <h1 style="width: 380px !important; max-width: 380px !important;"><a href="http://betterbartend.com/instant-canned-cocktails/" target="_blank">Instant Canned Cocktails</a></h1> 

      <p style="width: 380px !important; max-width: 380px !important;">The ready-to-drink (RTD) craft cocktails trend is on fire, with new launches hitting the market practically every month. There&rsquo;s no shortage of options for consumers who just want to pop open a can to enjoy a cocktail, but some bars are getting creative by mixing and serving drinks right in the can. <a href="http://betterbartend.com/instant-canned-cocktails/" target="_blank">Read More</a></p> 
      </td> 
     </tr> 
    </tbody> 
</table> 
     </td></tr></table> 

<table style="background-color: #e2f6fc; padding: 5px 10px; max-width: 700px !important; width: 700px !important;"> 
    <tr style="background-color: #e2f6fc; max-width: 700px !important; width: 700px !important;"> 
     <td style="background-color: #e2f6fc; max-width: 700px !important; width: 700px !important;"> 
<h1 style="color: purple;">RECIPES</h1> 

<p style="background-color: black; height: 3px; max-width: 720px !important; width: 720px !important;">&nbsp;</p> 
&nbsp; 

<table style="max-width: 720px !important; width: 720px !important;"> 
    <tbody> 
     <tr> 
      <td style="padding: 5px 20px; border-right: 2px solid white; width: 180px; min-width: 180px; max-width: 220px; vertical-align: top;"><a href="http://betterbartend.com/orange-rhyming-dictionary/" target="_blank"><img src="https://epgmedia.s3.amazonaws.com/email/Better%20Bartending/BB%20-%20photos%2020171011/Chalino_Orange-Rhyming-Dictionary.jpg" style="max-width: 180px; max-height: 160px; height: 150px; width: 180px;" /></a> 

      <h2 style="color: #28858a;"><a href="http://betterbartend.com/orange-rhyming-dictionary/" target="_blank">Orange Rhyming Dictionary</a></h2> 

      <ul> 
<li>1 oz. Altos Reposado tequila</li> 
       <li>1/2 oz. Banhez mezcal</li> 
       <li>1 oz. Fresh carrot juice</li> 
       <li>1/2 oz. Cocchi Americano</li> 
       <li>1/4 oz. Honey syrup</li> 
       <li>Bar spoon Fernet Vallet</li> 
       <li>0.5 g Citric acid</li> 
       <li>2 Drops 20% saline solution</li> 
       <li>3 Sprigs cilantro</li> 
      </ul> 

      <p>Combine ingredients in mixing glass. Clap cilantro and add it to the glass. Stir with ice then strain into a chilled coupe. Express an orange peel over the drink.</p> 

      <p><em>The mixologists at Chalino in Portland, OR, created this recipe.</em></p> 
      </td> 
      <td style="padding: 5px 20px; border-right: 2px solid white; width: 180px; min-width: 180px; max-width: 220px; vertical-align: top;"><a href="http://betterbartend.com/stone-mule/" target="_blank"><img src="https://epgmedia.s3.amazonaws.com/email/Better%20Bartending/BB%20-%20photos%2020171011/Mule5small.jpg" style="max-width: 180px; height: 160px; width: 180px; height: 150px;" /> </a> 
      <h2 style="color: #28858a; padding-left: 10px;"><a href="http://betterbartend.com/stone-mule/" target="_blank">Stone Mule</a></h2> 

      <ul> 
       <li>1 1/2 oz. Brandy</li> 
       <li>1/2 oz. Peach liqueur</li> 
       <li>3/4 oz. Fresh lime juice</li> 
       <li>3 oz. Ginger beer</li> 
      </ul> 

      <p>Combine ingredients in glass with ice. Garnish with dried apricot and slice of lime.</p> 

      <p><em>Mike Page, beverage development specialist with Breakthru Beverage Illinois, created this recipe.</em></p> 

      </td> 
      <td style="padding: 5px 20px; width: 180px; min-width: 180px; max-width: 220px; vertical-align: top;"><a href="http://betterbartend.com/fennel-countdown/" target="_blank"><img src="https://epgmedia.s3.amazonaws.com/email/Better%20Bartending/BB%20-%20photos%2020171011/Fennel%20Countdown-2small.jpg" style="max-width: 180px; max-height: 160px; height: 150px; width: 180px;" /></a> 
      <h2 style="color: #28858a; padding-left: 10px;"><a href="http://betterbartend.com/fennel-countdown/" target="_blank">Fennel Countdown</a></h2> 

      <ul> 
       <li>2 oz. Absolut Elyx vodka</li> 
       <li>1/4 oz. Suze gentian liqueur</li> 
       <li>3/4 oz. Fresh fennel cordial</li> 
       <li>2 oz. Freshly squeezed pink grapefruit juice</li> 
       <li>1/2 oz. Freshly squeezed lime juice</li> 
      </ul> 

      <p>Shake all ingredients in a cocktail shaker, strain into a chilled cocktail coupe and garnish with grapefruit zest.</p> 

      <p><em>The mixologists at Elyx created this recipe.</em></p> 
      </td> 
     </tr> 
    </tbody> 
</table> 
     </td></tr></table> 

<p>&nbsp;</p> 

<p style="background-color: black; height: 20px; max-width: 720px !important; width: 720px !important;">&nbsp;</p> 

<table style="max-width: 720px !important; width: 720px !important; background-color: white;"> 
    <tr style="max-width: 720px !important; width: 720px !important; background-color: white;"> 
     <td style="max-width: 720px !important; width: 720px !important; background-color: white;"> 
<h1 style="color: purple;">NEW PRODUCTS</h1> 

<table style="width: 720px !important; max-width: 720px !important;"> 
    <tbody> 
     <tr> 
      <td style="padding: 5px; border: 3px solid lightgray; width: 213px !important; max-width: 213px !important;"> 
      <table style="width: 213px !important; max-width: 213px !important;"> 
       <tbody> 
        <tr> 
         <td><a href="http://betterbartend.com/novo-fogo-colibri-cachaca/" target="_blank"><img src="https://epgmedia.s3.amazonaws.com/email/Better%20Bartending/BB%20-%20photos%2020171011/Colibri-2-2.jpg" style="max-width: 110px !important; max-height: 150px !important; width: 57px !important; height: 150px !important;" /></a></td> 
         <td><a href="http://betterbartend.com/novo-fogo-colibri-cachaca/" target="_blank"><strong>Novo Fogo Colibri Cacha&ccedil;a</strong></a><br /> 
         The Brazilian distillery&#39;s newest expression of cacha&ccedil;a now available in the U.S.</td> 
        </tr> 
       </tbody> 
      </table> 
      </td> 
      <td style="padding: 5px; border: 3px solid lightgray; width: 213px !important; max-width: 213px !important;"> 
      <table style="width: 213px !important; max-width: 213px !important;"> 
       <tbody> 
        <tr> 
         <td><a href="http://betterbartend.com/west-cork-peat-charred-bog-oak-irish-whiskeys/" target="_blank"><img src="https://epgmedia.s3.amazonaws.com/email/Better%20Bartending/BB%20-%20photos%2020171011/Peat-Charred-Cask.png" style="max-width: 110px !important; max-height: 150px !important; width: 37px !important; height: 150px !important;" /></a></td> 
         <td><a href="http://betterbartend.com/west-cork-peat-charred-bog-oak-irish-whiskeys/" target="_blank"><strong>West Cork Peat Charred, Bog Oak Irish Whiskeys</strong></a><br /> 
         Single malts aged in sherry casks and finished in barrels charred via a proprietary device.</td> 
        </tr> 
       </tbody> 
      </table> 
      </td> 
      <td style="padding: 5px; border: 3px solid lightgray; width: 213px !important; max-width: 213px !important;"> 
      <table style="width: 213px !important; max-width: 213px !important;"> 
       <tbody> 
        <tr> 
         <td><a href="http://betterbartend.com/hornitos-cristalino-tequila/" target="_blank"><img src="https://epgmedia.s3.amazonaws.com/email/Better%20Bartending/BB%20-%20photos%2020171011/Hornitos-Cristalino-Bottle-Image-1.png" style="max-width: 110px; max-height: 150px; width: 61px; height: 150px;" /></a></td> 
         <td><a href="http://betterbartend.com/hornitos-cristalino-tequila/" target="_blank"><strong>Hornitos Cristalino Tequila</strong></a><br /> 
         A filtered, clear a&ntilde;ejo tequila aged at least 12 months in American white oak casks.</td> 
        </tr> 
       </tbody> 
      </table> 
      </td> 
     </tr> 
    </tbody> 
</table> 
     </td></tr></table> 
&nbsp; &nbsp; 

<p style="background-color: black; height: 20px; max-width: 720px !important; width: 720px !important;">&nbsp;</p> 

<table style="max-width: 720px !important; width: 720px !important; background-color: white;"> 
    <tr style="max-width: 720px !important; width: 720px !important; background-color: white;"> 
    <td style="max-width: 720px !important; width: 720px !important; background-color: white;"> 
    <h1 style="color: purple;">DRINK RECIPE CONTESTS</h1> 

    <table style="max-width: 720px !important; width: 720px !important;"> 
     <tbody> 
      <tr> 
       <td style="border-right: 1px solid black; width: 220px !important; max-width: 220px !important; min-width: 220px !important; vertical-align: top;"> 
       <table> 
        <tbody> 
         <tr> 
          <td> 
          <p><a href="http://bartenderoftheyear.liquor.com/" target="_blank"><strong>Bartender of the Year</strong></a><br /> 
          Heaven Hill Brands<br /> 
          Entries Open: Sept. 1, 2017</p> 
          </td> 
         </tr> 
        </tbody> 
       </table> 
       </td> 
       <td style="border-right: 1px solid black; width: 220px !important; max-width: 220px !important; min-width: 220px !important; vertical-align: top;"> 
       <table> 
        <tbody> 
         <tr> 
          <td> 
          <p><a href="https://www.mapleguild.com/mapleit" target="_blank"><strong>Maple It</strong></a><br /> 
          The Maple Guild<br /> 
          Entry deadline: Dec. 5, 2017</p> 
          </td> 
         </tr> 
        </tbody> 
       </table> 
       </td> 
       <td style="width: 220px !important; min-width: 220px !important; max-width: 220px !important; vertical-align: top;"> 
       <table> 
        <tbody> 
         <tr> 
          <td> 
          <p><a href="https://www.beefeatermixldn.com/" target="_blank"><strong>MIXLDN 2017</strong></a><br /> 
          Beefeater Gin<br /> 
          Entry Deadline: Jan. 1, 2018</p> 
          </td> 
         </tr> 
        </tbody> 
       </table> 
       </td> 
      </tr> 
     </tbody> 
    </table> 

    <div style="background-color: black; height: 20px; max-width: 720px !important; width: 720px !important;">&nbsp;</div> 
    <custom name="opencounter" type="tracking"> 
    <p align="center" style="text-align: center;">&nbsp;</p> 

    <p align="center"><span xml="lang">This email was sent to you on behalf of <span xml="lang">Better Bartending by Cheers Magazine<br /> 
    EPG Media &amp; Specialty Information, 10405 6th Avenue N, Suite 210, Minneapolis, MN 55441<br /> 
    Copyright 2017 by EPG Media &amp; Specialty Information<br /> 
    For more news and information visit </span><a href="http://betterbartend.com/"><span xml="lang">www.betterbartend.com</span></a> or <a href="http://epgmediallc.com/subscribe/"> <span xml="lang">Subscription Center</span></a><br /> 
    <a href="@{confirmunsubscribelink}@"><span xml="lang">opt out</span></a></span></p> 

    <p align="center" style="text-align: center;">&nbsp;</p> 
    </custom> 

</td> 
</tr> 
</table> 
</td></tr></table></td></tr></table> 
</body> 
</html> 

Antwort

0

Max-Breite funktioniert nicht mit Outlook. Ihre Probleme treten in mehr als nur Outlook 2013 auf. Es sind die gleichen Probleme in 2010, 2016 und Windows 10 Mail.

Versuchen Sie, die Breite für Tabelle, td und Bilder direkt im Objekt hinzuzufügen und lassen Sie die maximale Breite für andere E-Mail-Browser, die es respektieren. Zum Beispiel:

<img height="450" width="600" src="http://www.gwally.com/news/photos/catintinfoilhat.jpg" style="display:block; max-width: 600px;"> 

Es ist hilfreich zu erinnern, dass E-Mail-Design nicht Front-End-Design ist. Es hat unterschiedliche Regeln und Logik.

Verwenden Sie diese Ressource, wenn Sie Fragen dazu haben, ob ein Wert in E-Mails funktioniert oder nicht. Diese

Beispielcode mit Fehlerbehebungen

Ich werde Ihnen die Feinabstimmung lassen.

Outlooks 2013 Ergebnisse

Outlook 2013

Verwandte Themen