Align left/right in Outlook 2007, 2010, 2013

I'm consistently seeing issues in Litmus tests for Outlook 2007, 2010 and 2013, specifically with align="left" and align="right" tables sitting side by side.

As you can see, the tables add up to less than the container width:
http://email.whiterhinodev.com/ugl/save-date/

Here are the Litmus tests:
https://litmus.com/pub/6840f42/screenshots

Has anyone encountered a similar issue?

Thanks,

Mark

circa1977 circa1977, 3 years ago

I've stripped these down to the most basic code:

<table align="right" border="0" cellpadding="0" cellspacing="0" width="100">
    <tr>
        <td style="font-size: 12px; line-height: 14px; text-align: right;">Lorem ipsum</td>
    </tr>
</table>
<table align="left" border="0" cellpadding="0" cellspacing="0" width="100">
    <tr>
        <td style="font-size: 12px; line-height: 14px;">Lorem ipsum2</td>
    </tr>
</table>

And am still seeing them stack in source order in Outlook 07/10/13.


Keep up with the latest developments that impact how you work with the Web.
Subscribe now - http://clearboldne.ws
erikwoods erikwoods, 3 years ago

Why do you need them in that order? Why not put them in the proper order?
Better yet - why have two tables for this? Why not one table with two <td>s?

JohnP JohnP, 3 years ago

I don't think aligning in 2 directions works in Outlook. I'd suggest aligning them both left. If you get your widths right, you don't need to align right at all.

circa1977 circa1977, 3 years ago

Just started off with a clean email with the aligned left/right tables and layered in code around them. Things fell apart as soon as I applied the VML background image solution a few nested tables out. I don't suppose anyone's cracked that nut yet?

@erikwoods – It's a responsive email. The two side-by-side tables need to go linear on small screens. I've used the align left/right technique elsewhere, and it's documented here on CM for doing responsive email.

You can't shift two TD's to stacked using CSS.


Keep up with the latest developments that impact how you work with the Web.
Subscribe now - http://clearboldne.ws
supernath, 3 years ago

I believe if you are using table aligns to do responsive emails you need to be implementing the solution below for outlook.

http://www.emailonacid.com/blog/details/C13/removing_unwanted_spacing_or_gaps_between_tables_in_outlook_2007_2010

circa1977 circa1977, 3 years ago

@supernath - Tried that one too. The issue clearly emerged when an outer table used the VML background image technique for those three versions of Outlook. Sans the VML code, everything worked fine. There was already extra space between the tables.

Pushing back on the client to do vertical content in both modes.


Keep up with the latest developments that impact how you work with the Web.
Subscribe now - http://clearboldne.ws
jeremypeter, 3 years ago

You actually can have two <td>'s stack on top of each other, in fact, this is what I do for my responsive emails. Just add display: block to them. Here's a simplified version of what I do to turn a two column into a single column:

