Skip to main content
A
Anonymous
April 27, 2015
Question

How to make buttons line up?

  • April 27, 2015
  • 4 replies
  • 2077 views
Ive created an email which has three buttons (its an internal newsletter).The three buttoms line up in the editor but as soon as i send a sample to myself, it throught the buttons out of place. Does anybody know how to fix this?
This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.

4 replies

A
Anonymous
April 27, 2015
Can I see the code? I can take a look and help if you like.
A
Anonymous
April 28, 2015
Hi, this is the code:

 <!--Start Here Events Part-->
      <tr>
        <td width="600" align="left" valign="top"><table width="600" border="0" align="center" cellpadding="0" cellspacing="0">
          <tr>
            <td width="600" align="center" valign="middle" bgcolor="#edaf02" height="47" style="font-family:Verdana, Geneva, sans-serif; color:#ffffff; font-weight:bold; font-size:26px; text-align:center; line-height:normal;"><div class="mktEditable" id="eventss">Events</div></td>
          </tr>
          <tr>
            <td width="600" align="left" valign="top" bgcolor="#e4f0f3"><table width="600" border="0" align="center" cellpadding="0" cellspacing="0">
              <tr>
                <td></td>
                <td height="22" style="line-height:0px; font-size:0px;">&nbsp;</td>
                <td></td>
              </tr>
              <tr>
                <td width="22"></td>
                <td align="left" valign="top" width="556"><table width="556" border="0" align="center" cellpadding="0" cellspacing="0">
                  <tr>
                    <td width="150" align="left" valign="top"><table width="150" border="0" align="center" cellpadding="0" cellspacing="0">
                      <tr>
                        <td width="150" align="center" valign="top"><div class="mktEditable" id="event_img"><img src="pages.advanced-learning.co.uk/rs/advancedbusiness/images/events.jpg" width="140" height="140" alt="Events" border="0" style="display:block;" /></div></td>
                      </tr>
                      <tr>
                        <td height="12" style="line-height:0px; font-size:0px;">&nbsp;</td>
                      </tr>
                      <tr>
                        <td width="150" align="center" valign="top" style="font-family:Verdana, Geneva, sans-serif; color:#000000; font-size:15px; font-weight:bold; text-align:center; line-height:18px;"><div class="mktEditable" id="event_txt5">Event 1</div></td>
                      </tr>
                      <tr>
                        <td height="8" style="line-height:0px; font-size:0px;">&nbsp;</td>
                      </tr>
                      <tr>
                        <td width="150" align="center" valign="top" style="font-family:Verdana, Geneva, sans-serif; color:#000000; font-size:12px; text-align:center; line-height:18px;"><div class="mktEditable" id="text6">Lorem ipsum dolor sit </div></td>
                      </tr>
                      <tr>
                        <td height="12" style="line-height:0px; font-size:0px;">&nbsp;</td>
                      </tr>
                      <tr>
                        <td width="150" align="center" valign="top"><table width="110" border="0" align="center" cellpadding="0" cellspacing="0" bgcolor="#edaf02" style="border-radius:3px;">
                          <tr>
                            <td align="center" valign="middle" class="read_more" height="35" style="font-family:Verdana, Geneva, sans-serif; color:#000000; font-size:14px; font-weight:bold; text-align:center; line-height:normal;"><div class="mktEditable" id="more7"><a href="#" target="_blank" style="text-decoration:none; color:#000000;">Read more</a></div></td>
                          </tr>
                        </table></td>
                      </tr>
                    </table></td>
                    <td width="53"></td>
                    <td width="150" align="left" valign="top"><table width="150" border="0" align="center" cellpadding="0" cellspacing="0">
                      <tr>
                        <td width="150" align="center" valign="top"><div class="mktEditable" id="event_img1"><img src="pages.advanced-learning.co.uk/rs/advancedbusiness/images/events1.jpg" width="140" height="140" alt="Events" border="0" style="display:block;" /></div></td>
                      </tr>
                      <tr>
                        <td height="12" style="line-height:0px; font-size:0px;">&nbsp;</td>
                      </tr>
                      <tr>
                        <td width="150" align="center" valign="top" style="font-family:Verdana, Geneva, sans-serif; color:#000000; font-size:15px; font-weight:bold; text-align:center; line-height:18px;"><div class="mktEditable" id="event_txt6">Event 2</div></td>
                      </tr>
                      <tr>
                        <td height="8" style="line-height:0px; font-size:0px;">&nbsp;</td>
                      </tr>
                      <tr>
                        <td width="150" align="center" valign="top" style="font-family:Verdana, Geneva, sans-serif; color:#000000; font-size:12px; text-align:center; line-height:18px;"><div class="mktEditable" id="text7">Lorem ipsum dolor sit</div> </td>
                      </tr>
                      <tr>
                        <td height="12" style="line-height:0px; font-size:0px;">&nbsp;</td>
                      </tr>
                      <tr>
                        <td width="150" align="center" valign="top"><table width="110" border="0" align="center" cellpadding="0" cellspacing="0" bgcolor="#edaf02" style="border-radius:3px;">
                          <tr>
                            <td align="center" valign="middle" class="read_more" height="35" style="font-family:Verdana, Geneva, sans-serif; color:#000000; font-size:14px; font-weight:bold; text-align:center; line-height:normal;"><div class="mktEditable" id="more8"><a href="#" target="_blank" style="text-decoration:none; color:#000000;">Read more</a></div></td>
                          </tr>
                        </table></td>
                      </tr>
                    </table></td>
                   <td width="53"></td>
                    <td width="150" align="left" valign="top"><table width="150" border="0" align="center" cellpadding="0" cellspacing="0">
                      <tr>
                        <td width="150" align="center" valign="top"><div class="mktEditable" id="event_img3"><img src="pages.advanced-learning.co.uk/rs/advancedbusiness/images/events2.jpg" width="140" height="140" alt="Events" border="0" style="display:block;" /></div></td>
                      </tr>
                      <tr>
                        <td height="12" style="line-height:0px; font-size:0px;">&nbsp;</td>
                      </tr>
                      <tr>
                        <td width="150" align="center" valign="top" style="font-family:Verdana, Geneva, sans-serif; color:#000000; font-size:15px; font-weight:bold; text-align:center; line-height:18px;"><div class="mktEditable" id="event_txt7">Event 3</div></td>
                      </tr>
                      <tr>
                        <td height="8" style="line-height:0px; font-size:0px;">&nbsp;</td>
                      </tr>
                      <tr>
                        <td width="150" align="center" valign="top" style="font-family:Verdana, Geneva, sans-serif; color:#000000; font-size:12px; text-align:center; line-height:18px;"><div class="mktEditable" id="text8">Lorem ipsum dolor sit</div> </td>
                      </tr>
                      <tr>
                        <td height="12" style="line-height:0px; font-size:0px;">&nbsp;</td>
                      </tr>
                      <tr>
                        <td width="150" align="center" valign="top"><table width="110" border="0" align="center" cellpadding="0" cellspacing="0" bgcolor="#edaf02" style="border-radius:3px;">
                          <tr>
                            <td align="center" valign="middle" class="read_more" height="35" style="font-family:Verdana, Geneva, sans-serif; color:#000000; font-size:14px; font-weight:bold; text-align:center; line-height:normal;"><div class="mktEditable" id="more9"><a href="#" target="_blank" style="text-decoration:none; color:#000000;">Read more</a></div></td>
                          </tr>
                        </table></td>
                      </tr>
                    </table></td>
                  </tr>
                </table></td>
                <td width="22"></td>
              </tr>
              <tr>
                <td></td>
                <td height="22" style="line-height:0px; font-size:0px;">&nbsp;</td>
                <td></td>
              </tr>
            </table></td>
          </tr>
          <tr>
            <td height="44"></td>
          </tr>
        </table></td>
      </tr>
      <!--//End Here Events Part-->
