E-Mail-Vorlage - Hintergrundbild mit Text-Overlay an der genauen Stelle

Question

Ich baue eine HTML-Mail, wo ein Bild mit einer Nummer darüber sein sollte. Bis jetzt habe ich das Bild als td-Hintergrund mit einer geschachtelten Tabelle hinzugefügt, um den Text zu positionieren. Es sieht in den meisten E-Mail-Clients gut aus, außer ... Outlook. Outlook macht den Text - nach rechts (Outlook 2003) - zu hoch (Outlook 2007 und höher)

Beispiel:

<table cellpadding="0" cellspacing="0" border="0"> 
    <tr> 
     <td background="https://s31.postimg.org/57s9ntmij/basket_3.png" bgcolor="#ffffff" width="35" height="30" valign="top" style="font-size: 0;"> 
      <!--[if gte mso 9]> 
      <v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:35px;height:30px;"> 
       <v:fill type="frame" src="https://e.kaartje2go.nl/public/Kaartje2go/8553f93ebcf5d20eb1da4a3b8abeaaba/basket_3.png" color="#ffffff" /> 
       <v:textbox inset="0,0,0,0"> 
        <![endif]--> 
        <table cellpadding="0" cellspacing="0" border="0" width="30" style="line-height:20px;"> 
         <tr> 
          <td width="20"></td> 
          <td height="15" align="center" valign="middle" style="font-size: 12px; font-family: 'Source Sans Pro', Arial, sans-serif; color:#ffffff;font-weight:700; line-height:20px;" > 
           2 
          </td> 
         </tr> 
        </table> 
        <!--[if gte mso 9]> 
       </v:textbox> 
      </v:rect> 
      <![endif]--> 
     </td> 
    </tr> 
</table> 

Die HTML finden Sie hier: http://codepen.io/anon/pen/kXpKRQ?editors=1000

Ich habe verschiedene Höhen und Linienhöhen ausprobiert, aber nichts scheint zu helfen. Kann mir bitte jemand helfen, die Position des Textes zu korrigieren? Vielen Dank!

Answer 1

Ich denke, das funktioniert nicht, denn Outlook scheint seltsam zu sein, wenn Align und Vagign verwendet wird.

Sie ausgerichtet Ihre Sekunde td in der Mitte des Rests des Raumes. Der Rest der Breite ist 15px. Versuchen Sie, die Breite zu Ihrer zweiten Tabelle hinzuzufügen und Ihren Text mit dem text-align: center auszurichten; .

Wenn das nicht funktioniert, können Sie einfach die Breite des zweiten td auf 0 setzen und ein drittes td mit der Breite von 15 hinzufügen. Dann spielen Sie mit den Breiten des ersten und dritten td herum Text wo es hingehört.

Auch für die Höhe könnten Sie versuchen, eine

<td .. > 
    <span style="line-height: 5px;"><br></span><br>2 
</td> 

Zugabe Dieses etwas schnell und schmutzig ist, aber vielleicht bekommt den Job zu erledigen. Auf diese Weise können Sie die Höhe des TD auf 12px einstellen und die gesamte Zeilenhöhe entfernen.

Sie könnten auch versuchen, der Tabelle oder dem TD eine Polsterung hinzuzufügen, um die Höhe richtig zu machen.

Es tut mir leid, ich habe keine genaue Antwort, aber ich habe nur Zugriff auf einen Outlook2010-Client. Aber vielleicht funktioniert etwas davon, oder zumindest hast du etwas Inspiration bekommen.

Answer 2

Ich habe dieses Problem gelöst (etwas mehr) mit den Zeilenhöhenwerten.

Dort wo mehrere Zeilenhöhen definiert wurden, in der Tabelle selbst und seiner Elterntabelle. Ich habe die Zeilenhöhe der Eltern entfernt und den Wert für die Höhe und Breite der TD-Zeile geändert, um die Ausrichtung in der Google Mail-App zu korrigieren.

Dies ist die letzte Lösung:

<table width="35" cellpadding="0" cellspacing="0" border="0"> 
 
    <tr> 
 
    <td background="https://s31.postimg.org/57s9ntmij/basket_3.png" bgcolor="#ffffff" width="35" height="30" valign="top" style="font-size: 0;"> 
 
     <!--[if gte mso 9]> 
 
     <v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:35px;height:30px;"> 
 
      <v:fill type="frame" src="https://s31.postimg.org/57s9ntmij/basket_3.png" color="#ffffff" /> 
 
      <v:textbox inset="0,0,0,0"> 
 
       <![endif]--> 
 
     <table cellpadding="0" cellspacing="0" border="0" width="35"> 
 
     <tr> 
 
      <td width="14"></td> 
 
      <td width="21" height="20" align="center" valign="middle" style="font-size: 12px; font-family: 'Source Sans Pro', Arial, sans-serif; color:#ffffff;font-weight:700; line-height:14px;"> 
 
      2 
 
      </td> 
 
     </tr> 
 
     </table> 
 
     <!--[if gte mso 9]> 
 
      </v:textbox> 
 
     </v:rect> 
 
     <![endif]--> 
 
    </td> 
 
    </tr> 
 
</table>

Es ist in den meisten E-Mail-Clients gut macht (außer Outlook 120 DPI ..)