Solved

html email issue with Microsoft Outlook

Posted on 2013-06-17
14
469 Views
Last Modified: 2013-06-18
See this html email: http://www.atlantic-ts.com/e-shots/neolt/newsletter_june.html

It views correctly in all major email software readers except Microsoft Outlook 2007 & 2010.

In outlook the APS banner on the left side bar is pushed down to the bottom.

Can you please advise why this is happening?

I have been using mailchimp.com to send the email if it makes any difference?
0
Comment
Question by:petewinter
  • 4
  • 4
  • 3
  • +1
14 Comments
 
LVL 53

Assisted Solution

by:COBOLdinosaur
COBOLdinosaur earned 50 total points
ID: 39253881
Outlook has very limited support for html and CSS.  this guide will help you understand what you can use to support Outlook:

http://www.campaignmonitor.com/css/

Cd&
0
 

Author Comment

by:petewinter
ID: 39253985
COBOLdinosaur - Thank, but I still can't find the issue. Can you please assist further?
0
 
LVL 82

Assisted Solution

by:Dave Baldwin
Dave Baldwin earned 50 total points
ID: 39254171
MailChimp has nothing to do with it.  The issue is that Outlook 2007 and newer use Microsoft Word for HTML rendering.  It appears that Microsoft Word 2007 HTML is at the level of IE4 according to a line in the HTML files it generates.  Internet Explorer 4 was released in September 1997, long before the current web standards.  You could run it if you have a Windows 95 or 98 (but not 98SE) system.

Frankly the alignment problem you have is minor in Outlook 2007 (IE4!).  I'm not sure it is fixable without grossly simplifying your HTML.
0
 
LVL 21

Assisted Solution

by:Kim Walker
Kim Walker earned 400 total points
ID: 39254186
It is virtually impossible to predict how Outlook will render an HTML email. One thing to bear in mind is that Outlook 2007 and 2010 use Microsoft Word as a rendering engine. To some extent, you can open your HTML in Word and see what it might look like in Outlook. Notice that I said "what it MIGHT look like."

Two things I've come to count on is that rowspan and colspan are trouble and never assume a default style will remain the default from top to bottom. I once spent a couple of days troubleshooting an HTML email in Outlook to discover that the first two rows of the table defaulted to zero padding in the cells and the bottom several rows defaults to 10px padding in the cells. I never figured out why, but since then I set the padding on EVERY td to zero.

But that's beside the point. I notice that this banner is in a nested table with four rows of one table cell each. This is the only one of the four with a height property. (By the way, Outlook handles height as min-height.) I have to wonder if the table is somehow inheriting the height of it's parent table cell and that might be throwing things off.

I would try giving the table a height and make all four table cells consistent; either give them all a height property or remove the height property from all of them.

Can you post a screen capture of what it looks like in outlook?
0
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 39254196
It's Outlook.  Every time Microsoft does an update it seems to change what works and does not work for HTML and CSS.  It is full of quirks and queer behavior.  My best guess would be that something in the table attributes or properties, are screwing up the way the image gets rendered.  You are probably going to have to do trial and error on what you are applying to the structure, and the elements within the table structure to find what the version of Outlook you are using does not like.  

Getting it fixed in that version does not guarantee that it will work for other versions or even for different updates.

Cd&
0
 
LVL 21

Expert Comment

by:Kim Walker
ID: 39254257
OK. This makes absolutely no sense to me (but after all, it is Microsoft).

Remove the cellpadding of 3 from the table that has the social media links AND remove the extraneous <br> tags from above and below the "ATS_LFT_Banner_v4.jpg" image. That seems to fix the problem in Word. You can add padding to the cells that have the social media links.
0
 

Author Comment

by:petewinter
ID: 39254308
Thanks all for comment. I'm sure we all agree that our life's as developers would be so much easier with out Microsoft!

xmediaman - Thanks for your suggestion which does fix the issue, but I do want them line spaces.

It seems that the issue is related with the height somewhere as if I reduce the height of the APS-CCi-Banner-v3.jpg image from 720px to 600px it displays in the correct place.

I really can't understand why this would be an issue though as the right content column is longer than the left.

I have also notice that if I remove the right column the left hand column displays correctly.

If anyone can spot the issue I will be eternal grateful! :)
0
How to improve team productivity

Quip adds documents, spreadsheets, and tasklists to your Slack experience
- Elevate ideas to Quip docs
- Share Quip docs in Slack
- Get notified of changes to your docs
- Available on iOS/Android/Desktop/Web
- Online/Offline

 
LVL 21

Expert Comment

by:Kim Walker
ID: 39254336
I would replace the line spaces with margins. The line you're spacing has a 600px high image on it which could cause the line-height to inherit the image height unless you explicitly set the line height property.

Also, convert the document to HTML. There's no such thing and an X/HTML email. That could make a big difference.
0
 

Author Comment

by:petewinter
ID: 39254391
I thought outlook had an issue with margin's?

http://www.campaignmonitor.com/css/

How should I use it?
0
 
LVL 82

Expert Comment

by:Dave Baldwin
ID: 39254427
If you can easily make some adjustments that make it work better, Ok.  But you've been warned that Outlook will remain unpredictable.  It's HTML rendering comes from a time when it was all unpredictable.
0
 
LVL 21

Accepted Solution

by:
Kim Walker earned 400 total points
ID: 39254686
I've been working with this all afternoon and have come to the conclusion that the issue is page size. Outlook/Word has determined that the two images stacked on top of one another will not fit on a single page and so it pushes the bottom image to the top of the next page. I have been unsuccessful in coming up with a solution. If you turn on the border for the table on line 36 of your source code, you'll suddenly see a gap across the whole page just above the image that is out of place.

Sorry, but I have exhausted my efforts here.
0
 

Author Closing Comment

by:petewinter
ID: 39255494
Many thanks to you all. Especially xmediaman.

I can see how the page break causes the problem. I reduced the height of the "APS-CCi-Banner-v3.jpg" image 100px, then duplicated it 7 times to see where the break would appear for testing purposes.

I now understand the issue and will find a work around.

Thanks again!
0
 
LVL 82

Expert Comment

by:Dave Baldwin
ID: 39257117
That's good information, reduces the unpredictability of Outlook by 1 item.
0
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 39258007
reduces the unpredictability of Outlook by 1 item

Well... at least until the next release or update; but maybe longer, depending on how drunk the Outlook product manager gets during the approval stage in Redmond ;^).

Cd&
0

Featured Post

Better Security Awareness With Threat Intelligence

See how one of the leading financial services organizations uses Recorded Future as part of a holistic threat intelligence program to promote security awareness and proactively and efficiently identify threats.

Join & Write a Comment

Find out what Office 365 Transport Rules are, how they work and their limitations managing Office 365 signatures.
This article explains how to prepare an HTML email signature template file containing dynamic placeholders for users' Azure AD data. Furthermore, it explains how to use this file to remotely set up a department-wide email signature policy in Office …
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
Use Wufoo, an online form creation tool, to make powerful forms. Learn how to choose which pages of your form are visible to your users based on their inputs. The page rules feature provides you with an opportunity to create if:then statements for y…

757 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

23 Experts available now in Live!

Get 1:1 Help Now