Inkonsistente Bereiche unterhalb von TD-Elementen in Tabellen in HTML-E-Mails in Outlook (2007 und 2010)

Ich habe recherchiert, dieses problem, finden viele vorgeschlagenen Updates auf dem web, aber nichts funktioniert.

Das problem ist die Lücke zwischen einem bestimmten TD-element in einer Tabelle in einer HTML-E-Mail ich bin mit der Gestaltung. Es ist die Anzeige auf diese Weise nur in Outlook 2007 und 2010.

Hier ist ein link zu einem Standbild des Problems

In der Seitenleiste auf der rechten Seite, es sollte keine Lücke zwischen der "Ebene 2" und das dünne, abgerundete Ecke box oben.

Hier ist der code für die geschachtelte Tabelle, die erstellt die blue box:

<table class="box" width="200" border="0" cellspacing="0" cellpadding="0"><tr><td style='line-height:0;font-size:0'><img src="http://dl.dropbox.com/u/16792732/wave-email-images/box_dark_top.gif" style="display:block" width="200" height="10" /></td></tr><tr><td class="box_dark"><h2>Level 2<br /><span class="white">Care Assistants</span></h2><h2>Level 3<br /><span class="white">Senior Carers</span></h2><h2 class="norule">Level 5<br /><span class="white">Managers and Deputy Managers</span></h2></td></tr><tr><td style='line-height:0'><img src="http://dl.dropbox.com/u/16792732/wave-email-images/box_dark_bottom.gif" style="display:block" width="200" height="10" /></td></tr></table>

Wie Sie sehen können, habe ich entfernt alle Leerzeichen, da dies wurde vorgeschlagen, in einer der Workarounds, die ich gefunden. Hab ich auch eingefügt die 'line-height:0;font-size:0' Stil in das TD-element und das 'display:block' Stil in das Bild selbst, noch einmal alle vorgeschlagenen Workarounds. Keiner von diesen hat den geringsten Unterschied.

Dieses problem erscheint nicht in jedem anderen Mail-client oder browser.

Bitte um Hilfe!!

InformationsquelleAutor Soutpiel | 2011-06-29

  1. 10

    Verwendung von Tabellen ist gängige Praxis in html-E-Mail-baut, weil die css-Unterstützung ist schlecht im E-Mail-clients, insbesondere Outlook.

    Halten Sie Ihre Tisch-Struktur, sondern versuchen Sie, diese Ergänzungen:

    • Hinzufügen valign="bottom" um die td-Zelle mit box_dark_top.gif und valign="top" auf die nächsten zwei Zellen
    • Für jedes Bild, stellen Sie die css als style="display:block;margin:0;padding:0"

    • Verwenden Sie inline-css eher als interne

      <table class="box" width="200" border="0" cellspacing="0" cellpadding="0">
<tr><td valign="bottom"><img src="http://dl.dropbox.com/u/16792732/wave-email-images/box_dark_top.gif" style="display:block;margin:0;padding:0" width="200" height="10" alt="" /></td></tr>
<tr>
    <td valign="top" class="box_dark">
        <h2>Level 2<br /><span class="white">Care Assistants</span></h2>
        <h2>Level 3<br /><span class="white">Senior Carers</span></h2>
        <h2 class="norule">Level 5<br /><span class="white">Managers and Deputy Managers</span></h2>
    </td>
</tr>
<tr><td valign="top"><img src="http://dl.dropbox.com/u/16792732/wave-email-images/box_dark_bottom.gif" style="display:block;margin:0;padding:0" width="200" height="10" alt="" /></td></tr></table>
    Versuchen Sie, verwenden Sie inline-Formatvorlagen für HTML-Elemente eher als Klassen, es behebt das Rendern manchmal.

    InformationsquelleAutor marissajmc

  2. 0

    Outlook 2007 weiter nutzt Word, HTML zu Rendern. Hier ist einen Artikel über dieses, mit links zu mehr stark meinungsorientierte Artikel und Webseiten.

    Vielleicht könnten Sie versuchen, entwerfen Sie Ihre Mitteilung in Word (oder Outlook selbst)? Natürlich, dann kann es nicht richtig gerendert wird, in einem vernünftigen E-Mail client.

    Ja, das Problem verursachen können, wie Outlook 2007/2010 ignoriert einige der Stile angewendet. Sie können klicken Sie auf Antworten oder Weiterleiten und speichern Sie die HTML von Word, um zu sehen, was ist das problem mit HTML und CSS.

    InformationsquelleAutor Hugh Allen

  3. 0

    Legen Sie die Höhe des TD-ebenso wie jede andere TD, sollte eine Feste Höhe:

    <td valign="bottom" height="10" width="200">

    *Sie sollte auch mit der Breite auf ALLE TD ' s in der E-Mail.

    InformationsquelleAutor JustinJason

  4. 0

    Ich habe herausgefunden, dass Outlook Verpackung img-tags und styling einen margin-top-immer, wenn Sie "fühlen" wie es ist. Sie können die generierte html-Code für die Speicherung der E-Mail im html-Format.

    InformationsquelleAutor killebytes

Schreibe einen Kommentar