<style>

  .block { border: 1px solid #000000;}

  @media only screen and (max-width: 480px){

    table[class='main-table'] { width: 320px !important; }

    td[class='block'] { display: block; }

  }

</style>

<table class="main-table" align="center" width="600">
  
  <tr>
    <td class="block">
     Column 1 
    </td>
    <td class="block">
      Column 2
    </td>
  </tr>

</table>
ox4dboy, 3 years ago

10:47 Update:
I added the VML bg hack as follows:

<body>
<!-- BEGIN OUTLOOK BG Hack -->
<div style="background:#409bab url(https://www.mysite.com/emailBg.gif);">
  <!--[if gte mso 9]>
  <v:background xmlns:v="urn:schemas-microsoft-com:vml" fill="t">
    <v:fill type="tile" src="https://www.mysite.com/emailBg.gif" color="#409bab"/>
  </v:background>
  <![endif]-->
<table>
… my content & layout here
</table>
</div>
<!-- END OUTLOOK BG Hack -->

The results is much better.  In Outlook 20013, it works perfectly.  In Outlook 2010 & 2007 they are dropping the middle of the three tables, which is likely an easy fix.

Note: I added the following to the

head

a while back:

<meta content=“IE=9” http-equiv=“X-UA-Compatible” />

I may try testing with that removed too, however that is not likely the culprit of th remaining bugs.



10:28 Update:
Turns out that I AM NOT using the VML hack and still seeing the problem.  In fact, in another template where I AM using the VML hack, the two and three column aligned tables are working.

10:24
I too am seeing the same problem.  I have a one, two, and three column responsive email that works great everywhere except for Outlook 2007/2010/2013.  It is a low volume email client, so it is not a huge deal, but it is bugging me.  I am also using the VML background image hack.

I've tried quite a few work arounds and no solution yet. 

Here is what I've tried so far:
1. wrapping a <div> around the three aligned tables and applying clear:both to the <div>
2. before/after the three aligned tables <br style="clear:both;" />
3. aligning left and right and center combos

I'll keep testing and post back if I figure it out.  What I'll try next:
A. apply align to a <div>, <span>, <p> (with the above mentioned hack(s)) wrapped around the aligned tables
B. Try different display properties on the aligned tables via CSS (inline-block, table, etc.)

Note: @jeremypeter's idea is a good one too - I will also try that.  @jeremypeter's approach works very well in web browsers that are less capable than today's mobile browsers.

May tweet about it here @chsweb… stay tuned.


Web/App & Experience designer by degree, former PMO, logo designer & founder of @WePiphanyBooks. Designing solutions that save time, feel good & make money.
Redferret, 3 years ago

I doubt you'll see much luck I'm afraid, Outlook 07+ adds a single space after every table, normally this isn't a problem because on most tables it sits outside the container but when you attempt to put tables side by side that space pushes the second table beyond the container width.

you can reduce the size of the space to a single pixel and use borders to get the same result but then the math gets complicated.

Jeremy's solution is the way to go, and if you need to remove the alignment on your tables use float:none !important;


Gmail app apologist
jmp909, 2 years ago

try this bit of code i found.. it puts an extra column in between the 2 tables for outlook.

</table> <!-- end of left table -->
    <!-- > THIS BIT IS THE KICKER < whack in a column if Outlook -->
    <!--[if mso]></td><td><![endif]-->
    <!-- Brilliant. -->
<table> <!-- start of right table -->
zerocents zerocents, 2 years ago

It's worth noting here that alignments do not work on tables/images inside vml shapes.


Michael Muscat
kydeck, 2 years ago
jmp909 :

try this bit of code i found.. it puts an extra column in between the 2 tables for outlook.

</table> <!-- end of left table -->
    <!-- > THIS BIT IS THE KICKER < whack in a column if Outlook -->
    <!--[if mso]></td><td><![endif]-->
    <!-- Brilliant. -->
<table> <!-- start of right table -->

Thank you jmp909, this fixed worked for me and is much simpler than Email on Acid's fix (which didn't work for me anyway). Was banging my head against the wall with this bug!

circa1977 circa1977, 2 years ago

@jmp909 Have you tried that technique where source order of your tables (for a responsive layout) gets flipped? With align=right first and align=left second?

<table align="right" border="0" cellpadding="0" cellspacing="0" width="80" class="m-inline">
    <tr>
        <td height="72">Website</td>
    </tr>
</table>
<!-- > THIS BIT IS THE KICKER < whack in a column if Outlook -->
<!--[if mso]></td><td><![endif]-->
<!-- Brilliant. -->
<table align="left" border="0" cellpadding="0" cellspacing="0" class="m-inline">
    <tr>
        <td height="72"><img src="nts-logo@1x.png" /></td>
    </tr>
</table>

I'm seeing them left to right in Outlook 07/10/13 where other clients pull the first to the right and the second to the left.

Mark


Keep up with the latest developments that impact how you work with the Web.
Subscribe now - http://clearboldne.ws
circa1977 circa1977, 2 years ago

@jeremypeter I've tried your display: block trick on TDs and can't get them to stack on small screens in Safari. Anything else you're doing?

Thanks!


Keep up with the latest developments that impact how you work with the Web.
Subscribe now - http://clearboldne.ws

Join 200,000 companies around the world that use Campaign Monitor to run email marketing campaigns that deliver results for their business.

Get started for free
1-888-533-8098