<!--[if mso]>
<v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="http://www.EXAMPLE.com/" style="text-align: center;font-size: 14px;height: 143px;width: 143px;" arcsize="50%" strokecolor="#fbe2a6" strokesize="4px" stroke="f" fillcolor="#f7c54d">
<w:anchorlock/>
<center style="color:#ffffff;font-family:sans-serif;font-size:13px;">
<div class="yellow-circle">
<div class="number" style="color: #fff;font-weight: 700;font-size: 24px;line-height: 1;padding-bottom: 2px;">#1</div>
<div class="round-title" style="font-size: 11px;font-weight: 700;color: #1f3b85;margin-bottom: 5px;">Top Performers<br>on Social Mobility</div>
<div class="round-title-small" style="color: #1f3b85;font-size: 11px;">2021 US News<br> World Report</div>
</div>
</center>
</v:roundrect>
<![endif]-->
<!--[if !mso]> <!-->
<table width="100%" cellspacing="0" cellpadding="0" border="0">
<tbody>
<tr>
<td style="text-align: center;background: #f7c54d;font-size: 14px;height: 143px;padding: 0 6px 5px;border-radius: 50%;border: 4px solid #fbe2a6;">
<div class="yellow-circle">
<div class="number" style="color: #fff;font-weight: 700;font-size: 26px;line-height: 1;padding-bottom: 2px;">#1</div>
<div class="round-title" style="font-size: 13px;font-weight: 700;color: #1f3b85;margin-bottom: 5px;">Top Performers<br>on Social Mobility</div>
<div class="round-title-small" style="color: #1f3b85;font-size: 13px;">2021 US News<br> World Report</div>
</div>
</td>
</tr>
</tbody>
</table>
<!-- <![endif]-->
design
now it is look like this
how to add stroke like in design
Instead of strokesize="4px" use strokeweight="4px".
However, you generally want to use points not pixels for Vomit Language (VML). 4px = 4 x 0.75 = 3pt. "Using points also ensures the border will resize properly in Outlook 120DPI." (https://github.com/hteumeuleu/email-bugs/issues/86)
Also, stroke="f" turns off the stroke (and it should be stroked with a d). So change to stroked="true". (HT: https://www.goodemailcode.com/email-enhancements/svg-to-vml, and includes further spec details)
Related
Can anybody provide me with the code for this design? in the email template, I need to make this design. Text can be changed dynamically.
Email clients usually have poor support for properties like position or negative margin values. See:
Can I email… position
Can I email… margin
However, there’s a popular technique among email developers called “Faux absolute position”. The idea is to use max-height in a parent element to limit the space taken by children element in the flow. You can then position children element using positive margin values or text-align. You can read this article about it.
<!--[if mso]>
<table border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:530px; background-color:#fffff5;"><tr><td>
<![endif]-->
<div style="max-width:530px; margin:auto;">
<table border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:530px; background-color:#fffff5;">
<tr>
<td style="padding:0 20px 20px; border:1px solid #eee;">
<div style="max-height:17px;">
<div style="margin:0 20px; padding:5px 20px; background:#fc2d6a; border-radius:5px;">
<p style="margin:0; color:#fff; font:16px/1.5 sans-serif; text-align:center;">
You’ve been referred!!!
</p>
</div>
</div>
<table border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%;">
<tr>
<td style="padding:20px; border:2px dashed #fc2d6a;">
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
<!--[if mso]>
</td></tr></table>
<![endif]-->
This wouldn't work as it is in Outlook on Windows and you’d need to add a VML fallback version.
I am creating the header shown below for an email template. As you can see, the text is slightly offset from the center of the email. This happens because I have two table cells: one for the logo and another for the text. I can center the text within its cell, but that cell isn't 100% of the width due to the the logo cell taking up 74 pixels. I can shift the header to the left using margin-left in most email clients, but Outlook and Gmail both don't support margins, and I need to support both clients. How can I go about getting the text centered in Outlook and Gmail?
<body style="padding:0; margin:0">
<table border="0" cellpadding="0" cellspacing="0" style="margin: 0; padding: 0; padding-top: 25px;" width="100%">
<tr>
<td align="center" valign="top">
<table border="0" cellpadding="0" cellspacing="0" style="margin: 0; padding: 0; min-height:76px;" width="600px" class="100p">
<tr>
<td background="http://s3-us-west-2.amazonaws.com/sheldon-welcome-email/header.png" bgcolor="#39B491" width="600px" valign="top" class="100p">
<!--[if gte mso 9]>
<v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:600px;height:76px;">
<v:fill type="tile" src="http://s3-us-west-2.amazonaws.com/sheldon-welcome-email/header.png" color="#39B491" />
<v:textbox inset="0,0,0,0">
<![endif]-->
<div>
<table border="0" cellpadding="0" cellspacing="0" width="100%" class="100p">
<tr>
<td width="74px" align="center" style="padding-top: 10px;">
<div style="width:44px">
<img src="http://s3-us-west-2.amazonaws.com/sheldon-welcome-email/my-id-care-logo.png" height="52px" width="44px" class="100p" />
</div>
</td>
<td width="*%" align="center">
<h3 style="color: white; font-size: 14px; margin: 0px; margin-left: -44px; margin-top: 10px; padding: 0px;"><font face="'Roboto', Arial, sans-serif">Welcome to MyIDCare</font></h3>
<h1 style="color: white; font-size: 20px; margin: 0px; margin-left: -44px; padding: 0px;"><font face="'Roboto', Arial, sans-serif">LET'S GET STARTED</font></h1>
</td>
</tr>
</table>
</div>
<!--[if gte mso 9]>
</v:textbox>
</v:rect>
<![endif]-->
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
Took me a little while to understand your question but i think i got it. You want to center the text within the outer table regardless of the logo being there, right? If thats a yes, then its just a matter of adding another 74px block on the right of the text.
Have a look at the code to see what i did:
<table border="0" cellpadding="0" cellspacing="0" style="margin: 0; padding: 0; padding-top: 25px;" width="100%">
<tr>
<td align="center" valign="top">
<table border="0" cellpadding="0" cellspacing="0" style="margin: 0; padding: 0; min-height:76px;" width="600px" class="100p">
<tr>
<td background="http://s3-us-west-2.amazonaws.com/sheldon-welcome-email/header.png" bgcolor="#39B491" width="600px" valign="top" class="100p">
<!--[if gte mso 9]>
<v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:600px;height:76px;">
<v:fill type="tile" src="http://s3-us-west-2.amazonaws.com/sheldon-welcome-email/header.png" color="#39B491" />
<v:textbox inset="0,0,0,0">
<![endif]-->
<div>
<table border="0" cellpadding="0" cellspacing="0" width="100%" class="100p">
<tr>
<td width="74px" align="center" style="padding-top: 10px;">
<div style="width:44px">
<img src="http://s3-us-west-2.amazonaws.com/sheldon-welcome-email/my-id-care-logo.png" height="52px" width="44px" class="100p" />
</div>
</td>
<td width="*%" align="center">
<h3 style="color: white; font-size: 14px; margin: 0px; margin-top: 10px; padding: 0px;"><font face="'Roboto', Arial, sans-serif">Welcome to MyIDCare</font></h3>
<h1 style="color: white; font-size: 20px; margin: 0px; padding: 0px;"><font face="'Roboto', Arial, sans-serif">LET'S GET STARTED</font></h1>
</td>
<td width="74px" align="center">
</td>
</tr>
</table>
</div>
<!--[if gte mso 9]>
</v:textbox>
</v:rect>
<![endif]-->
</td>
</tr>
</table>
</td>
</tr>
</table>
Cheers
Sometimes when I sent emails I receive answers stating that my email was empty. It seems very random and so far I have not been able to reconstruct this problem (have tested it on Gmail, Yahoo, AOL, Outlook, Mozilla Thunderbird, ... to no avail). It seems that only my email signature and/or sometimes also just the beginning of my email is displayed.
I've checked for font problems and problems within the html code of the mail, etc.
Where should I start?
Here's some sample code of the template I use that seems to create this error at random:
<!DOCTYPE html>
<html lang="en">
<head>
<title>
...
</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--[if !mso]>
<!-- -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!--
<![endif]-->
<style>
html, body{
margin: 0;
padding: 0;
}
</style>
</head>
<body style="width: 100%; margin: 0;">
<table bgcolor="#0568a6" border="0" style="background-color:#0568a6;border-collapse:collapse;border:0;margin:0;padding:0;width:100%">
<tbody>
<tr>
<td style="width:100%;max-width:600px;margin:0 auto">
<div style="display:block;width:98%;max-width:588px;margin:0 auto;padding:3px 1%;background-color:#0568a6">
<table bgcolor="#0568A6" align="center" style="background-color:#0568a6;border-collapse: collapse;border:0;margin:0;padding:0;width:100%">
<!--[if mso]>
<table align="center" bgcolor="#0568A6" width="588" style="background-color:#0568a6;border-collapse:collapse;border:0;margin:0;padding:0;width:588px">
<![endif]-->
<tbody>
<tr>
<td style="display:block;width:100%;max-width:588px;margin:0 auto;padding:0;background-color:#0568a6">
<img src="logo.jpg" alt="Logo" width="125" height="26" border="0" align="right" style="float: right;border:0px !important" />
</td>
</tr>
</tbody>
<!--[if mso]>
</table>
<![endif]-->
</table>
</div>
</td>
</tr>
</tbody>
</table>
<table style="width: 100%; border-collapse: collapse;" align="center" border="0">
<tbody>
<tr>
<td style="display: block; max-width: 600px; margin: 0 auto; clear: both;">
<div style="display: block; width:98%; max-width: 588px; margin: 0 auto; padding:35px 1% 28px; color: #111111;">
<table style="border-collapse: collapse; width: 100%;">
<!--[if mso]>
<table align="center" width="588" style="border-collapse: collapse;">
<![endif]-->
<tbody>
<tr>
<td style="padding: 0px 0px 4px 0px; width: 100%; max-width: 588px;">
<p style="font-family:Verdana,Geneva,sans-serif; color: #222222; margin-bottom: 15px; font-weight: normal; font-size: 13pt; line-height: 1.25;">
Content
</p>
</td>
</tr>
<!--[if mso]>
</table>
<![endif]-->
</tbody>
</table>
</div>
</td>
</tr>
</tbody>
</table>
<table style="border-collapse: collapse; width: 100%;" align="center" bgcolor="#efefef" border="0">
<tbody>
<tr>
<td style="display: block; max-width: 600px; margin: 0 auto; clear: both;">
<div style="display: block; max-width: 588px;width:98%; margin: 0 auto; padding: 6px 1% 16px;">
<table style="border-collapse: collapse; width: 100%;" bgcolor="#efefef">
<!--[if mso]>
<table align="center" bgcolor="#efefef" width="588" style="border-collapse: collapse;">
<![endif]-->
<tbody>
<tr>
<td style="padding: 0px 0px 4px 0px; width: 100%; max-width: 588px;">
<p style="font-size: 8.5pt; color: #999999;font-family:Verdana,Geneva,sans-serif; line-height: 1.2; border: 0;">
Footer
<br>
<br>
<a target="_blank" href="%UNSUBSCRIBELINK%" style="font-size: 8.5pt; color: #278ac8 !important; line-height: 1.2; text-decoration: none; border: 0;font-family:Verdana,Geneva,sans-serif;">
<span style="color: #278ac8; text-decoration: none;">
CLICK TO UNSUBSCRIBE
</span>
</a>
</p>
</td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
</tbody>
</table>
</body>
</html>
I found the answer to this problem. It seems to be a bug in (earlier) versions of IE (who guessed it...).
The key part of the problem is the 1% padding right and left in the DIV element that serves as a container.
<body style="width: 100%; margin: 0;">
<table bgcolor="#0568a6" border="0" style="background-color:#0568a6;border-collapse:collapse;border:0;margin:0;padding:0;width:100%">
<tbody>
<tr>
<td style="width:100%;max-width:600px;margin:0 auto">
// this DIV has right and left padding of 1% which causes a bug in IE
<div style="display:block;width:98%;max-width:588px;margin:0 auto;padding:3px 1%;background-color:#0568a6">
<table bgcolor="#0568A6" align="center" style="background-color:#0568a6;border-collapse: collapse;border:0;margin:0;padding:0;width:100%">
<!--[if mso]>
... and so on
The result was that in some mail clients (Gmail, AOL, Comcast, maybe some others) the container of the message was rendered with a HUGE width (approx. 100,000px, for no obvious reason of course) of which the padding took ca. 1000px on each side.
As the content was centered, it was simply out of view for the person opening the message (no normal person has such a wide screen)
I replaced the 1% padding with a 3px padding and that solved the problem.
Below is a screen shot to show the problem, rendered in IE8. The solution is to change the padding as described above.
I'm working on an HTML email signature. It displays properly when you send it, but when a recipient replies to or forwards the email, the spacing gets messed up and there are some other problems.
Before (yay):
After (boo):
Here's the code that the signature is generated from:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled</title>
<!--[if !mso]><!-->
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<!--<![endif]-->
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
</head>
<body>
<!-- 569 when finalizing (don't include px sufix)-->
<table border-collapse="collapse" width="569" style="border-width: 0; font-family: 'Proxima Nova', Helvetica, Arial, Sans-serif; color: #303130;" border="0" cellpadding="0" cellspacing="0">
<tr>
<td>
<!-- Image table -->
<table border-collapse="collapse" width="83px" align="left" border="0" cellspacing="0" cellpadding="0" style="border: #ffffff;">
<tr>
<td bgcolor="#ffffff" style="padding: 0px; font-family: 'Proxima Nova', Helvetica, Arial, Sans-serif;">
<p style="mso-table-lspace: 0; mso-tablerspace: 0; margin: 0;">
<!-- 1. Headshot image (src and alt) -->
<img src="http://www.levelfunded.com/email/russ_carpel.jpg" alt="Russ Carpel headshot" style="display: block;"/>
</p>
</td>
</tr>
</table>
<!-- Contact info table -->
<table border-collapse="collapse" width="329" height="72px" align="left" border="0" cellspacing="0" cellpadding="0" align="right" style="border:1px solid #ffffff;">
<tr>
<td bgcolor="#ffffff" style="padding: 0px; vertical-align: top; font-family: 'Proxima Nova', Helvetica, Arial, Sans-serif;">
<p style="mso-table-lspace: 0; mso-tablerspace: 0; margin: 0;">
<p style="font-size: 14px; margin: 0px; margin-top: 8px;">
<b>
<!-- 2. Name -->
<span>Russ Carpel</span>
</b>
<!-- 3. Title -->
<span style="font-size: 13px;">CEO</span>
</p>
<p style="font-size: 14px; margin: 0px; margin-top: 5px;">
<!-- 4. Mobile number (href and copy) -->
<span>(888) 888-8888 m</span>
<span style="color: #bababa;"> | </span>
<!-- 5. Email (href and copy) -->
<span>
address#domain.com
</span>
<span>
<!-- 6. LinkedIn profile -->
<a href="https://www.linkedin.com/in/profile" target="_blank">
<img src="http://levelfunded.com/email/linkedIn.jpg" alt="LinkedIn" style="vertical-align: top; margin-top: 1px"/>
</a>
</span>
</p>
<p style="font-size: 14px; margin: 0px; margin-top: 5px;">
<!-- 7. Office number -->
<span>(888) 888-8888 o</span>
<span style="color: #bababa;"> | </span>
<span>levelfunded.com</span>
</p>
</p>
</td>
</tr>
</table>
<!-- Logo table -->
<table border-collapse="collapse" width="107" height="72px" align="left" border="0" cellspacing="0" cellpadding="0" style="border:1px solid #ffffff;">
<tr>
<td bgcolor="#ffffff" valign="bottom" style="font-family: 'Proxima Nova', Helvetica, Arial, Sans-serif;">
<p style="mso-table-lspace: 0; mso-tablerspace: 0; margin: 0;">
<a href="http://levelfunded.com" target="_blank">
<img src="http://levelfunded.com/email/levelfundedLogoCities.jpg" alt="LevelFunded Logo"/ style="display: block;">
</a>
</p>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td colspan="3">
<!-- Speech carrot table -->
<table border-collapse="collapse" align="left" border="0" cellspacing="0" cellpadding="0" style="font-family: 'Proxima Nova', Helvetica, Arial, Sans-serif; color: #303130; padding-top: 10px; padding-left: 22px; border-width: 0;">
<tr>
<td>
<img src="http://www.levelfunded.com/email/triangle.jpg" alt="Speech carrot" style="display: block;"/>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<!-- Gray box cell -->
<td colspan="3" style="padding-left: 8px; padding-top: 8px; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; background-color: #e8e8e8;">
<!-- Video link table -->
<table border-collapse="collapse" align="left" border="0" cellspacing="0" cellpadding="0" style="font-family: 'Proxima Nova', Helvetica, Arial, Sans-serif; color: #303130; padding-bottom: 8px; padding-right: 8px; border:1px solid #e8e8e8;">
<tr>
<td bgcolor="#e8e8e8" style="font-family: 'Proxima Nova', Helvetica, Arial, Sans-serif;">
<p style="mso-table-lspace: 0; mso-tablerspace: 0; margin: 0;">
<a href="http://levelfunded.com/video.html">
<img src="http://levelfunded.com/email/videoLinkImg-trimmed.jpg" alt="Immediately reduce health benefits costs by $50K, possibly $250K or more. Click to watch video." style="display: block; padding: 0px; margin: 0px;"/>
</a>
</p>
</td>
</tr>
</table>
<!-- Article link table -->
<table border-collapse="collapse" align="left" border="0" cellspacing="0" cellpadding="0" style="font-family: 'Proxima Nova', Helvetica, Arial, Sans-serif; color: #303130; padding-bottom: 8px; padding-right: 8px; border:1px solid #e8e8e8;">
<tr>
<td bgcolor="#e8e8e8" style="font-family: 'Proxima Nova', Helvetica, Arial, Sans-serif;">
<p style="mso-table-lspace: 0; mso-tablerspace: 0; margin: 0;">
<a href="http://www.chicagotribune.com/business/ct-small-business-insurance-1214-biz-20141214-story.html">
<img src="http://levelfunded.com/email/articleLinkImg-trimmed.jpg" alt="Click to read Chicage Tribune article" style="display: block;"/>
</a>
</p>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td colspan="3">
<table border-collapse="collapse" align="left" border="0" cellspacing="0" cellpadding="8" style="font-family: 'Proxima Nova', Helvetica, Arial, Sans-serif; color: #7e7e7e; font-size: 10px; line-height: 12px; border-width: 0;">
<tr>
<td>
This email is confidential communication from Level Funded Health Partners LLC and may not be forwarded without the expressed written consent of the company. Level Funded Health Partners LLC is a DE LLC, File #8888888. The company is a U.S. based licensed insurance agency entity. Delaware insurance agency entity license #8888888.
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
I understand that when the recipient composes and sends their reply, their email client has to re-encode the email and that creates the possibility for these formatting errors. (More on that here.)
To be clear, here are the errors I'm talking about:
Extra space above and below the speech carrot graphic
Link formatting is lost (on the blurred section, but you can see that the green is turning into blue
The background color on the gray rectangle is getting dropped
Padding on the two big graphics is getting decreased
Font styling on the disclaimer text is getting dropped
Disclaimer copy is getting truncated after the second # character.
I know trying to answer all of that is too broad. So here's my question:
I've found lots of resources for coding a good html email. However, I haven't been able to find resources on good practices to make it more resilient against these kinds of errors when it is replied to or forwarded. Can anybody point me to any such resources?
Unfortunately you can't account for all of the different email clients out there with regards to email forwarding. They all handle them differently. You can almost certainly count on your HTML formatting being somehow broken when someone forwards an email to someone else with the forward button. (You can do your best though; I commented earlier with some suggestions.)
The alternative is to use a "Forward to a friend" functionality available in some email service providers such as Salesforce (formerly ExactTarget) for example. You would encourage people to click on a link which would take the user to a page to fill in an email address, then the message would be sent to them on the user's behalf. In ET you could also show/hide certain information depending on the context. So, if someone was sending the message via FTAF, any sensitive information could be removed, for example. This all of course depends on your email service provider's offerings.
I have created a very simple html email.
http://staging.xhtml-lab.com/mailtest/
It's working fine in all email clients, except in hotmail.com/outlook.com
in hotmail email is left aligned, it should remain center aligned.
I have added following code as suggested by emailology.org, but it have no effect.
<style type=“text/css”>
/**This is to overwrite Hotmail’s Embedded CSS************/
table {border-collapse:separate;}
a, a:link, a:visited {text-decoration: none; color: #00788a}
a:hover {text-decoration: underline;}
h2,h2 a,h2 a:visited,h3,h3 a,h3 a:visited,h4,h5,h6,.t_cht {color:#000 !important}
p {margin-bottom: 0}
.ExternalClass p, .ExternalClass span, .ExternalClass font, .ExternalClass td {line-height: 100%}
/**This is to center your email in Hotmail************/
.ExternalClass {width: 100%;}
</style>
Any suggestions for what else i can do to make the email center aligned?
This should give you a centered e-mail:
<table style="width: 100%; background: red;">
<tr>
<td>
<center>
<table style="width: 640px; background: blue; margin: 0 auto; text-align: left;">
<tr>
<td>
Your content here
</td>
</tr>
</table>
</center>
</td>
</tr>
</table>
The center-tag is what is required by Outlook and outlook.com. Other clients use the margin attribute. In some clients, text is centered after the center-tag, and therefore the text-align attribute is required.
If you want the width to be variable depending on the screen size, use the following code:
<table style="width: 100%; background: red;">
<tr>
<td>
<center>
<!--[if mso]>
<table style="width: 640px;"><tr><td>
<![endif]-->
<div style="max-width: 800px; margin: 0 auto;">
<table style="background: blue; text-align: left;">
<tr>
<td>
Your content here
</td>
</tr>
</table>
</div>
</center>
<!--[if mso]>
</td></tr></table>
<![endif]-->
</td>
</tr>
</table>
Outlook does not support max-width, and therefore the size is fixed to 640px for Outlook. For all other clients, the width of the e-mail will be the same as that of the viewing window, but maximum 800px.
Please let me know if you find a client where these solutions does not work, so that we can find a solution that works with as many clients as possible.
Here is one I've built that I use as the starting point for all my emails. It works 100% on all major email clients:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title></title></head>
<body style="margin: 0px; padding: 0px background-color: #FFFFFF;" bgcolor="#FFFFFF"><!-- << bg color for forwarding (leave white) // main bg color >> --><table bgcolor="#252525" width="100%" border="0" align="center" cellpadding="0" cellspacing="0"><tr><td>
<!-- CENTER FLOAT WIDTH -->
<table width="600" border="0" valign="top" align="center" cellpadding="0" cellspacing="0"><tr><td><!-- Master Width of the center panel -->
preheader...
<!-- CENTER PANEL BG COLOR (to hide separation of tables on email forward from Outlook (known issue) -->
<table width="100%" border="0" cellpadding="0" cellspacing="0" bgcolor="#FFFFFF"><tr><td><!-- Master Color of the center panel -->
content...
<!-- /CENTER BG COLOR -->
</td></tr></table>
<!-- /CENTER FLOAT WIDTH -->
</td></tr></table>
<!-- /CENTER FLOAT -->
</td></tr></table></body></html>
It has a built in white background for when someone forwards the email on (they can type on white, while the background for the html designed part remains colored). Also the main panel is set with a bgcolor because Outlook puts gaps between tables when it is forwarded.
Hope that helps.
You can also center your email template by adding align="center"to your main table tag:
<body>
<table align="center">
<tr>
<td style="width:600px;">
<!-- content -->
</td>
</tr>
</table>
</body>
Works with GMail and Outlook
<body style="width:600px;margin: auto;">
<!-- content -->
</body>