Re: How to make buttons line up?

Anonymous
Not applicable

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)
4 REPLIES 4
Anonymous
Not applicable

Re: How to make buttons line up?

Can I see the code? I can take a look and help if you like.
Anonymous
Not applicable

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!
Anonymous
Not applicable

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?
Anonymous
Not applicable

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-->