Thanks again!
A
Anonymous
April 28, 2015
Where is your test going? What ESP? Here is what I see.



I also tested in Litmus,

Litmus shows what it "should" look like in most ESPs.
All versions look the same.

The only variable would be the # of lines you have in each of the "text#" div sections. It is not responsive as best as I can tell. But that would just affect the buttons staching in a mobile environment. I didnt do much to the code, but wanted to make sure you had what I was using when i tested it. Can you send a screen shot of what you are seeing?
A
Anonymous
April 28, 2015
<!--Start Here Events Part-->
      <tr>
        <td width="600" align="left" valign="top"><table width="600" border="0" align="center" cellpadding="0" cellspacing="0">
          <tr>
            <td width="600" align="center" valign="middle" bgcolor="#edaf02" height="47" style="font-family:Verdana, Geneva, sans-serif; color:#ffffff; font-weight:bold; font-size:26px; text-align:center; line-height:normal;"><div class="mktEditable" id="eventss">Events</div></td>
          </tr>
          <tr>
            <td width="600" align="left" valign="top" bgcolor="#e4f0f3"><table width="600" border="0" align="center" cellpadding="0" cellspacing="0">
              <tr>
                <td></td>
                <td height="22" style="line-height:0px; font-size:0px;">&nbsp;</td>
                <td></td>
              </tr>
              <tr>
                <td width="22"></td>
                <td align="left" valign="top" width="556"><table width="556" border="0" align="center" cellpadding="0" cellspacing="0">
                  <tr>
                    <td width="150" align="left" valign="top"><table width="150" border="0" align="center" cellpadding="0" cellspacing="0">
                      <tr>
                        <td width="150" align="center" valign="top"><div class="mktEditable" id="event_img"><img src="pages.advanced-learning.co.uk/rs/advancedbusiness/images/events.jpg" width="140" height="140" alt="Events" border="0" style="display:block;" /></div></td>
                      </tr>
                      <tr>
                        <td height="12" style="line-height:0px; font-size:0px;">&nbsp;</td>
                      </tr>
                      <tr>
                        <td width="150" align="center" valign="top" style="font-family:Verdana, Geneva, sans-serif; color:#000000; font-size:15px; font-weight:bold; text-align:center; line-height:18px;"><div class="mktEditable" id="event_txt5">Event 1</div></td>
                      </tr>
                      <tr>
                        <td height="8" style="line-height:0px; font-size:0px;">&nbsp;</td>
                      </tr>
                      <tr>
                        <td width="150" align="center" valign="top" style="font-family:Verdana, Geneva, sans-serif; color:#000000; font-size:12px; text-align:center; line-height:18px;"><div class="mktEditable" id="text6">Lorem ipsum dolor sit </div></td>
                      </tr>
                      <tr>
                        <td height="12" style="line-height:0px; font-size:0px;">&nbsp;</td>
                      </tr>
                      <tr>
                        <td width="150" align="center" valign="top"><table width="110" border="0" align="center" cellpadding="0" cellspacing="0" bgcolor="#edaf02" style="border-radius:3px;">
                          <tr>
                            <td align="center" valign="middle" class="read_more" height="35" style="font-family:Verdana, Geneva, sans-serif; color:#000000; font-size:14px; font-weight:bold; text-align:center; line-height:normal;"><div class="mktEditable" id="more9"><a href="#" target="_blank" style="text-decoration:none; color:#000000;">Read more</a></div></td>
                          </tr>
                        </table></td>
                      </tr>
                    </table></td>
                    <td width="53"></td>
                    <td width="150" align="left" valign="top"><table width="150" border="0" align="center" cellpadding="0" cellspacing="0">
                      <tr>
                        <td width="150" align="center" valign="top"><div class="mktEditable" id="event_img1"><img src="pages.advanced-learning.co.uk/rs/advancedbusiness/images/events1.jpg" width="140" height="140" alt="Events" border="0" style="display:block;" /></div></td>
                      </tr>
                      <tr>
                        <td height="12" style="line-height:0px; font-size:0px;">&nbsp;</td>
                      </tr>
                      <tr>
                        <td width="150" align="center" valign="top" style="font-family:Verdana, Geneva, sans-serif; color:#000000; font-size:15px; font-weight:bold; text-align:center; line-height:18px;"><div class="mktEditable" id="event_txt6">Event 2</div></td>
                      </tr>
                      <tr>
                        <td height="8" style="line-height:0px; font-size:0px;">&nbsp;</td>
                      </tr>
                      <tr>
                        <td width="150" align="center" valign="top" style="font-family:Verdana, Geneva, sans-serif; color:#000000; font-size:12px; text-align:center; line-height:18px;"><div class="mktEditable" id="text7">Lorem ipsum dolor sit</div> </td>
                      </tr>
                      <tr>
                        <td height="12" style="line-height:0px; font-size:0px;">&nbsp;</td>
                      </tr>
                      <tr>
                        <td width="150" align="center" valign="top"><table width="110" border="0" align="center" cellpadding="0" cellspacing="0" bgcolor="#edaf02" style="border-radius:3px;">
                          <tr>
                            <td align="center" valign="middle" class="read_more" height="35" style="font-family:Verdana, Geneva, sans-serif; color:#000000; font-size:14px; font-weight:bold; text-align:center; line-height:normal;"><div class="mktEditable" id="more9"><a href="#" target="_blank" style="text-decoration:none; color:#000000;">Read more</a></div></td>
                          </tr>
                        </table></td>
                      </tr>
                    </table></td>
                   <td width="53"></td>
                    <td width="150" align="left" valign="top"><table width="150" border="0" align="center" cellpadding="0" cellspacing="0">
                      <tr>
                        <td width="150" align="center" valign="top"><div class="mktEditable" id="event_img3"><img src="pages.advanced-learning.co.uk/rs/advancedbusiness/images/events2.jpg" width="140" height="140" alt="Events" border="0" style="display:block;" /></div></td>
                      </tr>
                      <tr>
                        <td height="12" style="line-height:0px; font-size:0px;">&nbsp;</td>
                      </tr>
                      <tr>
                        <td width="150" align="center" valign="top" style="font-family:Verdana, Geneva, sans-serif; color:#000000; font-size:15px; font-weight:bold; text-align:center; line-height:18px;"><div class="mktEditable" id="event_txt7">Event 3</div></td>
                      </tr>
                      <tr>
                        <td height="8" style="line-height:0px; font-size:0px;">&nbsp;</td>
                      </tr>
                      <tr>
                        <td width="150" align="center" valign="top" style="font-family:Verdana, Geneva, sans-serif; color:#000000; font-size:12px; text-align:center; line-height:18px;"><div class="mktEditable" id="text8">Lorem ipsum dolor sit</div> </td>
                      </tr>
                      <tr>
                        <td height="12" style="line-height:0px; font-size:0px;">&nbsp;</td>
                      </tr>
                      <tr>
                        <td width="150" align="center" valign="top"><table width="110" border="0" align="center" cellpadding="0" cellspacing="0" bgcolor="#edaf02" style="border-radius:3px;">
                          <tr>
                            <td align="center" valign="middle" class="read_more" height="35" style="font-family:Verdana, Geneva, sans-serif; color:#000000; font-size:14px; font-weight:bold; text-align:center; line-height:normal;"><div class="mktEditable" id="more9"><a href="#" target="_blank" style="text-decoration:none; color:#000000;">Read more</a></div></td>
                          </tr>
                        </table></td>
                      </tr>
                    </table></td>
                  </tr>
                </table></td>
                <td width="22"></td>
              </tr>
              <tr>
                <td></td>
                <td height="22" style="line-height:0px; font-size:0px;">&nbsp;</td>
                <td></td>
              </tr>
            </table></td>
          </tr>
          <tr>
            <td height="44"></td>
          </tr>
        </table></td>
      </tr>
      <!--//End Here Events Part-->
Terms & ConditionsAccessibility statement

Loading footer...