HTML, das in Outlook 2007/2010 richtig dargestellt wird

Ich verwende derzeit den folgenden HTML-Code, um das unten gezeigte Bild zu rendern. Dies funktioniert jedoch nicht in Outlook, da Hintergrundbilder nicht unterstützt werden. Ich wurde dazu gebracht, Tabellen zu verwenden, um Elemente in Outlook korrekt zu rendern, aber ich habe keine Ahnung, wie ich das anstellen soll. 200 Bounty auf die Person, die die HTML bietet, die das Bild unten korrekt in Outlook 2007/2010"HTML, das in Outlook 2007/2010 richtig dargestellt wird

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="UTF-8" /> 
    <title>Render this</title> 
    <style type="text/css"> 
     div, p { 
      margin:0; 
      padding:0; 
      font-family: Helvetica; 
      font-size:14px; 
      color:#000; 
      font-weight:bold; 
     } 
     div.box { 
      padding:15px; 
      width:272px; 
      height:155px; 
      border:2px solid #000; 
      background-color:rgb(255,232,0); 
     } 
     div.box div.inner { 
      height:100%; 
      background:url("https://s3.amazonaws.com/signoffmainbucket/8CA8EC1A-C1C5-4390-9FC4-649648AA26C8.jpg") bottom right no-repeat; 
     } 
     p.name { 
      margin-bottom:65px; 
     } 
    </style> 
</head> 
<body> 
    <div class="box"> 
     <div class="inner"> 
      <p class="name">John</p> 
      <p>XYZ Company</p> 
     </div> 
    </div> 
</body> 
</html>

enter image description here

Quelle

2012-04-14 RunLoop

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="UTF-8" /> 
    <title>Render this</title> 
    <style type="text/css"> 
     p { 
      margin:0; 
      padding:0; 
      font-family: Helvetica; 
      font-size:14px; 
      color:#000; 
      font-weight:bold; 
     } 
     table { 
      padding:15px; 
      width:272px; 
      height:155px; 
      border:2px solid #000; 
      background-color: #fee800; 
     } 
     p.name { 
      margin-bottom:65px; 
     } 
    </style> 
</head> 
<body> 
<table> 
<tr><td>John Smith</td><td></td></tr> 
<tr><td><p>XYZ Company</p></td><td><img src="https://s3.amazonaws.com/signoffmainbucket/8CA8EC1A-C1C5-4390-9FC4-649648AA26C8.jpg" /></td></tr> 
</table> 

</body> 
</html>

Quelle

2012-04-14 20:21:56 chadpeppers

auf der sicheren Seite zu sein, ich Tabellen in hTML-E-Mail verwenden würde, wie ich im obigen Beispiel gemacht habe. Hier ist ein Link-Tags in hTML erlaubt E-Mail: http : //www.campaignmonitor.com/css/ – chadpeppers

+1 für Tabellen (hätte nie gedacht, dass ich das sagen würde). Traurigerweise mögen E-Mail-Clients Divs nicht. –

Ich würde auch vorschlagen, Inline-CSS zu verwenden. Der Inhalt von html head wird höchstwahrscheinlich in den meisten Webmail-Clients ignoriert, da die webapp eine eigene hat. Ich denke, Mailchimp bietet einen Online-Parser, der das Stylesheet in Inline umwandelt, da es ziemlich umständlich wäre, längeres HTML mit Inline-Styles zu schreiben. – Halka

Für emailer rendert sollten Sie haben Tabelle zu verwenden und nicht verwenden CSS in Kopf oder verschiedene CSS. Versuchen Sie zu verwenden und Inline-CSS.

<table bgcolor="#fee800" border="0" cellpadding="0" cellspacing="0" width="272" height="155" style="border: 2px solid #000; padding: 15px;"> 
    <tr> 
     <td><font face="Helvetica, Arial, sans-serif" style="font-size: 14px;"><b>John</b></font></td><td>&nbsp;</td> 
    </tr> 
    <tr> 
     <td><font face="Helvetica, Arial, sans-serif" style="font-size: 14px;"><b>XYZ Company</b></font></td><td><img src="https://s3.amazonaws.com/signoffmainbucket/8CA8EC1A-C1C5-4390-9FC4-649648AA26C8.jpg" alt="" /></td> 
    </tr> 
</table>

Quelle

2012-04-17 07:48:16 Tarun

HTML, das in Outlook 2007/2010 richtig dargestellt wird

Antwort

Verwandte Themen