Microsoft Outlook isn't showing the correct email template
Question
I'm making an email template , It works great on all email services except Microsoft Outlook 2007/2010..
Here's how its supposed to look
http://i.stack.imgur.com/Yi1SP.png
Here's how it's looking on Outlook
http://i.imgur.com/eRvu3sY.jpg
Here's a look in the code itself
<html>
<head>
<title>Robot Coupe</title>
</head>
<body>
<p><%body%></p>
<table border="1" cellpadding="0" cellspacing="0" style="border: 1px solid red;" width="600">
<tbody>
<tr>
<td style="line-height:0px; mso-line-height-rule:exactly;">
<p><span style="font-size:20px;"><span style="font-family:lucida sans unicode,lucida grande,sans-serif;"><strong><a href="http://www.robotcoupe.com.au" title="Robot Coupe"><img src="http://empaustralia.com.au/robot-coupe/logo.jpg" /></a></strong></span></span></p>
<p><span style="font-family:lucida sans unicode,lucida grande,sans-serif;"><strong><a href="http://www.robotcoupe.com.au" title="Robot Cook"><img src="http://empaustralia.com.au/robot-coupe/robot-cook.jpg" /></a></strong></span> <img align="right" height="524px" src="http://empaustralia.com.au/robot-coupe/robot-cook.png" width="266px" /></p>
<p><img src="http://empaustralia.com.au/robot-coupe/bullet.jpg" /><span style="font-family:comic sans ms,cursive;">Emulsify, grind, blend, chop, mix and<br />
knead to perfection.<br />
<br />
<img src="http://empaustralia.com.au/robot-coupe/bullet.jpg" />Hot, cold, sweet or savoury - it’s all up<br />
to you!<br />
<br />
<img src="http://empaustralia.com.au/robot-coupe/bullet.jpg" />High speed and enviable cutting<br />
quality with the ability to heat<br />
up to 140°C<br />
<br />
<img src="http://empaustralia.com.au/robot-coupe/bullet.jpg" />3.7 litre stainless-steel bowl</span></p>
<p><span style="font-family:comic sans ms,cursive;font-size:13px;"> <font color="707070">“I don't see it as a machine, I see it as one of<br />
my chefs, with no days off. It's true, apart<br />
from doing our daily recipes in the machine,<br />
we’re also constantly creating new techniques<br />
and recipes with the Robot Cook. It's so<br />
awesome I’ll bring it to the next staff party, it’s<br />
part of my kitchen team!”</font></span><br />
<a href="http://www.robotcoupe.com.au" title="Robot Coupe"><img align="left" alt="Bernard Chu" src="http://empaustralia.com.au/robot-coupe/Chu.jpg" style="padding:12px 0px 0px 0px" /></a><br />
<span style="font-family:comic sans ms,cursive;font-size:13px;"><font color="#ed1c24"><strong>Bernard Chu</strong><br />
LuxBite (South Yarra) and<br />
T by LuxBite (Melbourne CBD)</font></span></p>
</td>
</tr>
</tbody>
</table>
<table bgcolor="#ed1c24" border="0" cellpadding="0" cellspacing="0" width="600">
<tbody>
<tr>
<td align="center" style="padding:10px 0px 10px 0px"><span style="font-family:comic sans ms,cursive;font-size:13px;"><font color="#ffffff">Call 02 9478 0300 to arrange a FREE demo in your kitchen.</font></span><br />
<a href="mailto:orders@robotcoupe.com.au"><img src="http://empaustralia.com.au/robot-coupe/email.jpg" style="padding: 5px 0px 0px 0px" /></a></td>
</tr>
</tbody>
</table>
</body>
</html>
2 answers
solution1
1 2015-07-07 18:38:36
the code is not created with HTML email in mind. I did a quick fix on the email. It is by no means comprehensive - not responsive or mobile friendly at all. But this should now work 'betterish' in Outlook for you as well as in other email clients.
There is still a lot wrong with the code and layout - I would look up some design and development walkthroughs, etc and learn how HTML email is correctly formatted.
See code:
<html>
<head>
<title>Robot Coupe</title>
</head>
<body>
<p><%body%></p>
<table border="0" cellpadding="0" cellspacing="0" style="border-width:1px; border-style:solid; border-color:red;" width="600">
<tbody>
<tr>
<td style="line-height:0px; mso-line-height-rule:exactly;">
<table align="center" width="100%" cellpadding="0" cellspacing="0" style="border-collapse:collapse;">
<tr>
<td align="left"><a href="http://www.robotcoupe.com.au" title="Robot Coupe"><img src="http://empaustralia.com.au/robot-coupe/logo.jpg" /></a></td>
</tr>
<tr>
<td align="left"><a href="http://www.robotcoupe.com.au" title="Robot Cook"><img src="http://empaustralia.com.au/robot-coupe/robot-cook.jpg" /></a></td>
</tr>
</table>
<table align="center" width="100%" cellpadding="0" cellspacing="0" style="border-collapse:collapse;">
<tr>
<td align="left">
<table align="center" width="100%" cellpadding="0" cellspacing="0" style="border-collapse:collapse;">
<tr>
<td align="left">
<table align="center" width="100%" cellpadding="0" cellspacing="0" style="border-collapse:collapse;">
<tr>
<td align="left" valign="top" style="vertical-align:top; padding-top:4px;"><img src="http://empaustralia.com.au/robot-coupe/bullet.jpg" /></td>
<td align="left" style="font-family:comic sans ms,cursive; padding-bottom:10px;">Emulsify, grind, blend, chop, mix and<br />
knead to perfection.</td>
</tr>
<tr>
<td align="left" valign="top" style="vertical-align:top; padding-top:4px;"><img src="http://empaustralia.com.au/robot-coupe/bullet.jpg" /></td>
<td align="left" style="font-family:comic sans ms,cursive; padding-bottom:10px;">Hot, cold, sweet or savoury - it’s all up<br />
to you!</td>
</tr>
<tr>
<td align="left" valign="top" style="vertical-align:top; padding-top:4px;"><img src="http://empaustralia.com.au/robot-coupe/bullet.jpg" /></td>
<td align="left" style="font-family:comic sans ms,cursive; padding-bottom:10px;">High speed and enviable cutting<br />
quality with the ability to heat<br />
up to 140°C</td>
</tr>
<tr>
<td align="left" valign="top" style="vertical-align:top; padding-top:4px;"><img src="http://empaustralia.com.au/robot-coupe/bullet.jpg" /></td>
<td align="left" style="font-family:comic sans ms,cursive; padding-bottom:20px;">3.7 litre stainless-steel bowl</td>
</tr>
</table>
<table align="center" width="100%" cellpadding="0" cellspacing="0" style="border-collapse:collapse;">
<tr>
<td align="left" style="font-family:comic sans ms,cursive; font-size:13px;padding-left:9px;"><font color="707070">“I don't see it as a machine, I see it as one of<br />
my chefs, with no days off. It's true, apart<br />
from doing our daily recipes in the machine,<br />
we’re also constantly creating new techniques<br />
and recipes with the Robot Cook. It's so<br />
awesome I’ll bring it to the next staff party, it’s<br />
part of my kitchen team!”</font></td>
</tr>
<tr>
<td align="center">
<table align="center" width="100%" cellpadding="0" cellspacing="0" style="border-collapse:collapse;">
<tr>
<td align="left" style="font-family:comic sans ms,cursive; font-size:13px;padding-left:9px; padding-top:10px;">
<a href="http://www.robotcoupe.com.au" title="Robot Coupe"><img align="left" alt="Bernard Chu" src="http://empaustralia.com.au/robot-coupe/Chu.jpg" /></a></td>
<td align="left" style="font-family:comic sans ms,cursive; font-size:13px;padding-left:9px; padding-top:10px;"><font color="#ed1c24"><strong>Bernard Chu</strong><br />
LuxBite (South Yarra) and<br />
T by LuxBite (Melbourne CBD)</font></td>
</tr>
</table>
</td>
</tr>
</table>
</td>
<td align="right"><img align="right" height="524" src="http://empaustralia.com.au/robot-coupe/robot-cook.png" width="266" /></td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</tbody>
</table>
<table bgcolor="#ed1c24" border="0" cellpadding="0" cellspacing="0" width="600">
<tbody>
<tr>
<td align="center" style="padding:10px 0px 10px 0px"><span style="font-family:comic sans ms,cursive;font-size:13px;"><font color="#ffffff">Call 02 9478 0300 to arrange a FREE demo in your kitchen.</font></span></td>
</tr>
<tr>
<td align="center" style="padding:0 0px 10px 0px">
<a href="mailto:orders@robotcoupe.com.au"><img src="http://empaustralia.com.au/robot-coupe/email.jpg" style="padding: 5px 0px 0px 0px" /></a></td>
</tr>
</tbody>
</table>
</body>
</html>
solution2
0 2015-07-06 09:41:48
The fact is that Outlook uses Word (not IE) for rendering HTML markup of emails. All supported and unsupported HTML elements, attributes, and cascading style sheets properties you may find described in the following articles in MSDN:
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
Django form isn't showing the correct fields
HTML Email Template not showing background image in Outlook 365 anymore
Email template that breaks in outlook
Outlook email template style are broken
Email template spacing breaks in Outlook
Font issue on outlook email template
Html email template not working outlook
Email Template Outlook alignment issue
HTML email template in Outlook 2022
Microsoft Outlook Email border overwriting CSS
Related Tags