Solved

Vexing problem with Outlook Causing Spaces in HTML Email

Posted on 2013-06-05
21
366 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 82

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 21

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
 

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 21

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 21

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 21

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 82

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
Free Trending Threat Insights Every Day

Enhance your security with threat intelligence from the web. Get trending threat insights on hackers, exploits, and suspicious IP addresses delivered to your inbox with our free Cyber Daily.

 

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 82

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 21

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 21

Expert Comment

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

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 78

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 21

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

Find Ransomware Secrets With All-Source Analysis

Ransomware has become a major concern for organizations; its prevalence has grown due to past successes achieved by threat actors. While each ransomware variant is different, we’ve seen some common tactics and trends used among the authors of the malware.

Join & Write a Comment

Suggested Solutions

If you don't know how to downgrade, my instructions below should be helpful.
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
In this tutorial viewers will learn how to embed videos in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <video> tag to insert a video. Define the src as the URL of your video; this is similar to …
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)

747 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

18 Experts available now in Live!

Get 1:1 Help Now