HTML table not stacking properly -


i'm attempting create html email why i'm using tables. have beginning text followed bullet points beneath it. however, beginning text pushed right instead of lining atop bullet points.

here's simple fiddle: http://jsfiddle.net/wwxyg/

my html:

<table bordercolor="#ff0000" style="color:#585a63; font-family:arial,helvetica, sans-serif; background:#ffffff;width:600px;" border="0" cellspacing="0" cellpadding="0">     <tr>         <td width="15" align="left" valign="top">             <img src="images/spacer.gif" width="15" height="2" border="0" alt=" " style="display: block;" />                   </td>         <td width="288" align="left" valign="top" style="color: #585a63; font-family: arial, helvetica, sans-serif; font-size: 13px; background: #ffffff; width: 288px;">             <p style="font-size: 22px; font-weight: bold; font-family: arial, helvetica, sans-serif; color:#0078ae; margin: 10px 0px 10px 0px">                 title section goes here             </p>               <p style="margin: 1em 0; color:#585a63; font-family:arial, helvetica, sans-serif; font-size:13px; font-weight: normal;">                 lorem ipsum dolor sit amet, consectetur adipiscing elit. mauris non massa dolor. integer magna eros, vulputate sit amet rhoncus sodales, euismod sit amet eros.             </p>                <p style="margin: 13px 0 13px; color: #585a63;">                 lorem ipsum dolor sit amet, consectetur adipiscing elit. mauris non massa dolor. integer magna eros, vulputate sit amet rhoncus sodales, euismod sit amet eros.             </p>                  <p style="margin: 13px 0 13px; color: #585a63;">                 sub title goes here:<br /><br />              </p>                 </td>             </tr>             <tr>                 <td>                      <table width="260" style="color: #585a63; font-family: arial, helvetica, sans-serif; font-size: 13px; background: #ffffff; width: 260px;">                         <tr>                             <td width="5" height="15" valign="top">&bull;</td>                             <td width="250" height="15" valign="top">interesting point number 1</td>                         </tr>                          <tr><td>&nbsp;</td></tr>                          <tr>                             <td width="5" height="15" valign="top">&bull;</td>                             <td width="250" height="15" valign="top">interesting point number 2</td>                         </tr>                          <tr><td>&nbsp;</td></tr>                          <tr>                             <td width="5" height="15" valign="top">&bull;</td>                             <td width="250" height="15" valign="top">interesting point number 3</td>                         </tr>                          <tr><td>&nbsp;</td></tr>                          <tr>                             <td width="5" height="15" valign="top">&bull;</td>                             <td width="250" height="15" valign="top">interesting point number 4</td>                         </tr>                     </table>                  </td>             </tr>                 </table> 

in outer table have 2 rows. first row has 2 columns , second row has one. if remove column in first row contains spacer image, should line properly.

remove this:

   <td width="15" align="left" valign="top">        <img src="images/spacer.gif" width="15" height="2" border="0" alt=" " style="display: block;" />              </td> 

Comments

Popular posts from this blog

linux - Does gcc have any options to add version info in ELF binary file? -

android - send complex objects as post php java -

charts - What graph/dashboard product is facebook using in Dashboard: PUE & WUE -