Solved

html email issue with Microsoft Outlook

Posted on 2013-06-17
14
472 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 83

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 22

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 22

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
Zoho SalesIQ

Hassle-free live chat software re-imagined for business growth. 2 users, always free.

 
LVL 22

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 83

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 22

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 83

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

Control application downtime with dependency maps

Visualize the interdependencies between application components better with Applications Manager's automated application discovery and dependency mapping feature. Resolve performance issues faster by quickly isolating problematic components.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Marketing can be an uncomfortable undertaking, especially if your material is technology based. Luckily, we’ve compiled some simple and (relatively) painless tips to put an end to your trepidation and start your path to success.
Owning a franchise can be the dream of a lifetime. It provides a chance for economic growth. You can be as successful as you want.  To make your franchise successful, you need to market it successfully. Here are six of the best marketing strategies …
HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…
Learn how to set-up custom confirmation messages to users who complete your Wufoo form. Include inputs from fields in your form, webpage redirects, and more with Wufoo’s confirmation options.

864 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

19 Experts available now in Live!

Get 1:1 Help Now