This is my HTML file, which I am trying to send in the email. I have applied inline CSS. I am passing exactly the same HTML in the email body. But when I see the email in my mailbox(outlook). The design gets distorted and when I inspected it, there are extra HTML tags and CSS is also not there.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Newsletter : Package Notification</title>
</head>
<body style=" font-family: Arial, Helvetica, sans-serif;color: #252E3B;margin: 0px;">
<div style=" width: 600px;margin: auto;">
<table width="100%"
style="margin: 0px;background: #252E3B;color: #fff;font-size: 20px;font-weight: bold;opacity: 1;text-align: center;padding: 49px 0px;">
<tr>
<td style="font-size: 20px; margin: 0px; padding: 0px;">You have delievery from</td>
</tr>
<tr>
<td style="margin: 0px;padding: 0px; font-size: 30px;">CompanyName</td>
</tr>
<tr>
<td style="font-size: 20px;padding-top: 28px;">Your shipment will be delievered by</td>
</tr>
<tr>
<td style="margin: 0px;padding: 0px;text-transform: uppercase; font-size: 30px;">Carrier</td>
</tr>
</table>
<table width="100%" style="color:rgb(37,46,59); font-family:Arial,Helvetica,sans-serif; font-size:medium;background: #EEEEEE;text-align: center;padding: 26px 0px;">
<thead>
<tr>
<td style="font-size: 20px;margin:0px 0px 10px 0px; font-weight: bold;">
Tracking Number:
</td>
</tr>
<tr>
<td style="background-color: rgb(238, 238, 238);height:40px;width:475px;">
<a href="http://www.google.com" target="_blank" rel="noopener noreferrer"
data-auth="NotApplicable"
style="color: #4189E4;font-size: 30px;font-weight: bold;display:block;">trackingNumber</a>
</td>
</tr>
</thead>
</table>
<!-- <table width="100%" style=" background: #EEEEEE;text-align: center;padding: 26px 0px;">
<tr>
<td style="font-size: 20px;margin:0px 0px 10px 0px; font-weight: bold;">
Tracking Number:
</td>
</tr>
<tr>
<td>
<a style="color: #4189E4;font-size: 30px;font-weight: bold;" target="_blank"
href="javascript:void(0)">
@trackingNumber
</a>
</td>
</tr>
</table> -->
<table width="100%" style="background: #F7F7F8;line-height: 30px;padding: 30px 30px 0px 30px;">
<tr>
<td style="font-size: 20px; text-align: center; margin: 0px 0px 10px 0px;font-weight: bold; ">
Parcel Details
</td>
</tr>
</table>
<table width="100%" cellpadding="5" cellspacing="0" border="0"
style="background: #F7F7F8;line-height: 30px;padding: 10px 30px 30px 30px;">
<tr>
<td width="50%" style="line-height: 20px;">
<strong>From :</strong>
</td>
<td style="line-height: 20px;">
@CompanyName
</td>
</tr>
<tr>
<td width="50%" style="line-height: 20px;">
<strong>Tracking number :</strong>
</td>
<td style="line-height: 20px;">
@trackingNumber
</td>
</tr>
<tr>
<td width="50%" style="line-height: 20px;">
<strong>Service :</strong>
</td>
<td style="line-height: 20px;">
@Service
</td>
</tr>
<tr>
<td width="50%" style="line-height: 20px;">
<strong> Number of Parcels :</strong>
</td>
<td style="line-height: 20px;">
@NumberOfPieces
</td>
</tr>
<tr>
<td width="50%" style="line-height: 20px;">
<strong> Parcel Weight :</strong>
</td>
<td style="line-height: 20px;">
@Weight
</td>
</tr>
<tr>
<td width="50%" style="line-height: 20px;">
<strong> Schedule Delievery :</strong>
</td>
<td style="line-height: 20px;">
@DeliveryDate
</td>
</tr>
<tr>
<td width="50%" style="line-height: 20px;">
<strong> Reference :</strong>
</td>
<td style="line-height: 20px;">
@Reference
</td>
</tr>
<tr>
<td width="50%" style="line-height: 20px;">
<strong> Ship To :</strong>
</td>
<td style="line-height: 20px;">
@DelieveryAddress
</td>
</tr>
</table>
<table width="100%" style="text-align: center;font-size: 12px;margin: 15px 10px 30px 10px;">
<tr>
<td style="padding-bottom: 10px;text-align: center;">
<img src="logo.png" title="logo" alt="logo" />
</td>
</tr>
<tr>
<td style="padding-bottom: 10px;text-align: center;">
Unsubscribe?
</td>
</tr>
<tr>
<td style="padding-bottom: 10px;text-align: center;">
We haven't signed you up to a mailing list, we'll only use your email address to contact
you about this parcel.
</td>
</tr>
<tr>
<td style="padding-bottom: 10px;text-align: center;">
<a href="http://www.google.com" target="_blank" rel="noopener noreferrer"
data-auth="NotApplicable"
style="color: #000000;font-size: 12px;display:inline-block;"></a>
</td>
</tr>
</table>
</div>
</body>
</html>
There is another template that is working fine. Here it is -
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Newsletter : Package Notification</title>
<style type="text/css">
p, table
{
font: normal 12px Arial;
color: #464646;
line-height: 18px;
}
p strong, table strong, a
{
color: #134688;
}
</style>
</head>
<body>
<table width="600" cellpadding="0" cellspacing="0" border="0" align="center" style="border: solid 1px #cccccc">
<tr>
<td style="height: 46px">
<img src="@PageTopBGImage" alt="" />
</td>
</tr>
<tr>
<td style="background: #ebebeb; padding: 25px 0">
<table width="563" cellpadding="0" cellspacing="0" border="0" align="center">
<tr>
<td style="height: 11px"><img src="@PageTopImage" alt="" /></td>
</tr>
<tr>
<td style="background: #ffffff; border-left: solid 1px #bfbfbf; border-right: solid 1px #bfbfbf;
padding: 5px 15px">
<!-- <p style="font-weight: bold;">
Dear @Username</p>
<p>-->
A package is being sent to you with tracking number <a target="_blank" href="@trackingLink">
<strong>@trackingNumber</strong></a> from <strong>@CompanyName</strong></p>
@CollectionDate @DeliveryDate
<table width="100%" cellpadding="5" cellspacing="0" border="0">
<tr>
<td width="5" valign="top">
-
</td>
<td>
<br />
</td>
</tr>
<tr>
<td valign="top">
-
</td>
<td>
<br />
<strong>You can easily do this.</strong>
</td>
</tr>
<tr>
<td valign="top">
-
</td>
<td>
<br />
<strong>We can do this for you.</strong>
</td>
</tr>
<tr>
<td valign="top">
-
</td>
<td>
<br />
<strong>The system does this.</strong>
</td>
</tr>
</table>
<p>
</p>
</td>
</tr>
<tr>
<td><img src="@PageBottomImage" alt="" /></td>
</tr>
</table>
</td>
</tr>
<tr style="display:none">
<td style="height: 134px">
<img src="@PageFooterImage" alt="" />
</td>
</tr>
</table>
</body>
</html>
Can anyone help me with this? stuck for many days. Thanks in advance :)