1 reply [Last post]
jorn188
jorn188's picture
Offline
newbie
Last seen: 7 years 19 weeks ago
Timezone: GMT+2
Joined: 2014-09-12
Posts: 2
Points: 3

Hi, im making a newsletter however the footer doesnt seem to be working. Anyone has some ideas on how to solve this?
code: http://pastebin.com/qB5BU82k

<!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>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>[SUBJECT]</title>
 
  <style type="text/css">
 
  body {
   padding-top: 0 !important;
   padding-bottom: 0 !important;
   padding-top: 0 !important;
   padding-bottom: 0 !important;
   margin:0 !important;
   width: 100% !important;
   -webkit-text-size-adjust: 100% !important;
   -ms-text-size-adjust: 100% !important;
   -webkit-font-smoothing: antialiased !important;
 }
 .tableContent img {
   border: 0 !important;
   display: block !important;
   outline: none !important;
 }
 
p, h2{
  margin:0;
}
 
div,p,ul,h2,h2{
  margin:0;
}
 
h2.bigger,h2.bigger{
  font-size: 32px;
  font-weight: normal;
}
 
h2.big,h2.big{
  font-size: 21px;
  font-weight: normal;
}
 
a.link1{
  color:#62A9D2;font-size:13px;font-weight:bold;text-decoration:none;
}
 
a.link2{
  padding:8px;background:#62A9D2;font-size:13px;color:#ffffff;text-decoration:none;font-weight:bold;
}
 
a.link3{
  background:#62A9D2; color:#ffffff; padding:8px 10px;text-decoration:none;font-size:13px;
}
.bgBody{
background: #F6F6F6;
}
.bgItem{
background: #ffffff;
 
 
 
}
 
.bgItem2 {
background: #fff;
border-width:1px;
border-color: #999;
border-style:solid;    
 
}
 
.bgItem3 {
background: #fff;
border-left-width: 1px;
border-right-width: 1px;
border-bottom-width: 1px;
border-color:#999;
border-style: solid;   
 
 
}
 
.bgItem4 {
background: #fff;
border-left-width: 1px;
border-right-width: 1px;
border-bottom-width: 0px;
border-top-width: 0px;
border-color:#999;
border-style: solid;   
 
 
}
 
 
.red
{
        background-color: #fff;
 
}
 
 
.animate
{
        transition: all 0.1s;
        -webkit-transition: all 0.1s;
}
 
.action-button
{
        position: relative;
        padding: 2px 40px;
  margin: 0px 2px 2px 0px;
  float: left;
        border-radius: 5px;
        font-family: 'Arial';
        font-size: 16px;
        color: #000;
        text-decoration: none; 
}
 
 
 
 
 
 
facebookknop {
 
float:left;
padding-right:5px;
 
}
twitterknop{
float:left;
padding-right:5px;
 
}
 
 
 
 
 
 
</style>
<script type="colorScheme" class="swatch active">
  {
    "name":"Default",
    "bgBody":"F6F6F6",
    "link":"62A9D2",
    "color":"999999",
    "bgItem":"ffffff",
    "title":"555555"
  }
</script>
 
</head>
<body paddingwidth="0" paddingheight="0"   style="padding-top: 0; padding-bottom: 0; padding-top: 0; padding-bottom: 0; background-repeat: repeat; width: 100% !important; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; -webkit-font-smoothing: antialiased;" offset="0" toppadding="0" leftpadding="0">
  <table width="100%" border="0" cellspacing="0" cellpadding="0" class="tableContent bgBody" align="center"  style='font-family:helvetica, sans-serif;'>
 
    <!--  =========================== The header ===========================  -->      
 
    <tr>
      <td height='25' bgcolor='#43474A' colspan='3'></td>
    </tr>
 
    <tr>
      <td height='130' bgcolor='#43474A'>&nbsp;</td>
      <td rowspan='2' width='600' valign='top'>
        <table width="600" border="0" cellspacing="0" cellpadding="0" align="center" >
 
          <!--  =========================== The body ===========================  -->  
 
 
          <tr>
            <td class='movableContentContainer'>
 
              <div class='movableContent'>
                <table width="600" border="0" cellspacing="0" cellpadding="0" align="center" valign='top'>
                  <tr>
                    <td bgcolor='#43474A' valign='top'>
                      <table width="600" border="0" cellspacing="0" cellpadding="0" align="center" valign='top'>
                        <tr>
                          <td align='left' valign='middle' >
                            <div class="contentEditableContainer contentImageEditable">
                              <div class="contentEditable" >
 
                              <p style='color:#A8B0B6;font-size:13px;text-decoration:none;'>Jouw dagelijkse dagaanbiedingen. <br>
