Menu icon Foundation
Container Backgrounds Ink v.1.0.5

i wrapped an email template with background container in either the body and the table. The css is the default ink (just few changes in the colors). And i used Ink inline.

Problem: when looking at the email with Mac mail or iPhone the footer get cut abruptly and the nice gray background does not fill below the end of the footer where the copyright is located.
Any hints appreciated.
Thanks

</head>
<body style="background:#ddd">
  <table class="body" style="background:#ddd">

    <tr>
      <td class="center" align="center" valign="top" >
        <center>

          <table class="row header">
            <tr>
              <td class="center" align="center">
                <center>

                  <table class="container">
                    <tr>
                      <td class="wrapper last">

                        <table class="twelve columns">
                          <tr>
                            <td class="six sub-columns">
                              <img src="http://placehold.it/200x50">
                            </td>
                            <td class="six sub-columns last" style="text-align:right; vertical-align:middle;">
                              <span class="template-label">Wanda</span>
                            </td>
                            <td class="expander"></td>
                          </tr>
                        </table>

                      </td>
                    </tr>
                  </table>

                </center>
              </td>
            </tr>
          </table>

          <table class="container" style="background:#fff">
            <tr>
              <td>

                <table class="row">
                  <tr>
                    <td class="wrapper last">

                      <table class="twelve columns">
                        <tr>
                          <td class="text-pad"> 
                            <!-- set in h1 the user NAME (solo il nome... Hi There, Andrea) -->                
                            <h5>Hi there {{ name }},</h5>
                            <p class="lead">We received your request to reset your password. <br /><br />Here's what you have to do:</p>
                            <ol>
                              <li>Click the button below to reset your password.</li>
                              <li>Set a new password for your account.</li>
                            </ol>
                        <table class="twelve columns">
                        <tr>
                          <td>
                            <table class="medium-button">
                              <tr><td><a href="{{ link}}">Reset Your Password</a></td></tr>
                            </table>
                          </td>
                           <td class="expander"></td>
                        </tr>
                      </table>
                          </td>
                          <td class="expander"></td>
                        </tr>
                      </table>

                    </td>
                  </tr>
                </table>
<hr />
                <table class="row">
                  <tr>
                    <td class="wrapper last">

                      <table class="twelve columns">
                        <tr>
                          <td align="center text-pad">
                            <center>
                              <p style="text-align:center;">&#169; Wanda, Inc 2014</p>
                            </center>
                          </td>
                          <td class="expander"></td>
                        </tr>
                      </table>

                    </td>
                  </tr>
                </table>

              <!-- container end below -->
              </td>
            </tr>
          </table>

        </center>
      </td>
    </tr>
  </table>
</body>
</html>
            

         

Screen shot 2014 03 28 at 9.47.56 am

inkcontainer background

i wrapped an email template with background container in either the body and the table. The css is the default ink (just few changes in the colors). And i used Ink inline.

Problem: when looking at the email with Mac mail or iPhone the footer get cut abruptly and the nice gray background does not fill below the end of the footer where the copyright is located.
Any hints appreciated.
Thanks

</head>
<body style="background:#ddd">
  <table class="body" style="background:#ddd">

    <tr>
      <td class="center" align="center" valign="top" >
        <center>

          <table class="row header">
            <tr>
              <td class="center" align="center">
                <center>

                  <table class="container">
                    <tr>
                      <td class="wrapper last">

                        <table class="twelve columns">
                          <tr>
                            <td class="six sub-columns">
                              <img src="http://placehold.it/200x50">
                            </td>
                            <td class="six sub-columns last" style="text-align:right; vertical-align:middle;">
                              <span class="template-label">Wanda</span>
                            </td>
                            <td class="expander"></td>
                          </tr>
                        </table>

                      </td>
                    </tr>
                  </table>

                </center>
              </td>
            </tr>
          </table>

          <table class="container" style="background:#fff">
            <tr>
              <td>

                <table class="row">
                  <tr>
                    <td class="wrapper last">

                      <table class="twelve columns">
                        <tr>
                          <td class="text-pad"> 
                            <!-- set in h1 the user NAME (solo il nome... Hi There, Andrea) -->                
                            <h5>Hi there {{ name }},</h5>
                            <p class="lead">We received your request to reset your password. <br /><br />Here's what you have to do:</p>
                            <ol>
                              <li>Click the button below to reset your password.</li>
                              <li>Set a new password for your account.</li>
                            </ol>
                        <table class="twelve columns">
                        <tr>
                          <td>
                            <table class="medium-button">
                              <tr><td><a href="{{ link}}">Reset Your Password</a></td></tr>
                            </table>
                          </td>
                           <td class="expander"></td>
                        </tr>
                      </table>
                          </td>
                          <td class="expander"></td>
                        </tr>
                      </table>

                    </td>
                  </tr>
                </table>
<hr />
                <table class="row">
                  <tr>
                    <td class="wrapper last">

                      <table class="twelve columns">
                        <tr>
                          <td align="center text-pad">
                            <center>
                              <p style="text-align:center;">&#169; Wanda, Inc 2014</p>
                            </center>
                          </td>
                          <td class="expander"></td>
                        </tr>
                      </table>

                    </td>
                  </tr>
                </table>

              <!-- container end below -->
              </td>
            </tr>
          </table>

        </center>
      </td>
    </tr>
  </table>
</body>
</html>
            

         

Screen shot 2014 03 28 at 9.47.56 am
Eric Morris over 5 years ago

Try adding some padding to the <td> that goes with the .body class <table>, like so:

<body style="background:#ddd">
  <table class="body" style="background:#ddd">

    <tr>
      <td class="center" align="center" valign="top" style="padding-bottom:60px;">

andrea tagliazucchi over 5 years ago

what i did was to change the class from

<table class="row">

to
<table class="row header">

but your solution is more semantic!
thanks