Welcome to the Treehouse Community
Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community!
Looking to learn something new?
Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.
Start your free trial
Pete Nicholson
5,030 PointsGmail left aligning HTML email footer
I'm designing a HTML email at the moment, and am just doing some final testing.
The email has a footer, which is centred, and worked fine in the two clients I was testing (Fastmail and Gmail) until I inlined the CSS using Mailchimp's inlining tool.
Now the footer is left aligned in Gmail (it's still centred in my local preview, and in Fastmail).
Here's how it's showing up in Gmail: http://postimg.org/image/4tavgjcol/
And playing nice in Fastmail: http://postimg.org/image/dzt63thx1/
I've tried everything I can think of, including both td align=center and text-align=center but it just won't budge.
Here's the uninlined code for the footer:
table.footer-wrap { width: 100%; clear:both!important;
}
.footer-wrap .container td.content p { border-top: 1px solid rgb(215,215,215); padding-top:15px;}
.footer-wrap .container td.content p {
font-size:10px;
font-weight: bold;
}
<table class="footer-wrap">
<tr>
<td class="container">
<!-- content -->
<div class="content">
<table>
<tr>
<td align="center">
<p style="font-size: 0.75rem;">
Powered by <a href="http://disco.ac">DISCO</a> • S-Wave Pty Ltd • Patents Pending • Made in Melbourne
</p>
<p><a href="{% unsubscribe_url %}" class="untracked" style="font-size: 0.75rem;">Unsubscribe</a>
</p>
</td>
</tr>
</table>
</div><!-- /content -->
</td>
</tr>
</table>
And the inlined code:
<table class="footer-wrap" style="margin: 0;padding: 0;font-family: "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif;width: 100%;clear: both!important;">
<tr style="margin: 0;padding: 0;font-family: "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif;">
<td class="container" style="margin: 0 auto!important;padding: 0;font-family: "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif;display: block!important;max-width: 600px!important;clear: both!important;">
<!-- content -->
<div class="content" style="margin: 0 auto;padding: 15px;font-family: "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif;max-width: 600px;display: block;">
<table style="margin: 0;padding: 0;font-family: "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif;width: 100%;">
<tr style="margin: 0;padding: 0;font-family: "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif;">
<td align="center" style="margin: 0;padding: 0;font-family: "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif;">
<p style="font-size: 0.75rem;margin: 0;padding: 0 0 20px 0;font-family: "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif;margin-bottom: 10px;font-weight: normal;line-height: 1.6;">
Powered by <a href="http://disco.ac" style="margin: 0;padding: 0;font-family: "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif;color: #2BA6CB;">DISCO</a> • S-Wave Pty Ltd • Patents Pending • Made in Melbourne
</p>
<p style="margin: 0;padding: 0;font-family: "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif;margin-bottom: 10px;font-weight: normal;font-size: 14px;line-height: 1.6;"><a href="{% unsubscribe_url %}" class="untracked" style="font-size: 0.75rem;margin: 0;padding: 0;font-family: "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif;color: #2BA6CB;">Unsubscribe</a>
</p>
</td>
</tr>
</table>
</div><!-- /content -->
</td>
</tr>
</table>
2 Answers
Samuel Canerday
12,610 Points<style>
table.footer-wrap {
width: 100%;
clear:both!important;
}
.footer-wrap .container td.content p { border-top: 1px solid rgb(215,215,215); padding-top:15px;}
.footer-wrap .container td.content p {
font-size:10px;
font-weight: bold;
}
</style>
<table class="footer-wrap" width="100%" cellpadding="0" cellspacing="0" border="0" align="center"> <!-- Added table width....align // center wrapper-->
<tr>
<td class="container">
<!-- content -->
<div class="content">
<table align="center" border="0" cellpadding="0" cellspacing="0" width="600"> <!-- Added align...width // center within wrapper-->
<tr>
<td>
<p style="font-size: 0.75rem; text-align:center;"> <!-- Added text-align:center // center bottom text -->
Powered by <a href="http://disco.ac">DISCO</a> • S-Wave Pty Ltd • Patents Pending • Made in Melbourne
</p>
<p align="center"><a href="{% unsubscribe_url %}" class="untracked" style="font-size: 0.75rem;">Unsubscribe</a>
</p>
</td>
</tr>
</table>
</div><!-- /content -->
</td>
</tr>
</table>
Does this help you out? This should center the footer text.
Pete Nicholson
5,030 PointsThanks Samuel! And apologies for the late response. What fixed in the end, oddly, was just using a different CSS inlining tool – Mailchimp's caused the bug; Foundation's Inliner worked fine: http://foundation.zurb.com/emails/inliner.html