2

I'm having issues with the Outlook Web App (OWA). Needless to say, there are numerous issues with various Outlook clients, but OWA is the least documented one I've come across.

The code below works perfectly in all clients, Outlook 2000-2013, GMail, Yahoo, AOL, but in OWA, the text is always set to text-align: justify and I can't override it.

<table width="100%" cellpadding="0" cellspacing="0" border="0">
  <tr>
    <td align="left" width="208" valign="top">
      <div><multiline label=”Body”>
        Dummy text goes in here, blah blah blah. Man, I'm hungry.
      </multiline></div>
    </td>
  </tr>
</table>

So far I've tried setting:

  • text-align: left
  • text-align: left !important
  • float: left
  • float: left !important

On the following elements:

  • <table>
  • <td>
  • <div>
  • <span>
  • <multiline>
  • .left as as class

Also, a slightly unrelated note, but the

<div><multiline label="Body"> content </multiline></div>

takes care of the double line spacing that only occurs in OWA.

Any ideas on how to set text-align: left?

itsclarke
  • 8,622
  • 6
  • 33
  • 50
  • Have you tried removing the DIV? In general it isn't recommended to use DIVs etc in HTML emails. You should pretty much program like it's 1998 (or thereabouts). If you remove the DIV and/or the multiline is the text aligned left? – Billy Moat Mar 04 '14 at 16:46
  • I agree with Billy. Remove the div and your `align=left` in the `` should work. You can keep your Campaign Monitor multiline tags there. I noticed the quote marks in your multiline label are not the correct type. Long shot, but this could possibly also have an effect. – John Mar 04 '14 at 17:58
  • @BillyMoat The problem is, when I remove the `div` the `line-height` is about double, which is the only reason I have the `div` to begin with. – itsclarke Mar 04 '14 at 21:35

2 Answers2

1

I encountered this exact issue in OWA, @John's answer to remove align="left" from the wrapping <td> cell is the way to go.

I wrapped my text in a <span> tag which gave me control over line-height. Hope that helps!

my code:

<td class="center respHead" valign="top" bgcolor="#FFFFFF" style="font-size:26px;line-height:30px;font-weight:bold;padding-left:20px;text-align:left !important">
    <span style="color:#010101;font-size:26px;line-height:30px;font-weight:bold">
       Previously Justified Content
    </span>
</td>
John Perea
  • 11
  • 1
-1

I have had the exact same problem and today I found the solution. :) First you need to force all text to the left and use classes for centered / right aligned text.

CSS:

td {
    text-align: left !important; /* Set all text to left as default to overwrite OWA text-align justify */
}

td.center {
    text-align: center !important; /* text-align center for most email clients, OWA doesn't recognize this */
    text-align: center; /* OWA fix, overwrites left !important with this */
}

td.center * {
    text-align: center; /* Outlook 07,10,13 fix */
}

td.right {
    text-align: right !important; /* text-align right for all most email clients, OWA doesn't recognize this */
    text-align: right; /* OWA fix, overwrites left !important with this */
}

td.right * {
    text-align: right; /* Outlook 07,10,13 fix */
}
samisiuvatti
  • 1
  • 2