Copy link to clipboard
Copied
Hi! This is my first time posting.
I'm trying to get "Home" "apply for a loan" "location and hours" and about to center themselves in the middle of the email template. I can get the text to align centered but not the words to the whole doc.
I am seriously at my wits end here! Gah!
Here's the header:
<ul>
<tr>
<td valign="top" align="center" id="clear-padding" class="increase-padding-left 50" style="height: 500px;"></a></td>
<li><a href="https://www.foundersfcu.com/">Home</a></li>
<li><a href="https://cs.loanspq.com/Consumer/login/default.aspx?enc2=CjDDGQgp6ViDEpMSQAmj1NmtoCpgP5GFFZ2xTRYN4b60...">Apply for a Loan</a></li>
<li><a href="https://www.foundersfcu.com/locations-and-hours">Location & Hours</a></li>
<li><a href="https://www.foundersfcu.com/about-founders">About</a></li>
</tr>
</a></li>
</ul>
And here's some of the email template.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<div id="fb-root"></div>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.10";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!--[if !mso]><!-->
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<!--<![endif]-->
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title></title>
<style type="text/css">
.ReadMsgBody { width: 100%; background-color: #ffffff; }
.ExternalClass { width: 100%; background-color: #ffffff; }
.ExternalClass, .ExternalClass p, .ExternalClass span, .ExternalClass font, .ExternalClass td, .ExternalClass div { line-height: 100%; }
html { width: 100%; }
body { -webkit-text-size-adjust: none; -ms-text-size-adjust: none; margin: 0; padding: 0; font-family: 'Open Sans', Arial, Sans-serif !important; }
table { border-spacing: 0; table-layout: fixed; margin: 0 auto; }
table table table { table-layout: auto; }
img { display: block !important; overflow: hidden !important; }
.yshortcuts a { border-bottom: none !important; }
a { color: #FFFFFF; text-decoration: none; }
img:hover { opacity:0.9 !important;}
.textbutton a { font-family: 'open sans', arial, sans-serif !important;}
.btn-link-1 a { color: #FFFFFF !important; }
/*Responsive*/
@media only screen and (max-width: 640px) {
body { width: auto !important; font-family: 'Open Sans', Arial, Sans-serif !important;}
.table-inner { width: 90% !important; max-width: 90%!important;}
.table-full { width: 100%!important; max-width: 100%!important; text-align: center !important;}
.hide {width: 0px !important; height: 0px!important; display: none!important;}
}
@media only screen and (max-width: 479px) {
body { width: auto !important; font-family: 'Open Sans', Arial, Sans-serif !important;}
.table-inner{ width: 90% !important; text-align: center !important;}
.table-full { width: 100%!important; max-width: 100%!important; text-align: center !important;}
.hide {width: 0px !important; height: 0px!important; display: none!important;}
}
</style>
</head>
<body>
<!DOCTYPE html>
<html>
<head>
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
border: 1px solid #e7e7e7;
background-color: #f3f3f3;
}
li {
float: left;
padding:
}
li a {
display: block;
color: #003366;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover:not(.active) {
color: white;
background-color: #003366;
}
</style>
</head>
<body>
<!--start header-->
<ul>
<tr>
<td valign="top" align="center" id="clear-padding" class="increase-padding-left 50" style="height: 500px;"></a></td>
<li><a href="https://www.foundersfcu.com/">Home</a></li>
<li><a href="https://cs.loanspq.com/Consumer/login/default.aspx?enc2=CjDDGQgp6ViDEpMSQAmj1NmtoCpgP5GFFZ2xTRYN4b60...">Apply for a Loan</a></li>
<li><a href="https://www.foundersfcu.com/locations-and-hours">Location & Hours</a></li>
<li><a href="https://www.foundersfcu.com/about-founders">About</a></li>
</tr>
</a></li>
</ul>
<!--end header-->
</body>
</html>
</div>
</div>
</body>
</html>
<!--header bar-->
<table bgcolor="#ecf0f1" width="100%" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td align="center">
<table class="table-inner" width="400" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td height="45"></td>
</tr>
<tr>
<td align="center">
<table width="100%" border="0" align="center" cellpadding="0" cellspacing="0" bgcolor="#ecf0f1">
<tr>
<td align="center">
<table width="100%" align="center" border="0" cellpadding="0" cellspacing="0">
<tr>
</tr>
</table>
<table align="center" border="0" cellpadding="0" cellspacing="0">
<tr>
<td>
<!--Logo-->
<table width="250" border="0" align="center" cellpadding="0" cellspacing="0" class="table-full">
<tr>
<td height="65" align="center" style="line-height: 0px;padding-left: 0px;padding-right: 0px;">
<a style="text-decoration: none;" href="https://www.foundersfcu.com/"><img width="250" src="http://membermail.foundersfcu.com/dm/Images/cu/Foun1/gl/email/Foun1152017903235b0fe188-a1__1_5_2017_..." style="max-width: 250px; margin: 0px; border-width: 0px; border-style: solid;" alt="Logo" /><!--This is where the old logo code ends, it started with styl max width on the line above-->
</a></td>
</td>
</tr>
</table>
Copy link to clipboard
Copied
For best results, you should find an industry-tested Email Template that performs well in all email clients. Keep things simple.
Free Responsive Email Templates
<table cellpadding="5" cellspacing="2" style="text-align:center; width: 80%; margin:0 auto">
<tr>
<th colspan="4">TABLE HEADING</th>
</tr>
<tr>
<td>Home</td>
<td>Apply for a Loan</td>
<td>Location & Hours </td>
<td>About</td>
</tr>
</table>
Copy link to clipboard
Copied
html emails should be kept as simple as possible and where you can you should use pre 1914 techniques - tables and inline css styling where you can.
I would not use an unordered list to construct your naviagtion for an html email - I would just use simple anchor tags:
<table cellpadding="0" cellspacing="0" border="0" width="100%">
<tr>
<td>
<!-- start navigation -->
<table cellpadding="0" cellspacing="0" border="0" width="600" align="center">
<tr>
<td align="center" style="font-family: helvetica, sans-serif; font-size: 16px; padding: 20px 0;">
<a href="#" style="text-decoration: none; color: #003366;">Home</a> | <a href="#" style="text-decoration: none; color: #003366;">Apply for a loan</a> | <a href="#" style="text-decoration: none; color: #003366;">Location & Hours</a> | <a href="#" style="text-decoration: none; color: #003366;">About</a>
</td>
</tr>
</table>
<!-- end navigation -->
</td>
</tr>
</table>