1

This is my first time coding HTML for e-mail. I saw some tutorials to guide me, but I'm having a problem that I don't know how I can fix it. Basically. all my code is inside of <table>s. At the end of the page, the footer is also a <table>. But it doesn't matter how I change the CSS values for the position the result is always this inside the email:

enter image description here

The problem is in this code:

<tr>
  <table id="footer" border="0" align="center" cellpadding="0" cellspacing="0" width="100%" style="background-color: #fe3a35; opacity: 0.9">
    <tr>
      <td valign="top" align="center">
        <p style="font-family: 'Arial'; font-size: 16px; font-weight: 300; text-align: center; position: relative; left: -163px; top: 35px; line-height: 2px; color: white;">&reg; Someone, somewhere 2013</p>
        <p style="font-family: 'Arial'; text-align: center; font-weight: 300;position: relative; left: -132px; top: 25px;ine-height: 2px; color: white;"><a href="" style="font-family: 'Arial'; color: white;">Unsubscribe</a> to this newsletter instantly</p>
        <a href="https://twitter.com/realdonaldtrump" target="_blank" style="position: relative; left: 220px; top: -25px;"><img src="https://i.imgur.com/bgssIwP.png" width="30"></a>
        <a href="https://www.facebook.com/gustavo.olegario" target="_blank" style="position: relative; left: 220px; top: -25px;"><img src="https://i.imgur.com/JQ19LU9.png" width="30"></a>
      </td>
    </tr>
  </table>
</tr>

What I would like to do, in fact, is to approximatte the letters to the and the links in the middle.

Danny Fardy Jhonston Bermúdez
  • 5,500
  • 5
  • 25
  • 37
olegario
  • 711
  • 2
  • 16
  • 35
  • 1
    A better way to design emails would be to use mailchimp or campaign monitor. Emails are troublesome and these guys would take all your worries away. – Shailendra Pal Nov 14 '17 at 00:46
  • As far as I can understand, you want to center everything? Why are you using `position:relative` and all that jazz? Just use `text-align: center`. – Kirk Beard Nov 14 '17 at 00:49
  • I don't understand the problem. – wazz Nov 14 '17 at 01:00
  • 1
    @ShailendraPal, mailchimp and CM are good but it doesnt give the flexability the coders need to create something unique. With the two mentioned above you are restricted to their templates. – Syfer Nov 14 '17 at 01:03
  • 1
    @Syfer I agree. But then the outcome would be based on the effort vs time. Your emails need to not just look good but also be able to able to work on all types of devices "satisfactorily". Unless you want to do something really complex I'd suggest you to try these tools and get the best of your time. – Shailendra Pal Nov 14 '17 at 02:21
  • @ShailendraPal just like web Devs use bootstrap we have templates. A simple template takes me 30 mins to build and a complete about 45 to 50 mins depending on the complexity. My template allows me to make templates responsive on 99% of the devices in the market. Satisfactory is not what I target for, I target for the top. – Syfer Nov 14 '17 at 02:39

1 Answers1

1

The basics of email is to you tables just as you have started. I have fixed up your code so it should work on all email clients now.

fix ups:

  • added tables for your social media icons with slight padding
  • removed position CSS
  • images should have display block

<table id="footer" border="0" align="center" cellpadding="0" cellspacing="0" width="100%" style="background-color: #fe3a35; opacity: 0.9">
    <tr>
      <td valign="top" align="center"style="font-family: 'Arial'; font-size: 16px; font-weight: 300; text-align: center;color: white;padding:10px 0px;">&reg; Someone, somewhere 2013</td>
    </tr>
    <tr>
      <td valign="top" align="center" style="font-family: 'Arial'; text-align: center; font-weight: 300; color: white;padding:5px 0px 10px 0px;"><a href="" style="font-family: 'Arial'; color: white;">Unsubscribe</a> to this newsletter instantly</td>
    </tr>
    <tr>
      <td valign="top" align="center">
  
  <table border="0" align="center" cellspacing="0" cellpadding="0">      
  <tbody>
    <tr>
      <td style="padding-right:5px;"><a href="https://twitter.com/realdonaldtrump" target="_blank" style=""><img src="https://i.imgur.com/bgssIwP.png" width="30" style="display:block;"></a></td>
      <td style="padding-left:5px;"><a href="https://www.facebook.com/gustavo.olegario" target="_blank" style=""><img src="https://i.imgur.com/JQ19LU9.png" width="30" style="display:block;"></a>
  </td>
    </tr>
  </tbody>
</table>

Let me know if this is the solution you were after.

Cheers

Syfer
  • 4,262
  • 3
  • 20
  • 37
  • 1
    I have do add all padding values for the first `` tag but it worked! Thanks dude – olegario Nov 14 '17 at 10:51
  • Be careful with padding values. They will break. Better to use empty ``s and ``s with a line height/height combo. – scoopzilla Nov 14 '17 at 16:57
  • @scoopzilla which email clients don't read padding? I have managed to use padding on almost all of the email clients with same results. – Syfer Nov 14 '17 at 20:33
  • Well, you have [Outlook](https://www.emailonacid.com/blog/article/email-development/7_tips_and_tricks_regarding_margins_and_padding_in_html_emails), you have the problems with padding in Gmail, and in Yahoo - plus what it can do in mobile. You don't have to take my word for it, I just avoid them. – scoopzilla Nov 15 '17 at 17:08
  • I have always been using padding in TD. Also did you know outlook adds 4px top and bottom of text? For Gmail and Yahoo you can cater the side paddings with hybrid code (will fix mobile as well) :-) – Syfer Nov 15 '17 at 20:20