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


Newsletter Consistency

Posted on 2011-02-17
Medium Priority
Last Modified: 2012-05-11
I have an HTML newsletter that I am launching from Vertical Response.  It is displaying properly in Outlook and Yahoo, but in Hotmail and Gmail it creates spacing or padding between table rows.  Does anybody know a workaround to this?  I have tried everything and the extra space doesn't show up in Firefox firebug or the source code.  I am attaching the newsletter.
Question by:kageboy2003
  • 4
  • 2
LVL 84

Expert Comment

by:Dave Baldwin
ID: 34922848
This page http://www.campaignmonitor.com/css/ shows things that Gmail doesn't support.  The only thing I see right off is the <style> tag which Gmail doesn't support anywhere in the document.

Author Comment

ID: 34926331

Thank you for that valuable information.  After looking through the CSS guide, I can still find no reason that my table rows have spacing in between them in Hotmail and Gmail.  The <style> tag in the body was added after the fact as an attempt to see if padding the tables would eliminate this issue.  I will upload a screenshot so you can see what I am talking about.


Author Comment

ID: 34928015
Here is a screenshot of both outlook 2007 and hotmail views of the newsletter in question.  As you can see from my code that I uploaded in the previous post, There is no reasoning I can see why there is space between the table rows.  Is there another method I am not using?  Maybe applying a height to the tables?  I thought of that, but the breaks are between the table rows and not the tables.
Industry Leaders: 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!

LVL 84

Expert Comment

by:Dave Baldwin
ID: 34928962
Try adding style="padding:0px; margin:0px;" to all of your images.  Those lines are at the image boundaries and the CSS on Hotmail may be breaking your display.

Accepted Solution

kageboy2003 earned 0 total points
ID: 35305709
After some research, I found out that using style="line-height:-1px;" in all the <td> tags that contain images, and style="display:block;" in all the <img> tags corrects the issue across all browsers.

Author Closing Comment

ID: 35339943
I was offered some really good starting points, but still nothing seemed to fix the issue.  After doing some further research and testing, I found this solution to correct the issue.

Featured Post

Hire Technology Freelancers with Gigs

Work with freelancers specializing in everything from database administration to programming, who have proven themselves as experts in their field. Hire the best, collaborate easily, pay securely, and get projects done right.

Question has a verified solution.

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

Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
Finding original email is quite difficult due to their duplicates. From this article, you will come to know why multiple duplicates of same emails appear and how to delete duplicate emails from Outlook securely and instantly while vital emails remai…
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)
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …

971 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