4 Replies Latest reply on Apr 28, 2015 4:02 PM by 57658e2b1e3278a3feb1bffcdf50ca8cf9b0fe34

    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?
        • Re: How to make buttons line up?
          Can I see the code? I can take a look and help if you like.
          • 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;"> </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;"> </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;"> </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;"> </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;"> </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;"> </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;"> </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;"> </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;"> </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;"> </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;"> </td>
                            <td></td>
                          </tr>
                        </table></td>
                      </tr>
                      <tr>
                        <td height="44"></td>
                      </tr>
                    </table></td>
                  </tr>
                  <!--//End Here Events Part-->
            Thanks again!
            • Re: How to make buttons line up?
              Where is your test going? What ESP? Here is what I see.

              0EM50000000TA2Y

              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?
              • 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;"> </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;"> </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;"> </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;"> </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;"> </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;"> </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;"> </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;"> </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;"> </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;"> </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;"> </td>
                                <td></td>
                              </tr>
                            </table></td>
                          </tr>
                          <tr>
                            <td height="44"></td>
                          </tr>
                        </table></td>
                      </tr>
                      <!--//End Here Events Part-->