Voeg </p>
<script type="text/javascript">eval(unescape('%64%6f%63%75%6d%65%6e%74%2e%77%72%69%74%65%28%27%3c%61%20%68%72%65%66%3d%22%6d%61%69%6c%74%6f%3a%6e%69%65%75%77%73%62%72%69%65%66%40%67%72%61%74%69%73%6b%6f%6f%70%2e%6e%6c%22%3e%6e%69%65%75%77%73%62%72%69%65%66%40%67%72%61%74%69%73%6b%6f%6f%70%2e%6e%6c%3c%2f%61%3e%27%29%3b'))</script><p> toe aan je adresboek. </p>
 
                              </div>
                            </div>
                          </td>
 
                          <td align='right' valign='top' >
                            <div class="contentEditableContainer contentTextEditable" style='display:inline-block;'>
                              <div class="contentEditable" >
                                <a href="[SHOWEMAIL]" style='color:#A8B0B6;font-size:13px;text-decoration:none;'>Open in je browser.</a>
                              </div>
                            </div>
                          </td>
                          <td width='18' align='right' valign='top'>
                            <div class="contentEditableContainer contentImageEditable" style='display:inline-block;'>
                              <div class="contentEditable" >
                                <a href="[SHOWEMAIL]"><img src="images/openBrowser.png" alt='open in browser image' data-default="placeholder" width='15' height='15' style='padding-left:10px;'></a>
                              </div>
                            </div>
                          </td>
                        </tr>
                      </table>
                    </td>
                  </tr>
                </table>
              </div>
 
              <div class='movableContent'>
                <table width="600" border="0" cellspacing="0" cellpadding="0" align="center" valign='top'>
                  <tr><td height='25' bgcolor='#43474A'></td></tr>
 
                <tr><td height='5' bgcolor='#62A9D2'></td></tr>
 
                <tr><td height='40' class='bgItem4'><img src="images/logo klein.png" </> </td></tr>
 
                <tr>
                  <td>
                    <table width="600" border="0" cellspacing="0" cellpadding="0" align="center" valign='top' class='bgItem3'>
                      <tr>
                        <td  width='20'></td>
                        <td  align='center' width='530'>
                          <div class='contentEditableContainer contentTextEditable'>
 
 
 
                            <img src= "images/hoofdaanbiedingen/site_iphone_ipad_kabel.png" style="float:right;" />
 
 
 
                            <div class="contentEditable" style='font-size:13px;color:#99A1A6; line-height:15px; text-align:left;'>
 
                            <h3 style="color:#F00"> GRATIS iPad / iPhone USB Kabel 3 meter - Wit (t.w.v. € 14,95) </h3>
                             <div> <p>  <br>2 STUKS Touchpen + Pen in één!
                              Zwart & Zilver!
