Valign funktioniert nicht in Outlook-HTML-E-Mails

Also habe ich Hader die ganze Woche mit einem newsletter-redesign für mein Unternehmen, indem Sie den html-Code anzeigen lassen semi-konsequent auf E-Mail-clients. Ich habe gute Verwendung von www.litmus.com für viel von diesem. Dies ist der Letzte Fehler bleibt, und es weiterhin entzieht sich mir. Wir haben eine horizontale Navigationsleiste, über die Oberseite. Hier ist eine abgespeckte version mit nur einem <td>, normalerweise gibt es 5 davon:

<table width="100%" border="0" align="right" cellspacing="0" cellpadding="0" bgcolor="#FFFFFF" valign="middle">
    <tr valign="middle">
        <td valign="middle" align="center" style="font-family: 'Lucida Grande', Arial, sans-serif; font-size:12px; line-height: 200%; background-color:#b2382a; color: #FFFFFF; text-transform:uppercase;" >&nbsp;
            <a target="_blank" style="font-family: 'Lucida Grande', Arial, sans-serif; font-size:12px; line-height: 200%; background-color:#b2382a; color: #FFFFFF; text-transform:uppercase; text-decoration:none; vertical-align: middle;" href="LinkURLHere">
                <span style="color:#FFFFFF; vertical-align: middle;">Link Text Here</span>
            </a>&nbsp;
        </td>
    </tr>
</table>

Wie Sie sehen können, sind inline-Stile bis die Muschi. Es zeigt gut auf alle von der Lackmus-tests, außer für Outlook 2002, 2007 und 2013, in denen valign="middle" wird ignoriert und der link-text wird geschoben, um die Spitze wie dieser: http://i.imgur.com/a48ObB8.jpg

Mehrere Quellen, hier und anderswo, deuten darauf hin, dass valign funktioniert in outlook, aber ich habe versucht, die valign="middle" - Attribut für jedes tag, das ich denken kann, und mehrere css - vertical-align: middle;s auch. Ist dies nicht mehr der Fall ist? Und wenn ja, gibt es eine Arbeit um, von einer Sorte?

InformationsquelleAutor aurath | 2013-06-04

Ich denke, das Problem ist die line-height einstellen. Ich fand, dass, wenn die line-height ist gleich der td height, valign=middle wird nicht richtig funktionieren in outlook.

Folgenden wird nicht die Mitte-richten Sie den text:

<table cellspacing="0" cellpadding="0" width="100%" border="0" align="right">
    <tr>
        <td align="center" valign="middle" bgcolor="#b2112a" height="48" style="font-size:20px; line-height:48px;">
            Link Text Here
        </td>
    </tr>
</table>

WIRD DIES:

<table cellspacing="0" cellpadding="0" width="100%" border="0" align="right">
    <tr>
        <td align="center" valign="middle" bgcolor="#b2112a" height="48" style="font-size:20px; line-height:24px;">
            Link Text Here
        </td>
    </tr>
</table>

Dieser arbeitete für mich
Gleichen, scheint Anschauungen geht Nüsse, wenn Sie line-height.

InformationsquelleAutor Rudy Gagneron

Valign immer für mich gearbeitet, aber ich denke, es funktioniert in Outlook 2007 müssen Sie die Höhe des <td>. Dies ist immer für mich gearbeitet:

<table cellspacing="0" cellpadding="0" width="100%" border="0" align="right">
    <tr>
        <td align="center" valign="middle" bgcolor="#b2382a" height="35">
            <span style="color:#FFFFFF; 
                         font-family: 'Lucida Grande', Arial, sans-serif;
                         font-size:12px;
                         text-transform:uppercase;">
                Link Text Here
            </span>
        </td>
    </tr>
</table>

Kein Würfel. Hat bei mir nicht funktioniert.

InformationsquelleAutor Sboniso Marcus Nzimande

0

Kurze Antwort: Verwenden von padding-top und padding-bottom mit einem negativen Wert.

Lange Antwort: Wenn Sie schreiben wollen ein cross-kompatiblen E-Mail nicht verwenden valign überhaupt. Das problem mit dem habe, ist die von irgendwo anders, denn standardmäßig wird der text angezeigt werden sollten vertikal zentriert in der Zelle.

Erhalten Sie Ihren code wieder bis zu einem Punkt, wo es standardmäßig auf der Mitte und überall dort, wo Sie etwas anderes verwenden von geschachtelten Tabellen, cellpadding, margin und padding, um die Platzierung Ihrer Suche nach.

InformationsquelleAutor davidcondrey

Habe ich dieses:

<table width="600" border="0" cellpadding="0" cellspacing="0">
  <tr>
    <td width="600" valign="middle">
        Content
    </td>
  </tr>
</table>

Dies funktioniert auf den meisten E-Mail-clients, aber nicht auf Outlook-version größer als 2010. Um es richtig funktioniert, fügen Sie einfach einen bedingten Kommentar mit einem Abstandshalter, wie diese:

<table width="600" border="0" cellpadding="0" cellspacing="0">
  <!-- In this case is a spacer of 40px -->
  <!--[if (gt mso 14)]>
  <tr>
    <td>
      <table border="0" cellpadding="0" cellspacing="0">
        <tr>
          <td style="font-size: 40px; line-height: 40px;" bgcolor="#ffffff" width="100%" height="40" valign="top">
            &nbsp;
          </td>
        </tr>
      </table>
    </td>
  </tr>
  <![endif]-->
  <tr>
    <td width="600" valign="middle">
        Content
    </td>
  </tr>
</table>

InformationsquelleAutor tupini07

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.