使用php / outlook发送html电子邮件不能正确显示html
i am using php to send a html email like so in my send_email.php file:
<?php
// multiple recipients
$to = 'mark.obrien2014@inbox.com';
// subject
$subject = 'Hewden New Supplier Setup';
// message
$message = file_get_contents('../../assets/email/email.php');
// To send HTML mail, the Content-type header must be set
$headers = 'MIME-Version: 1.0' . "
";
$headers .= 'Content-type: text/html; charset=iso-8859-1' . "
";
// Additional headers
$headers .= 'To: Mark <mark.obrien2014@inbox.com>' . "
";
$headers .= 'From: Hewden New Supplier Setup <NewSuppliers@hewden.co.uk>' . "
";
$headers .= 'Cc: purchasing@hewden.co.uk' . "
";
$headers .= 'Bcc: birthdaycheck@example.com' . "
";
// Mail it
mail($to, $subject, $message, $headers);
?>
I am including my email html in a seperate file email.php using
$message = file_get_contents('../../assets/email/email.php');
I am testing my email has been sent using Outlook 2010 on windows and also testing it in a normal webmail. The email sends fine on both but in outlook the html doesn't seem to display properly. My email looks fine in every other email program and all other webmail. can someone please show me what i am doing wrong? thanks in advance
my email html:
<html>
<head>
<title>Birthday Reminders for August</title>
</head>
<body leftpadding="0" offset="0" paddingheight="0" paddingwidth="0" toppadding="0" style="padding-top: 0; padding-bottom: 0; padding-top: 0; padding-bottom: 0; background:#F6F6F6; width: 100% !important; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; -webkit-font-smoothing: antialiased;">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td align="center">
<table align="center" class='bgBody' border="0" cellpadding="0" cellspacing="0" style="font-family:helvetica, sans-serif; background:#fff; border:1px solid #999; margin-top:50px;" width="750">
<tr>
<td align="center">
<img src="http://hewdenportal.co.uk/assets/email/images/bigImg.png" width="750" height="258" />
</td>
</tr>
</table>
</tr>
</table>
<table align="center" class='bgBody' border="0" cellpadding="0" cellspacing="0" style="font-family:helvetica, sans-serif; font-weight:100; font-size:16px; background:#000; color:#4f4f4f; border:1px solid #999; margin-top:20px;" width="752">
<tr>
<td align="left">
<div class="container" style="min-height:200px; width:690; background:#fff; padding-left:30px; padding-right:30px; padding-top:20px; padding-bottom:20px; font-family:helvetica, sans-serif; font-weight:100; font-size:15px;">
<div class="text" style="width:72%;">
<h1 style="font-family:helvetica, sans-serif; font-weight:100; font-size:20px;">Getting Started</h1>
<p>Thanks for taking an Interest in joining Hewden as an approved supplier.<br/>We care about providing a good quality to service to Customer's and Supplier's alike.</p>
<p>As part of the Hewden journey blah blah blah.</p>
</div>
<div class="find_more" style="width:110px; border:1px solid #666; height:20px; background:rgba(255,195,82,1); margin-top:10px; float:right; position:relative; cursor:pointer; cursor:hand; text-align:center; padding:6px;">Find out More ></div>
</div>
</td>
</tr>
</table>
</body>
</html>
email in webmail showing correct html:
email in outlook with distorted html:
Using div in html emails is a little tricky and if you can get away with table that'd be easier in general. I would guess the specific issue here is that Outlook 2010 doesn't support width, position, or float for div. Campaign Monitor wrote a nice roundup of div compatibility here.
Use or <button> tags instead of a <div> tag. As far as I know (I send HTML emails pretty often), buttons are well more accepted on Outlook and other email providers. HTML emails are very annoying sometimes... :)