Het gebruik van een touchpen betekend het einde van vegen
en vetvlekken op het scherm van je iPad of ander tablet!
</p>
<br>
<br>
<a class='link3' href="http://www.gratiskoop.nl/gadgets/combideals/touchpen-pen-zwart-zilver/" style='background:#62A9D2; color:#ffffff; padding:8px 10px;text-decoration:none;font-size:13px; border-radius:4px;'>Lees meer!</a> </div>
                            </div>
                          </div>
                        </td>
                        <td  width='35'></td>
                      </tr>
 
                      <tr><td colspan='3' height='20' ></td></tr>
 
                    </table>
                  </td>
                </tr>
                </table>
              </div>
 
                <div class='movableContent'>
                <table width="600" border="0" cellspacing="0" cellpadding="0" align="center" valign='top'>
                  <tr><td height='10' bgcolor='#62A9D2'></td></tr>
                    <tr>
                      <td>
                        <table width="600" border="0" cellspacing="0" cellpadding="0" align="center" valign='top' bgcolor='62A9D2'>
                          <tr>
                            <td width='25'></td>
                            <td width='475' valign='middle'>
                              <div class='contentEditableContainer contentTextEditable'>
                                <div class="contentEditable" style='font-family:Georgia;font-style:italic;color:#fff;font-size:15px;line-height:19px;'>
                                  <p >Let op: Deze aanbieding is maar 24 uur geldig!</p>
                                </div>
                              </div>
                            </td>
                            <td width='45' valign='top'>
                              <div class='contentEditableContainer contentFacebookEditable'>
 
 
   <a href="http://www.gratiskoop.nl/gadgets/combideals/touchpen-pen-zwart-zilver/"  class="action-button shadow animate red">Bestel gratis!</a>
                                <div>
                                </div>
                              </div>
                            </td>
                            <td width='10'></td>
                            <td width='45' valign='top'>
                              <div class='contentEditableContainer contentTwitterEditable'>
                                <div class="contentEditable">
 
                                </div>
                              </div>  
                            </td>
                            <td width='10'></td>
                          </tr>
                        </table>
                      </td>
                    </tr>
                    <tr><td height='10' bgcolor='#62A9D2'></td></tr>
                </table>
              </div>
 
                 <div class='movableContent'>
                      <table width="600" border="0" cellspacing="0" cellpadding="0" align="center" valign='top'>
                        <tr><td height='20' </td></tr>
                      </table>
                    </div>
 
 
                    <!--  Dit is een extra hoofdaanbieding. aanbieding.<div class='movableContent'>
                     <table width="600" border="0" cellspacing="0" cellpadding="0" align="center" valign='top'>
                       <tr>
                         <td>
                           <div class='contentEditableContainer contentImageEditable'>
                             <div class="contentEditable">
                               <img src="images/hoofdaanbieding/site_iphone_ipad_kabel.png" alt='What we do' data-default="placeholder" style="display: block;
   margin-left: auto;
   margin-right: auto;" >
                             </div>
                           </div>
                         </td>
                       </tr>
                       <tr><td height='10' bgcolor='#000000'></td></tr>
                       <tr>
                         <td bgcolor='#000000' style='padding:8px 0;'>
                           <table width="600" border="0" cellspacing="0" cellpadding="0" align="center" valign='top'>
                             <tr>
                               <td width='20'></td>
                               <td align='left' valign='top' width='370'>
                                 <div class='contentEditableContainer contentTextEditable'>
                                   <div class="contentEditable" style='color:#ffffff;font-size:21px;line-height:19px;'>
                                     <p > Gratis 3 meter Iphone & Ipad kabel!</p>
                                   </div>
                                 </div>
                               </td>
                               <td width='20'></td>
                               <td align='center' valign='middle' width='180'>
                                 <div class='contentEditableContainer contentTextEditable'>
                                   <div class="contentEditable">
                                     <a class='link3' href="#" style='background:#62A9D2; color:#ffffff; padding:8px 10px;text-decoration:none;font-size:13px;'>Bestel gratis!</a>
                                   </div>
                                 </div>
                               </td>
                               <td width='20'></td>
                             </tr>
                           </table>
                         </td>
                       </tr>
                       <tr><td height='10' bgcolor='#000000'></td></tr>
                     </table>
                   </div> -->
 
                    <div class='movableContent'>
                      <table width="600" border="0" cellspacing="0" cellpadding="0" align="center" valign='top'>
                        <tr><td height='20' </td></tr>
                      </table>
                    </div>
 
                    <div class='movableContent'>
                      <table width="600" border="0" cellspacing="0" cellpadding="0" align="center" valign='top'>
                        <tr>
                          <td width='291'  class='bgItem2' valign='top'>
                            <table width="291" border="0" cellspacing="0" cellpadding="0" align="center" valign='top'>
                              <tr><td height='15' colspan='3'></td></tr>
 
                              <tr>
                                <td width='20'></td>
                                <td width='251'>
                                  <table width="251" border="0" cellspacing="0" cellpadding="0" align="center" valign='top'>
                                    <tr>
                                      <td>
                                        <div class='contentEditableContainer contentTextEditable'>
                                          <div class='contentEditable' style='color:#555555;font-size:21px;font-weight:normal;'>
                                            <h2 class='big' >Gratis afslankpleisters!</h2>
                                          </div>
                                        </div>
                                      </td>
                                    </tr>
                                    <tr><td height='16'></td></tr>
                                    <tr>
                                      <td>
                                        <div class='contentEditableContainer contentTextEditable'>
                                          <div class='contentEditable' style='color:#999999;font-size:13px;line-height:19px;'>
 
                                          <img src="images/aanbiedingen/site_afslankpleisters.jpg" width="265" height="265"/>
 
                                           <br />
                                            <p >
                                           Met deze 100% natuurlijke afslankpleisters kunt u op een veel gemakkelijkere en effectievere manier afvallen. Niemand die het ziet dat u een pleister draagt, maar iedereen ziet wel dat u afval!</p>
                                          </div>
                                        </div>
                                      </td>
                                    </tr>
                                    <tr><td height='16'></td></tr>
                                    <tr>
                                      <td>
                                        <div class='contentEditableContainer contentTextEditable'>
                                          <div class='contentEditable'>
                                            <a class='link1' href="#" >Bestel gratis!</a>
                                          </div>
                                        </div>
                                      </td>
                                    </tr>
                                  </table>
                                </td>
                                <td width='20'></td>
                              </tr>
 
                              <tr><td height='15' colspan='3'></td></tr>
                            </table>
                          </td>
 
                          <td width='18'>&nbsp;</td>
 
                          <td width='291' class='bgItem2' valign='top'>
                            <table width="291" border="0" cellspacing="0" cellpadding="0" align="center" valign='top'>
                              <tr><td height='15' colspan='3'></td></tr>
 
                              <tr>
                                <td width='20'></td>
                                <td width='251'>
                                  <table width="251" border="0" cellspacing="0" cellpadding="0" align="center" valign='top'>
                                    <tr>
                                      <td>
                                        <div class='contentEditableContainer contentTextEditable'>
                                          <div class='contentEditable' style='color:#555555;font-size:21px;font-weight:normal;'>
                                            <h2 class='big'>Gratis Iphone 5-  hoesje!</h2>
                                          </div>
                                        </div>
                                      </td>
                                    </tr>
                                    <tr><td height='16'></td></tr>
                                    <tr>
                                      <td>
                                        <div class='contentEditableContainer contentTextEditable'>
                                          <div class='contentEditable' style='color:#999999;font-size:13px;line-height:19px;'>
 
                                          <img src="images/aanbiedingen/iphone-5-gameboy-case-wit.jpg" width="265" height="265" />
 
 
                                            <p >
                                            <br>Bescherm je iPhone tegen krassen, vallen en stoten met dit iPhone 5 hoesje en zorg dat je iPhone er zo goed als nieuw uit blijft zien! Daarnaast geeft dit hoesje je iPhone ook een persoonlijke look en ziet er gaaf uit!
                                          </p>
 
                                          </div>
                                        </div>
                                      </td>
                                    </tr>
                                    <tr><td height='16'></td></tr>
                                    <tr>
                                      <td>
                                        <div class='contentEditableContainer contentTextEditable'>
                                          <div class='contentEditable'>
                                            <a class='link1' href="#" >Bestel gratis!</a>
                                          </div>
                                        </div>
                                      </td>
                                    </tr>
                                  </table>
                                </td>
                                <td width='20'></td>
                              </tr>
 
                              <tr><td height='15' colspan='3'></td></tr>
                            </table>
                          </td>
                        </tr>
 
                      </table>
                    </div>
 
                    <div class='movableContent'>
                      <table width="600" border="0" cellspacing="0" cellpadding="0" align="center" valign='top'>
                        <tr><td height='20' </td></tr>
                      </table>
                    </div>
 
                    <div class='movableContent'>
                      <table width="600" border="0" cellspacing="0" cellpadding="0" align="center" valign='top' class='bgItem3' >
 
                </table>
              </div>
 
              <div class='movableContent'>
                <table width="600" border="0" cellspacing="0" cellpadding="0" align="center" valign='top' class='bgBody' >
                  <tr><td height='54' style='border-bottom:1px solid #DAE0E4'>
