css - aligning tables left and right for responsive html emails - Outlook 2010 Issue -


im having issue 'nav' area of email im coding. works fine in browsers , works responsively, (http://imgur.com/3ivr3pu) when opened in outlook.

the code block below.

any ideas how can make sit next left element?

<layout label='nav'>     <table border="0" cellpadding="0" cellspacing="0" align="center" width="580" class="devicewidth" style="mso-table-lspace:0;mso-table-rspace:0;">     <tr>     <td>   <table border="0" cellpadding="0" cellspacing="0" align="left" width="50%" class="devicewidth" style="mso-table-lspace:0;mso-table-rspace:0; border-collapse:collapse;"> <tr bgcolor="#9cacbc"><td class="borderbottom" width="50%" style="font-size: 13px; color: #ffffff !important; font-weight: normal; text-align: center; font-family: arial, helvetica, sans-serif; line-height: 18px; vertical-align: top; margin-top:0; padding: 5px 10px 8px 10px; border-right: 1px solid #ffffff;">     <singleline><a href="#" title="brochures" style="color:#ffffff !important; text-decoration:none;"><font color="#ffffff">brochures</font></a></singleline> </td> <td class="noborder borderbottom" width="50%" style="font-size: 13px; color: #ffffff !important; font-weight: normal; text-align: center; font-family: arial, helvetica, sans-serif; line-height: 18px; vertical-align: top; margin-top:0; padding: 5px 10px 8px 10px;border-right: 1px solid #ffffff;">         <singleline><a href="#" title="specials" style="color:#ffffff !important; text-decoration:none;"><font color="#ffffff">specials</font></a></singleline> </td> </tr> </table>  <table border="0" cellpadding="0" cellspacing="0" align="right" width="50%" class="devicewidth" style="mso-table-lspace:0;mso-table-rspace:0; border-collapse:collapse;"> <tr bgcolor="#9cacbc"><td width="50%" style="font-size: 13px; color: #ffffff !important; font-weight: normal; text-align: center; font-family: arial, helvetica, sans-serif; line-height: 18px; vertical-align: top; margin-top:0; padding: 5px 10px 8px 10px; border-right: 1px solid #ffffff;">         <singleline><a href="#" title="destinations" style="color:#ffffff !important; text-decoration:none;"><font color="#ffffff">destinations</font></a></singleline> </td> <td width="50%" style="font-size: 13px; color: #ffffff !important; font-weight: normal; text-align: center; font-family: arial, helvetica, sans-serif; line-height: 18px; vertical-align: top; margin-top:0; padding: 5px 10px 8px 10px;">         <singleline><a href="#" title="contact us" style="color:#ffffff !important; text-decoration:none;"><font color="#ffffff">contact us</font></a></singleline>          </td>         </tr>         </table>  </td></tr> </table> </layout> 

the fact outlook uses word (not ie) rendering html markup. try open page in word make sure works correctly. can read supported , unsupported html elements, attributes, , cascading style sheets properties in following series of articles in msdn:

hope find information helpful.


Comments

Popular posts from this blog

android - MPAndroidChart - How to add Annotations or images to the chart -

javascript - Add class to another page attribute using URL id - Jquery -

firefox - Where is 'webgl.osmesalib' parameter? -