Jake Paul Jake Paul - 3 months ago 7
CSS Question

Email Newsletter header and footer alignments for email clients <td>

I've inherited this half completed email newsletter template, but I'm having a lot of problems with my limited coding skills in consistently keeping the header and footer aligned in all the various email clients. For starters, the footer doesn't align properly like the header does at all, it keeps showing a 1 px gap between the top row and the bottom image and keeps moving around on various email clients.

Heres the full script:



<!DOCTYPE html>
<html>
<head>
<meta content="text/html; charset=utf-8" http-equiv="content-type">
<meta content="width=device-width, initial-scale=1.0;" name="viewport">
<meta content="telephone=no" name="format-detection">
<title></title>
</head><!-- MESSAGE SUBJECT -->
<!-- BODY -->
<!-- Set message background color (twice) and text color (twice) -->
<body bgcolor="#F0F0F0" style=
"border-collapse: collapse; border-spacing: 0; width: 100% !important; height: 100% !important; -webkit-font-smoothing: antialiased; text-size-adjust: 100%; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; line-height: 100%; color: #000000; min-width: 100%; background-color: #ffd530; margin: 0; padding: 0;"
text="#000000">
<style type="text/css">
a:hover { color: #127DB3 !important; }
.footer a:hover { color: #999999 !important; }
>
</style>
<table align="center" border="0" cellpadding="0" cellspacing="0" style=
"border-collapse: collapse !important; border-spacing: 0; width: 100%; -webkit-font-smoothing: antialiased; text-size-adjust: 100%; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; line-height: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; margin: 0; padding: 0;"
width="100%">
<tr>
<td align="center" bgcolor="#FFD530" style=
"border-collapse: collapse !important; border-spacing: 0; -webkit-font-smoothing: antialiased; text-size-adjust: 100%; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; line-height: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; margin: 0; padding: 0;"
valign="top">
<!-- WRAPPER -->
<!-- Set wrapper width (twice) -->
<table align="center" border="0" cellpadding="0" cellspacing=
"0" style=
"border-collapse: collapse !important; border-spacing: 0; width: inherit; max-width: 600px; -webkit-font-smoothing: antialiased; text-size-adjust: 100%; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; line-height: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; padding: 0;"
width="560">
<tr>
<td align="center" style=
"border-collapse: collapse !important; border-spacing: 0; width: 100%; -webkit-font-smoothing: antialiased; text-size-adjust: 100%; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; line-height: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; margin: 0; padding: 0px 6.25% 20px;"
valign="top"></td>
<td style=
"-webkit-font-smoothing: antialiased; text-size-adjust: 100%; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; line-height: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; border-collapse: collapse !important; border-spacing: 0;">
</td>
</tr>
<tr>
<td></td>
</tr>
<tbody>
<tr>
<td bgcolor="white" style=
"-webkit-font-smoothing: antialiased; text-size-adjust: 100%; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; line-height: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; border-collapse: collapse !important; border-spacing: 0;"
valign="top" width="">
<a href=
"http://www.tower-london.com/delivery-options/"
style=
"-webkit-font-smoothing: antialiased; text-size-adjust: 100%; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; line-height: 100%; color: #127DB3;"
title=""><img alt="Tower-London" border="none"
src=
"http://www.tower-london.com/media/custom/newsletter/template2/Free.jpg"
style=
"display: block; line-height: 100%; outline: none; text-decoration: none; -ms-interpolation-mode: bicubic; border: 0;"
title="Right-click here to download pictures"
width=""></a>
</td>
</tr>
</tbody>
<tbody>
<tr>
<td bgcolor="white" style=
"-webkit-font-smoothing: antialiased; text-size-adjust: 100%; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; line-height: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; border-collapse: collapse !important; border-spacing: 0;"
valign="top"><img alt="" border="none" src=
"http://www.tower-london.com/media/custom/newsletter/template/followus.jpg"
style=
"display: block; line-height: 100%; outline: none; text-decoration: none; -ms-interpolation-mode: bicubic; border: 0;"></td>
<td bgcolor="white" style=
"-webkit-font-smoothing: antialiased; text-size-adjust: 100%; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; line-height: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; border-collapse: collapse !important; border-spacing: 0;"
valign="top">
<a href=
"https://www.facebook.com/towerlondonfootwear"
style=
"-webkit-font-smoothing: antialiased; text-size-adjust: 100%; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; line-height: 100%; color: #999999;"
title=""><img alt="" border="none" src=
"http://www.tower-london.com/media/custom/newsletter/template/facebook.jpg"
style=
"display: block; line-height: 100%; outline: none; text-decoration: none; -ms-interpolation-mode: bicubic; border: 0;"></a>
</td>
<td bgcolor="white" style=
"-webkit-font-smoothing: antialiased; text-size-adjust: 100%; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; line-height: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; border-collapse: collapse !important; border-spacing: 0;"
valign="top">
<a href="https://twitter.com/TowerLondon"
style="-webkit-font-smoothing: antialiased; text-size-adjust: 100%; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; line-height: 100%; color: #999999;"
title=""><img alt="" border="none" src=
"http://www.tower-london.com/media/custom/newsletter/template/twitter.jpg"
style=
"display: block; line-height: 100%; outline: none; text-decoration: none; -ms-interpolation-mode: bicubic; border: 0;"></a>
</td>
<td bgcolor="white" style=
"-webkit-font-smoothing: antialiased; text-size-adjust: 100%; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; line-height: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; border-collapse: collapse !important; border-spacing: 0;"
valign="top" width="">
<a href="http://instagram.com/towerlondon"
style=
"-webkit-font-smoothing: antialiased; text-size-adjust: 100%; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; line-height: 100%; color: #999999;"
title=""><img alt="" border="none" src=
"http://www.tower-london.com/media/custom/newsletter/template/instagram.jpg"
style=
"display: block; line-height: 100%; outline: none; text-decoration: none; -ms-interpolation-mode: bicubic; border: 0;"></a>
</td>
<td bgcolor="white" style=
"-webkit-font-smoothing: antialiased; text-size-adjust: 100%; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; line-height: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; border-collapse: collapse !important; border-spacing: 0;"
valign="top"><img alt="" border="none" src=
"http://www.tower-london.com/media/custom/newsletter/template/towerlogo.jpg"
style=
"display: block; line-height: 100%; outline: none; text-decoration: none; -ms-interpolation-mode: bicubic; border: 0;"></td>
</tr>
</tbody>
</table><!-- End of Row 7 -->
<!-- Row 7 -->
<table align="center" bgcolor="white" style=
"-webkit-font-smoothing: antialiased; text-size-adjust: 100%; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; line-height: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; border-collapse: collapse !important; border-spacing: 0;">
<tbody>
<tr>
<td bgcolor="white" style=
"-webkit-font-smoothing: antialiased; text-size-adjust: 100%; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; line-height: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; border-collapse: collapse !important; border-spacing: 0;"
valign="top">
<a href="http://www.tower-london.com/" style=
"-webkit-font-smoothing: antialiased; text-size-adjust: 100%; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; line-height: 100%; color: #999999;"
title=""><img alt="" border="none" src=
"http://www.tower-london.com/media/custom/newsletter/template/website.jpg"
style=
"display: block; line-height: 100%; outline: none; text-decoration: none; -ms-interpolation-mode: bicubic; border: 0;"></a>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</table>
</body>
</html>





If some good soul could help me sorting this mess out, I'd be eternally grateful!

Answer

i have change to tbody to table & add property of table

<body bgcolor="#F0F0F0" style=
"border-collapse: collapse; border-spacing: 0; width: 100% !important; height: 100% !important; -webkit-font-smoothing: antialiased; text-size-adjust: 100%; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; line-height: 100%; color: #000000; min-width: 100%; background-color: #ffd530; margin: 0; padding: 0;"
text="#000000">
    <style type="text/css">
    a:hover { color: #127DB3 !important; }
    .footer a:hover { color: #999999 !important; }
    
    </style>
    <table align="center" border="0" cellpadding="0" cellspacing="0" style=
    "border-collapse: collapse !important; border-spacing: 0; width: 100%; -webkit-font-smoothing: antialiased; text-size-adjust: 100%; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; line-height: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; margin: 0; padding: 0;"
    width="100%">
        <tr>
            <td align="center" bgcolor="#FFD530" style=
            "border-collapse: collapse !important; border-spacing: 0; -webkit-font-smoothing: antialiased; text-size-adjust: 100%; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; line-height: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; margin: 0; padding: 0;"
            valign="top">
                <!-- WRAPPER -->
                <!-- Set wrapper width (twice) -->
                <table align="center" border="0" cellpadding="0" cellspacing=
                "0" style=
                "border-collapse: collapse !important; border-spacing: 0; width: inherit; max-width: 600px; -webkit-font-smoothing: antialiased; text-size-adjust: 100%; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; line-height: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; padding: 0;"
                width="560">
                    <tr>
                        <td align="center" style=
                        "border-collapse: collapse !important; border-spacing: 0; width: 100%; -webkit-font-smoothing: antialiased; text-size-adjust: 100%; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; line-height: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; margin: 0; padding: 0px 6.25% 20px;"
                        valign="top"></td>
                        <td style=
                        "-webkit-font-smoothing: antialiased; text-size-adjust: 100%; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; line-height: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; border-collapse: collapse !important; border-spacing: 0;">
                        </td>
                    </tr>
                    <tr>
                        <td></td>
                    </tr>
                    <table border="0" cellpadding="0" cellspacing="0">
                        <tr>
                            <td bgcolor="white" style=
                            "-webkit-font-smoothing: antialiased; text-size-adjust: 100%; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; line-height: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; border-collapse: collapse !important; border-spacing: 0;"
                            valign="top" width="">
                                <a href=
                                "http://www.tower-london.com/delivery-options/"
                                style=
                                "-webkit-font-smoothing: antialiased; text-size-adjust: 100%; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; line-height: 100%; color: #127DB3;"
                                title=""><img alt="Tower-London" border="none"
                                src=
                                "http://www.tower-london.com/media/custom/newsletter/template2/Free.jpg"
                                style=
                                "display: block; line-height: 100%; outline: none; text-decoration: none; -ms-interpolation-mode: bicubic; border: 0;"
                                title="Right-click here to download pictures"
                                width=""></a>
                            </td>
                        </tr>
                    </tbody>
                    <table border="0" cellpadding="0" cellspacing="0">
                        <tr>
                            <td bgcolor="white" style=
                            "-webkit-font-smoothing: antialiased; text-size-adjust: 100%; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; line-height: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; border-collapse: collapse !important; border-spacing: 0;"
                            valign="top"><img alt="" border="none" src=
                            "http://www.tower-london.com/media/custom/newsletter/template/followus.jpg"
                            style=
                            "display: block; line-height: 100%; outline: none; text-decoration: none; -ms-interpolation-mode: bicubic; border: 0;"></td>
                            <td bgcolor="white" style=
                            "-webkit-font-smoothing: antialiased; text-size-adjust: 100%; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; line-height: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; border-collapse: collapse !important; border-spacing: 0;"
                            valign="top">
                                <a href=
                                "https://www.facebook.com/towerlondonfootwear"
                                style=
                                "-webkit-font-smoothing: antialiased; text-size-adjust: 100%; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; line-height: 100%; color: #999999;"
                                title=""><img alt="" border="none" src=
                                "http://www.tower-london.com/media/custom/newsletter/template/facebook.jpg"
                                style=
                                "display: block; line-height: 100%; outline: none; text-decoration: none; -ms-interpolation-mode: bicubic; border: 0;"></a>
                            </td>
                            <td bgcolor="white" style=
                            "-webkit-font-smoothing: antialiased; text-size-adjust: 100%; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; line-height: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; border-collapse: collapse !important; border-spacing: 0;"
                            valign="top">
                                <a href="https://twitter.com/TowerLondon"
                                style="-webkit-font-smoothing: antialiased; text-size-adjust: 100%; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; line-height: 100%; color: #999999;"
                                title=""><img alt="" border="none" src=
                                "http://www.tower-london.com/media/custom/newsletter/template/twitter.jpg"
                                style=
                                "display: block; line-height: 100%; outline: none; text-decoration: none; -ms-interpolation-mode: bicubic; border: 0;"></a>
                            </td>
                            <td bgcolor="white" style=
                            "-webkit-font-smoothing: antialiased; text-size-adjust: 100%; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; line-height: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; border-collapse: collapse !important; border-spacing: 0;"
                            valign="top" width="">
                                <a href="http://instagram.com/towerlondon"
                                style=
                                "-webkit-font-smoothing: antialiased; text-size-adjust: 100%; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; line-height: 100%; color: #999999;"
                                title=""><img alt="" border="none" src=
                                "http://www.tower-london.com/media/custom/newsletter/template/instagram.jpg"
                                style=
                                "display: block; line-height: 100%; outline: none; text-decoration: none; -ms-interpolation-mode: bicubic; border: 0;"></a>
                            </td>
                            <td bgcolor="white" style=
                            "-webkit-font-smoothing: antialiased; text-size-adjust: 100%; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; line-height: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; border-collapse: collapse !important; border-spacing: 0;"
                            valign="top"><img alt="" border="none" src=
                            "http://www.tower-london.com/media/custom/newsletter/template/towerlogo.jpg"
                            style=
                            "display: block; line-height: 100%; outline: none; text-decoration: none; -ms-interpolation-mode: bicubic; border: 0;"></td>
                        </tr>
                    </tbody>
                </table><!-- End of Row 7 -->
                <!-- Row 7 -->
                <table align="center" bgcolor="white" border="0" cellpadding="0" cellspacing="0" style=
                "-webkit-font-smoothing: antialiased; text-size-adjust: 100%; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; line-height: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; border-collapse: collapse !important; border-spacing: 0;">
                <tbody>
                        <tr>
                            <td bgcolor="white" style=
                            "-webkit-font-smoothing: antialiased; text-size-adjust: 100%; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; line-height: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; border-collapse: collapse !important; border-spacing: 0;"
                            valign="top">
                                <a href="http://www.tower-london.com/" style=
                                "-webkit-font-smoothing: antialiased; text-size-adjust: 100%; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; line-height: 100%; color: #999999;"
                                title=""><img alt="" border="none" src=
                                "http://www.tower-london.com/media/custom/newsletter/template/website.jpg"
                                style=
                                "display: block; line-height: 100%; outline: none; text-decoration: none; -ms-interpolation-mode: bicubic; border: 0;"></a>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </td>
        </tr>
    </table>
</body>

https://jsfiddle.net/78aw8jkm/