Your Achievements
Level 1
0% to
Level 2
Next /
to gain points, level up, and earn exciting badges like the new Applaud 5 BadgeLearn more!
View All BadgesSign in to view all badges
Open Alert Bar

How to make buttons line up?

Anonymous
Not applicable
‎04-27-2015 07:56 AM
‎04-27-2015 07:56 AM

How to make buttons line up?

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?
Tags (1)
0 Likes
726
Reply
4 REPLIES 4
Anonymous
Not applicable
‎04-27-2015 09:14 AM
‎04-27-2015 09:14 AM

Re: How to make buttons line up?

Can I see the code? I can take a look and help if you like.
0 Likes
721
Reply
Anonymous
Not applicable
‎04-28-2015 03:07 AM
‎04-28-2015 03:07 AM

Re: How to make buttons line up?

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="http://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="http://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="http://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!
0 Likes
721
Reply
Anonymous
Not applicable
‎04-28-2015 10:37 AM
‎04-28-2015 10:37 AM

Re: How to make buttons line up?

Where is your test going? What ESP? Here is what I see.

0EM50000000TA2Y.png

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?
0 Likes
721
Reply
Anonymous
Not applicable
‎04-28-2015 04:02 PM
‎04-28-2015 04:02 PM

Re: How to make buttons line up?

<!--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="http://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="http://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="http://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-->
0 Likes
721
Reply
Home