Orange Marketing Blog

HTML E-Mail Programmierung - Aufzählung im Text und Ausrichtung von Grafiken

6. Mai 2010 |

Autor: Ali Mostofian |

Kommentare und Reaktionen

X

Orange Marketing Newsletter - Jetzt Anmelden:

Lotus Notes und Outlook reagieren unterschiedlich auf:

Aufzählungsangaben in HTML: <ul> und <ol>
Ausrichtung von Grafiken: .<…align=”middle”…>

Outlook 2007

Während Lotus Notes auch in Version 7 align=”middle” akzeptiert, wird diese Angabe von Outlook 2007 ignoriert! So kann man z. B. einen Download-Link nicht an einem PDF-Icon vertikal zentriert ausrichten!

Lösung:
Link und Grafik in einer Tabelle mit zwei Spalten packen und die Spalten (<td>) mit valign=”middle” versehen. So kann man sicherstellen, dass der Text immer vertikal zentriert an Grafik ausgerichtet ist.

Lotus Notes

Aufzählungen im Text sind nichts Besonderes. Das stimmt nicht ganz, wenn man mit Lotus Notes zutun hat! Zwar klappt es mit der Aufzählung jedoch die Absätze oberhalb und unterhalb der Aufzählung haben keinen Zeilenabstand zur Aufzählung selbst. So kleben sie buchstäblich aneinander!

Aufzählung in Lotus Notes

Auch ein line break <br /> hilft da nicht viel, da man damit den Abstand in anderen E-Mail Clients um eine weitere Zeile vergrößert.

Lösung:
Wieder mal hilft hier die Tabellen-Struktur. Einfach die Aufzählungen in einer Tabelle packen, <li>’s ohne <ul></ul> bzw. <ol></ol> angeben und jeweils in Absätzen oben und unten einen Zeilenabstand mit <br /> einfügen:

Absatz oben…<br />
<table>
<tr>
<td>
<li>Aufzählung 1</li>
<li>Aufzählung 2</li>
<li>Aufzählung 3</li>
</td>
</tr>
</table>
<br />Absatz unten…

Das funktioniert in Outlook 2007, Lotus Notes und auch in anderen E-Mail Clients.

Trackback-URL: http://blog.orangemarketing.de/2010/05/06/html-e-mail-programmierung-aufzahlung-im-text-und-ausrichtung-von-grafiken/trackback/