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
JaseStAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

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
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

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

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
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
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
Email Clients

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.