Go Premium for a chance to win a PS4. Enter to Win

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 392
  • Last Modified:

Vexing problem with Outlook Causing Spaces in HTML Email

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
JaseSt
Asked:
JaseSt
  • 9
  • 7
  • 3
  • +1
1 Solution
 
JaseStAuthor Commented:
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
 
Dave BaldwinFixer of ProblemsCommented:
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
 
Kim WalkerWeb Programmer/TechnicianCommented:
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
Veeam Disaster Recovery in Microsoft Azure

Veeam PN for Microsoft Azure is a FREE solution designed to simplify and automate the setup of a DR site in Microsoft Azure using lightweight software-defined networking. It reduces the complexity of VPN deployments and is designed for businesses of ALL sizes.

 
JaseStAuthor Commented:
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
 
Kim WalkerWeb Programmer/TechnicianCommented:
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
 
Kim WalkerWeb Programmer/TechnicianCommented:
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
 
JaseStAuthor Commented:
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
 
JaseStAuthor Commented:
FLSNewsletterTemplate2.html

latest code used  - still getting spaces as show in above post
0
 
Kim WalkerWeb Programmer/TechnicianCommented:
Rowspan and colspan. I know it's a major overhaul, but get rid of all of them.
0
 
Dave BaldwinFixer of ProblemsCommented:
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
 
JaseStAuthor Commented:
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
 
Dave BaldwinFixer of ProblemsCommented:
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
 
Kim WalkerWeb Programmer/TechnicianCommented:
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
 
JaseStAuthor Commented:
I'm breaking it up into three tables, one stacked on to another and we'll see how that works.
0
 
Kim WalkerWeb Programmer/TechnicianCommented:
Try mine first. It may save you some time.
0
 
David Johnson, CD, MVPOwnerCommented:
I got rid of some some padding in your css and it renders fine now.
we-would-like-to-take-this-time.zip
0
 
JaseStAuthor Commented:
xmediaman, your template worked! Thank you. What did you do?

ve3ofa, I'll also take a look at yours in Outlook, thanks.
0
 
JaseStAuthor Commented:
although, it did leave a space in the column on the right:space
0
 
David Johnson, CD, MVPOwnerCommented:
change your base-height from 180% to normal
we-would-like-to-take-this-time.zip
0
 
Kim WalkerWeb Programmer/TechnicianCommented:
I just took out all the rowspans and colspans and used nested tables instead.
0
 
JaseStAuthor Commented:
sorry, forgot about accepting this one. It works great!
0

Featured Post

Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

  • 9
  • 7
  • 3
  • +1
Tackle projects and never again get stuck behind a technical roadblock.
Join Now