<a href="https://twitter.com/YOUR_USER_NAME"><img src="images/twitter.png" width="48" height="48" alt="Twitter" class="twitterknop" /></a>
<a href="http://www.facebook.com/YOUR_FB_IDENTIFIER"><img src="images/facebook.png" width="48" height="48" alt="Facebook"  class="facebookknop" style="float:left;"/></a>
</tr>  </td></tr>
 
                  <tr><td height='28'></td></tr>
 
 
                  <tr>
 
                  <td height='28'  width="600px"></td></tr>
 
 
 
                  <tr>
                    <td valign='top' align='center'>
                      <div class="contentEditableContainer contentTextEditable">
                        <div class="contentEditable" style='color:#A8B0B6; font-size:13px;line-height: 16px;'>
                          <p >Deze email is verstuurt naar [email] vanwege het aanmelden voor de gratiskoop nieuwsbrief. Wilt u deze mail niet meer ontvangen? Via onderstaande button kunt u zich afmelden.
                          </p>
                        </div>
                      </div>
                      </td>
                    </tr>
 
                    <tr><td height='28'></td></tr>
 
                    <tr>
                      <td valign='top' align='center'>
                        <div class="contentEditableContainer contentTextEditable">
                          <div class="contentEditable" style='color:#A8B0B6; font-weight:bold;font-size:13px;line-height: 30px;'>
                            <p >DisQounts International</p>
                          </div>
                        </div>
                        <div class="contentEditableContainer contentTextEditable">
                          <div class="contentEditable" style='color:#A8B0B6; font-size:13px;line-height: 15px;'>
                            <p >Gratiskoop.nl</p>
                          </div>
                        </div>
                        <div class="contentEditableContainer contentTextEditable">
                          <div class="contentEditable" >
                            <a href='afmeld link' style='line-height: 20px;color:#A8B0B6; font-size:13px;'>Afmelden</a>
                          </div>
                        </div>
                      </td>
                    </tr>
                </table>
              </div>
 
              <!--  =========================== The footer ===========================  -->
      </td>
    </tr>  
 
 
 
      <tr><td height='28'>&nbsp;</td></tr>
 
    </table>
  </td>
  <td height='130' bgcolor='#43474A'>&nbsp;</td>
</tr>
 
<tr>
  <td class='bgBody'>&nbsp;  </td>
  <td class='bgBody'>&nbsp;  </td>
</tr>
 
 
 
 
</table>
 
 
  </body>
  </html>

(I've put the css and html together, just for the paste).

jorn188
jorn188's picture
Offline
newbie
Last seen: 7 years 19 weeks ago
Timezone: GMT+2
Joined: 2014-09-12
Posts: 2
Points: 3

Whoops, i just seem to have

Whoops, i just seem to have forgotten to add the "." of class in the preview for the twitter and facebook icon. Just so you know, this is not the issue but a stupid mistake Smile .