HTML-Mail: Runde Ecken in Outlook2007
misterunknown
- css
Moin,
ich habe ein Tool, welches HTML-Emails versendet (ist eine Anforderung). Zur Verschönerung, wird eine Tabellenzelle mit "runden Ecken" versehen. Das funktioniert auch vielmals, in Gmail beispielsweise, mit der Android-Standardmail-App (nicht Gmail), mit K9Mail und im Thunderbird. Leider werden die runden Ecken nicht in Outlook 2007 angezeigt. Weiß jemand zufällig, was man da machen kann? Es ist nicht unendlich wichtig, mich würde es einfach nur mal interessieren, ob es da eine einfache Möglichkeit gibt.
Der Inhalt der Mail ist folgender:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional //EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<style type="text/css">
ul { font-size: 13pt;color: #444; }
li { font-size: 13pt;color: #444; }
#topround { border-radius:6px 6px 0px 0px; -moz-border-radius: 10px 10px 0px 0px; -webkit-border-radius:10px 10px 0px 0px; -webkit-font-smoothing: antialiased; }
#footround { border-radius:0px 0px 6px 6px; -moz-border-radius: 0px 0px 10px 10px; -webkit-border-radius:0px 0px 10px 10px; -webkit-font-smoothing: antialiased; }
.overdue { float:right;text-align:right;color:#C00;font-size:10pt; }
.duetoday { float:right;text-align:right;color:#C80;font-size:10pt; }
.duein { float:right;text-align:right;color:#0C0;font-size:10pt; }
.taskheadline { font-size: 16pt;color: #D9653B;font-weight: bold; margin:4px 0; }
.tasktext { font-size: 13pt;color: #444;margin-top:0;margin-bottom:15px; }
.labelhead { text-align:left;font-size:13pt; margin-top:10px; margin-bottom:7px;}
.sumtabl { width:100%; margin:auto; padding:10px; border-collapse:collapse; }
.sumtask { border:1px solid #DDD;font-size: 13pt;color: #444; padding:10px; }
</style>
</head>
<body style="margin:0;padding:0;">
<div style="background-color:#ececec;margin:0;padding:15px;font-family:Arial, Helvetica, non-serif;">
<table width="95%" cellpadding="0" cellspacing="0" border="0" style="margin:auto;">
<tbody>
<tr bgcolor="#4b4c44">
<td id="topround" align="center" style="-moz-border-radius:10px 10px 0 0;-webkit-border-radius:10px 10px 0 0;-khtml-border-radius:10px 10px 0 0;border-radius:10px 10px 0 0;border:0;">
<br />
</td>
</tr>
<tr bgcolor="#d5e9e7">
<td align="center">
<h1 style="font-size:bold;font-size:16px;text-align:center;margin:4px;" align="center">Tasknag reminder</h1>
</td>
</tr>
<tr bgcolor="#FFFFFF">
<td cellpadding="5px" style="padding:5px 20px;">
<span class="duein" style="float:right;text-align:right;color:#0C0;font-size:10pt;" align="right">due in 1 days</span>
<h2 class="taskheadline" align="left" style="font-size: 16px;color: #D9653B;font-weight: bold; margin:4px 0;">
Überschrift</h2>
<p class="tasktext" align="left" style="font-size: 13px;color: #444;margin-top:0;margin-bottom:15px;">
Inhalt</p><br /></td>
</tr>
<tr bgcolor="#4b4c44">
<td id="footround" cellpadding="5px" style="padding:5px 20px;-moz-border-radius:0 0 10px 10px;-webkit-border-radius:0 0 10px 10px;-khtml-border-radius:0 0 10px 10px;border-radius:0 0 10px 10px;border:0;"">
<p align="left" style="font-size: 12px;color: #72A6A6;margin-top:0;margin-bottom: 15px;white-space:normal;">This is an email reminder from your tasknag. Check out your tasks: <a style="color:#EEF;" href="http://localhost/tasknag/index.php">Tasknag</a></p>
</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
Hinweis:
Die Style-Redundanz mit Style-Element im Kopf und Inline-Style-Attributen ist durchaus so gewollt, da ich viele Clients abdecken will. Und dort ist leider nichts "üblich". Manche streichen das Style-Element aus dem Kopf, andere ignorieren das Inline-Style-Attribut.
Grüße Marco