Outlook 2013 Destroys Layout

  • 0
  • 1
  • Question
  • Updated 4 years ago
  • Answered

I have tested my mailing in the following mail clients:

  • Gmail
  • Outlook.com

In each of the following browsers:

  • Chrome v35
  • Firefox v30
  • IE v11
  • Opera v20
  • Safari v5

All in Windows 7. Below is pretty representative of what I see across the board:

However, when I look at the mailer in Outlook 2013, I see this:

Extra space is being inserted between the title area and the body content. Header text is changed to black, loses center alignment and seems to have no left padding. red borders are not flush like the image above, but are adjusted a few pixels to the left or right out of alignment.

I'm sure that Outlook 2013 is not the only email client that doesn't render correctly, but it is a major one. Could someone please shed some light on what I, if anything, I can do to get Outlook to render correctly? Thank you.

Photo of Diesel Performance Parts

Diesel Performance Parts

  • 11 Posts
  • 1 Reply Like
  • frustrated

Posted 4 years ago

  • 0
  • 1
Photo of Ted Hogan

Ted Hogan, Champion

  • 145 Posts
  • 83 Reply Likes
You are not alone. I'm having the same problem with extra spacing and alignment problems in Outlook 2007 (my employer's choice of mail clients, not mine).  

Let me be quick to say in my experience, the Emma emails I send out seem to render correctly most everywhere else I test them -- on PCs and Macs, in multiple other email clients and most webmail services, and including most mobile phones and tablets.

So, I have come to accept the notion that MS Outlook is the outlier here, and it will frequently render layout code and CSS styles the way it wants to.  Outside of using Microsoft Word to format email specifically for Microsoft Office recipients (clearly not practical for sending email through Emma), I'm not sure there is much you can do to change things.

Edit:
See Cassie Berman's reply under this post for her take on what is happening with Outlook 2013.

https://community.myemma.com/emma/topics/image_sized_wrong_when_viewed_on_microsoft_2013


Good luck!
Ted
(Edited)
Photo of Marc Russell

Marc Russell

  • 64 Posts
  • 40 Reply Likes
Can you post the HTML of that first text block that has the Protip title in it?
Photo of Diesel Performance Parts

Diesel Performance Parts

  • 11 Posts
  • 1 Reply Like

Ted, I will read over the link today. Thank you.

Marc, here is a link to html you asked for (https://drive.google.com/file/d/0B0l-P_LsFPkEcGRQR1pMWV9zR3M/edit?usp=sharing). Let me know if you have any problems.

Photo of Marc Russell

Marc Russell

  • 64 Posts
  • 40 Reply Likes
Much to Ted's point as well, Outlook in general is terrible at following any type of web standard and just doesn't take kindly to CSS styling, inline or otherwise.

<div class="redblock bigtext" style="font-size: 20px;color: rgb(255, 255, 255) !important;font-family: Arial Black, Avant Garde, Arial, sans-serif !important;text-align: center !important;text-shadow: 2px 2px 0 rgba(0, 0, 0, 1)">Protip: Know Your Supply Tubes</div>

For example, your header bar has many things Outlook is ignoring. Try the simplified version below:

<div class="redblock bigtext"><p style="font-size: 20px; color: #ffffff; font-family: Arial, sans-serif; text-align: center;"><strong>Protip: Know Your Supply Tubes</strong></p></div>

Arial Black isn't really a consistent web font, so although a system most likely has it, Outlook isn't smart enough for that. I just came across a bug this week in Outlook 2010 that if text doesn't have <strong> on it as the very first wrapping element, it will not show up that way. So I fixed that in the example given as well.
(Edited)
Photo of Ted Hogan

Ted Hogan, Champion

  • 145 Posts
  • 83 Reply Likes
There is no question in my experience that MS products seem to want tags nested in a certain order or those tags may not all render correctly. Marc, I suspect the <strong> "bug" you stumbled across might actually be considered a "design feature" by the folks in Redmond. :)
Photo of Diesel Performance Parts

Diesel Performance Parts

  • 11 Posts
  • 1 Reply Like
Marc, thanks for taking a look at the code. I will work in your html into the header block and see what comes out. I'll post again once I see some test messages.

Sometimes I feel that my relationship with MS products is like Stockholm Syndrome. After reading Ted's link that explained that Outlook uses Word to render email, I was dumbstruck.
Photo of Diesel Performance Parts

Diesel Performance Parts

  • 11 Posts
  • 1 Reply Like

Okay, I got this fixed, but in order to work it out, I had to go ahead and create a new blank template and manipulate it to look as close to the modified Farnsworth House template we were using. Preview in Outlook:

The red header section is an html block with margins, padding and background color set via the cog menu. I then have another html block with the styling for the header font as follows:

<style>.e2ma-template h1 {
    color: #FFF;
    font-size: 20px;
    font-weight: bold;
    text-align: center;
    text-shadow: 2px 2px 0 rgba(0, 0, 0, 1)
    }</style>

The border on the left and right edge of the header block doesn't quite line up with the border of the content block that follows, but it is subtle, so I'll accept it.

(Edited)
Photo of Marc Russell

Marc Russell

  • 64 Posts
  • 40 Reply Likes
Double check your margin/padding in the content block and vice versa, those should be able to be lined up alright.
Photo of Diesel Performance Parts

Diesel Performance Parts

  • 11 Posts
  • 1 Reply Like
I explained poorly. The header and content borders line up correctly in all of my test mailings with the exception of Outlook. Adjusting margin/padding doesn't seem to resolve this.
(Edited)
Photo of Marc Russell

Marc Russell

  • 64 Posts
  • 40 Reply Likes
Can you paste the code for both? Or if you would like, email me the full template code and I can take a look at it in Outlook for you. marc.russell@raymondjames.com

Use a site like: http://dpaste.com/

(Edited)
Photo of Diesel Performance Parts

Diesel Performance Parts

  • 11 Posts
  • 1 Reply Like
Marc, I emailed you a link to the source. Thanks for taking the time to look it over.
Photo of Marc Russell

Marc Russell

  • 64 Posts
  • 40 Reply Likes
Hey, sorry I haven't gotten to this yet. I've been buried with work/life. I will get into it this week and get back to you, I promise.
Photo of Marc Russell

Marc Russell

  • 64 Posts
  • 40 Reply Likes


So I hope this helps somewhat. The background is Outlook 2010 PC, the foreground is Outlook for Mac.

2 things stand out here. The font is dying in Outlook PC, I would stick with using Arial, I think I saw Helvetica in there in some places.

The header push that is happening is actually being caused by the header and not the box below. Check margin/padding and make sure to just keep it as simple as possible. Microsoft products aren't all that smart. :)

Can you send me a version that has the text in a P tag instead of the DIV like the code I gave you before?