Solved

Vexing problem with Outlook Causing Spaces in HTML Email

Posted on 2013-06-05
21
380 Views
Last Modified: 2013-06-25
I have been pulling my hair out trying to figure out the difference in the two attached files.

Linen.html when received in Outlook 2010  has no spaces, but FLSNewsletterTemplate2.html, despite adding the inline css style: style="padding:0px; margin:0px; border:0px;"
has spaces all over the place.

Any ideas why?linen.htmlFLSNewsletterTemplate2.html
0
Comment
Question by:JaseSt
  • 9
  • 7
  • 3
  • +1
21 Comments
 

Author Comment

by:JaseSt
ID: 39223357
It is true that the two templates uploaded are different in layout so I'm not saying they're identical, but are very similar.
0
 
LVL 83

Expert Comment

by:Dave Baldwin
ID: 39223442
First, remove the <script src="http:/html5shiv.googlecode.com/svn/trunk/html5.js"></script> .  Javascript is not supported in any email client that I know of.  Neither is HTML5.  Neither file is centered in IE8 while it is in Firefox.  But Outlook 2010 uses Microsoft Word for HTML display and editing and it's crippled.

There are a number of things that Outlook 2007/2010/2013 do not support in CSS.  http://www.campaignmonitor.com/css/
0
 
LVL 22

Expert Comment

by:Kim Walker
ID: 39223463
Generating html email for Outlook is vexing to say the least. It is a routine struggle for me.

Bear in mind that Outlook uses Word as the rendering engine for html emails. So if you open your HTML document in Word, you can get a reasonably accurate preview of what it will look like in Outlook.

Avoid any use of rowspan or column span. Use nested tables instead.

Never assume a consistent default style. A couple of years ago I spend a period of days tracking down a similar issue only to discover that the cells in the first few rows of my table defaulted to 0 padding. But the bottom several rows defaulted to 3px of padding. (I notice you are already setting a padding of 0 on your table cells. Keep it up.)
0
Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 

Author Comment

by:JaseSt
ID: 39223475
thanks, DaveBaldwin, and I will remove it, but both the attached files had this code and Linen.html displays correctly in Outlook where the other one does not.
0
 
LVL 22

Expert Comment

by:Kim Walker
ID: 39223477
It's also a good idea to set the vertical align attribute for all images to either top or bottom. The default value of baseline can sometimes spawn descender space below the image proportional to the line height and font size.
0
 
LVL 22

Expert Comment

by:Kim Walker
ID: 39223550
I also forgot to mention that you should forget everything you ever learned about writing efficient HTML code. Roll back the calendar to 1994 and write your HTML as if it were going backward in time. Use the most basic of tags and attributes.

Be sure to set width values for all your tables.

Avoid setting css width values and padding for paragraph tags (<p>).
0
 

Author Comment

by:JaseSt
ID: 39223588
appreciate the help and tips xmediaman, but do you see anything in my code (the FLSNewsletterTemplate2.html file) that is an offense to the parameters you mentioned?

I did insert align attribute for all the images and still the attached is what I"m seeing in Outlook.email
0
 

Author Comment

by:JaseSt
ID: 39223593
FLSNewsletterTemplate2.html

latest code used  - still getting spaces as show in above post
0
 
LVL 22

Expert Comment

by:Kim Walker
ID: 39223617
Rowspan and colspan. I know it's a major overhaul, but get rid of all of them.
0
 
LVL 83

Expert Comment

by:Dave Baldwin
ID: 39223636
On a slightly different subject, you do know that all of your external images will be blocked until the person receiving the message approves of loading them?
0
 

Author Comment

by:JaseSt
ID: 39223651
but the vexing issue to it all is that linen.html - which is a very similar template and has colspans - renders just fine in Outlook
0
 
LVL 83

Expert Comment

by:Dave Baldwin
ID: 39223755
One difference I notice is in the spacing row at the bottom with the blank GIFs.  The one that is failing is more complicated than the one that is not.  You might try simplifying the one that fails to see if it is affecting the layout.
0
 
LVL 22

Accepted Solution

by:
Kim Walker earned 500 total points
ID: 39223870
Anything that has the Microsoft label on it is vexing. Try this. It still has gaps when viewed in Word, but it looks pretty good in Outlook. You may still need to do a little adjusting.
test2.html
0
 

Author Comment

by:JaseSt
ID: 39223884
I'm breaking it up into three tables, one stacked on to another and we'll see how that works.
0
 
LVL 22

Expert Comment

by:Kim Walker
ID: 39223913
Try mine first. It may save you some time.
0
 
LVL 80

Expert Comment

by:David Johnson, CD, MVP
ID: 39224030
I got rid of some some padding in your css and it renders fine now.
we-would-like-to-take-this-time.zip
0
 

Author Comment

by:JaseSt
ID: 39224073
xmediaman, your template worked! Thank you. What did you do?

ve3ofa, I'll also take a look at yours in Outlook, thanks.
0
 

Author Comment

by:JaseSt
ID: 39224082
although, it did leave a space in the column on the right:space
0
 
LVL 80

Expert Comment

by:David Johnson, CD, MVP
ID: 39224141
change your base-height from 180% to normal
we-would-like-to-take-this-time.zip
0
 
LVL 22

Expert Comment

by:Kim Walker
ID: 39225377
I just took out all the rowspans and colspans and used nested tables instead.
0
 

Author Closing Comment

by:JaseSt
ID: 39276378
sorry, forgot about accepting this one. It works great!
0

Featured Post

Efficient way to get backups off site to Azure

This user guide provides instructions on how to deploy and configure both a StoneFly Scale Out NAS Enterprise Cloud Drive virtual machine and Veeam Cloud Connect in the Microsoft Azure Cloud.

Question has a verified solution.

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

Suggested Solutions

Many people use more than one email account and so it becomes difficult for them to manage them when they use separate accounts,  so, in this article, I have shared an easy way to add Other Mail Accounts in your Google Inbox. It helps to combine all…
The article shows the basic steps of integrating an HTML theme template into an ASP.NET MVC project
The viewer will the learn the benefit of plain text editors and code an HTML5 based template for use in further tutorials.
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.

749 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