Email Templates, HTML not Formatting Correctly

Questions
1

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:

image
image.png814×548 28.7 KB

This is what it looks like in the preview:

image
image.png785×557 41.8 KB

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

Here’s the html:

<html>
<link rel="stylesheet"
          href="https://fonts.googleapis.com/css?family=Open+Sans">
<style>
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;
}
</style>
<body>
	<div class="main-wrapper">
		<div class="header">
			<a href="https://www.mmojo.com"><img class="mmlogo" alt="mmojo" src="https://www.mmojo.com/img/email/mmlogo.png"/></a>
			<span> &bull; the b2b industry's marketing data everything platform.</span>
			<div class="visit-us">visit us at <a href="https://www.mmojo.com" target="mmojo_website">www.mmojo.com</a></div>
			<hr/>
		</div>
		<div class="content-wrapper">

<p>
A password reset request was made for your mmojo account. If you did not make this request, please contact <a href="mailto:support@mmojo.com">support@mmojo.com</a> immediately.
</p><p>
Click on the following link to reset your password:
</p><p>
<a  href="${resetPasswordLink}"
href="https://app.mmojo.com/forgot.html?token=${recoveryToken}&email=${user.email}">
https://app.mmojo.com/forgot.html?token=${recoveryToken}&email=${user.email}
</a>
</p><p>
The link will be valid for 24 hours.

		</div>
		<div class="footer">
			<div class="copyright">&copy; Copyright 2018 mmojo.com</div>
			<div class="privacy"><a href="https://www.mmojo.com/privacy.html" target="mmojo_privacy">privacy policy</a></div>
		</div>
	</div>
</body>
</html>

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

Thank you,

–Ray

2

Believe it or not, it’s still 2004 in HTML-email-world and you have to use inline styles last time I checked: https://css-tricks.com/using-css-in-html-emails-the-real-story/

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: https://caniuse.email/

1 Like
3

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

Once again, I appreciate the prompt and succinct response.

–Ray

1 Like
4

No problem. Glad it worked!

5

Thanks, but you can try this email template too

6

This topic was automatically closed 24 hours after the last reply. New replies are no longer allowed.