Wrong display of html e-mail in Outlook
Question
I created an html e-mail with the following code:
<!DOCTYPE html>
<html style="margin:0px;padding:0px;">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
</head>
<body style="margin:0px;padding:0px;">
<div style="background-color:orange;max-width:600px;height:180px;margin-left:auto;margin-right:auto;">
<img src="http://placehold.jp/500x710.png" style="height:180px;width:127px;display:block;border:0;float:right;margin:0px;padding:0px;">
<p style="font-size:40px;padding-left:10px;margin-top:0px;padding-top:40px;">This is my important<br>html test</p>
</div>
</body>
</html>
I also tested this code with Outlook 2016 (Win 7) and I'm getting an unexpected result.
On Outlook 2016 (Win 7) the html gets rendered like this:
instead of the expected like this:
Is this a known Outlook problem? How can I fix it?
Using an image with 127x180 results to the same, only the image is smaller.
1 answers
solution1
1 2019-01-13 19:27:00
-
<div>is problematic in Outlook. It doesn't really work well with it and it's best to avoid it. -
max-widthis ignored by Outlook. -
padding-topis ignored by Outlook. - Outlook ignores
widthandheightin a style sheet. Use<img width="180" />instead.
This works consistently across every email client. It may not be the way I would code an email, I would rather put the image and text in their own <td> for better manipulation, but based on your important html test, I wanted to demonstrate a way to make things work.
<table role="presentation" cellspacing="0" cellpadding="0" border="0" width="600">
<tr>
<td valign="middle" style="padding: 20px; background-color:orange;">
<img src="http://placehold.jp/500x710.png" width="127" height="180" align="right" style="display:block;">
<p style="font-size: 40px; padding-left: 10px; margin-top: 0px;">This is my important<br>html test</p>
</td>
</tr>
</table>
Good luck.
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.