Exit
  • Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
  • 한국 커뮤니티
0

Spacing between table rows in HTML mail template

New Here ,
Mar 01, 2022 Mar 01, 2022

I am trying to create a simple HTML mail in Dreamweaver so I started with one of the templates. I can't figure out why I have this spacing between my table rows. Padding, spacing, border-collapse etc. are all set up, but the problem perists. Anybody have an idea???

 

table {
border-spacing: 0 !important;
border-collapse: collapse !important;
table-layout: fixed !important;
margin: 0 auto !important;

}

 

<table cellpadding="0" cellspacing="0" border="0" height="100%" width="100%" bgcolor="#e0e0e0" style="border-collapse:collapse;">

 

888
Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Mar 01, 2022 Mar 01, 2022

We need to see your entire bit of code and also understand the email client you are troubleshooting.  In most cases you are better off developing emails in an email platform as opposed to Dreamweaver as there are so many nuances in coding and development that you really have to keep things as simple as possible. Also, for the fact that some clients cannot read CSS from the head still.  Here's a full guide I would reference to help with understanding what works/doesn't work in the many different clients https://www.campaignmonitor.com/css/

Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Mar 01, 2022 Mar 01, 2022

Email clients like Outlook have varying degrees of support for HTML and CSS.  Many do not even support images.

 

Litmus has responsive email templates that have been industry tested to work with most major email clients and services like Gmail.  Keep emails simple and start with one of these free templates.

https://litmus.com/community/templates

 

Nancy O'Shea— Product User, Community Expert & Moderator
Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Mar 01, 2022 Mar 01, 2022
LATEST

If there are images in your table cells, the default browser behavior is for them to be given room for text-descenders (for example, lower case j, y, g) so text doesn't overlap the container. This gives the appearance of a padding setting on the bottom between images and their parent containers, which could appear as table-cell padding in the right circumstance.

There are a bunch of ways to fix it, changing the images to display:block, or using vertical-align:bottom on the images will do the trick.

If that's the issue.

 

It's all guessing without seeing the entire code of the page though.

Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines