Email Templates, HTML not Formatting Correctly

Greetings old friends!

I’m trying to configure the layout of my email templates and I can’t get them to look the way the browser renders the same HTML. In particular, the font doesn’t set correctly and some footer

This is what I want it to look like:

This is what it looks like in the preview:

And this is what it looks like in my final delivered email:

Here’s the html:

<link rel="stylesheet"
html {
	background-color: #fafafa;
body {
  	font-family: "open sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  	background-color: #fafafa;
  	font-size: 14px;
  	color: #222222;
  	overflow-x: hidden;
	position: relative;
	max-width: 800px;
  	margin: 20px auto 80px;
  	border: .5px solid #dddddd;
  	border-radius: 12px;
  	background-color: #ffffff;
h1 {
	font-size: 28px;
	font-weight: 100;
h2 {
	font-size: 24px;
	font-weight: 100;
h3 {
	font-size: 20px;
	font-weight: 100;
a {
	color: #1ab394;
	text-decoration: none;
a:hover {
	color: #169a7f;
	cursor: pointer;
.center {
    text-align: center;
.offset-left {
    margin-left: 25px;
.mmojo-green {
    color: #1ab394;
.bold {
    font-weight: bold;
.main-wrapper {
	overflow: hidden;
	padding: 20px;
	border-radius: 8px;
.content-wrapper {
	margin: 40px 20px;
.content-wrapper hr {
	clear: left;
	margin: 20px 0px;
	border: .5px solid #eeeeee;
.header span {
	font-size: 18px;
	font-weight: 600;
	color: #1ab394;
.header .visit-us {
	font-size: 12px;
	margin-top: -10px;
	margin-left: 124px;
.header hr {
	clear: left;
	margin: 20px 0px 10px;
	border: .5px solid #cccccc;
.footer {
	height: 30px;
	padding: 20px 6px 6px;
	font-size: 12px;
	color: #888888;
	background-color: #eeeeee;
	border-radius: 6px;
.copyright {
	float: left;
	margin-left: 20px;
.privacy {
	float: right;
	margin-right: 40px;
.mmlogo {
	vertical-align: middle;
	<div class="main-wrapper">
		<div class="header">
			<a href=""><img class="mmlogo" alt="mmojo" src=""/></a>
			<span> &bull; the b2b industry's marketing data everything platform.</span>
			<div class="visit-us">visit us at <a href="" target="mmojo_website"></a></div>
		<div class="content-wrapper">

A password reset request was made for your mmojo account. If you did not make this request, please contact <a href=""></a> immediately.
Click on the following link to reset your password:
<a  href="${resetPasswordLink}"
The link will be valid for 24 hours.

		<div class="footer">
			<div class="copyright">&copy; Copyright 2018</div>
			<div class="privacy"><a href="" target="mmojo_privacy">privacy policy</a></div>

Are there some unsupported tags that I should know about? Alternatives to the way I’m doing things? Please advise.

Thank you,


Believe it or not, it’s still 2004 in HTML-email-world and you have to use inline styles last time I checked:

This applies to any HTML emails, not just the ones Okta sends. If you try inlining the styles on each element (instead of <style>), you should see better results. Also, see this table:

1 Like

Thanks Nate. I put everything in-line and got exactly what I wanted.

Once again, I appreciate the prompt and succinct response.


1 Like

No problem. Glad it worked!

Thanks, but you can try this email template too