Community Forum

Over the years we have built up a community of email marketers, coders and designers that live and breathe email.

Use the Email on Acid Forum like your virtual water cooler: Stop by to discuss email code, quirky clients and fixes and post your issues (with an example of the code) for our community to offer its assistance.

 
   
Rendering Issues with alignment and blank content areas

brandthropology

Newbie
Total Posts:  3
Posted: 30 November 2016 12:36 PM

This is my first email coding project. I’m sure I’m using all sorts of incorrect code.

Currently Apple email looks good. Outlook 2011 looks good, but most other Outlooks do not.
Can you suggest a best course of action to work through the issues (see attachment)?

Here’s a link to my code:

http://vnr.brandthropology.com/files/emailsignature/vnr-signature-tables.html

Image Attachments
help.jpg

 

Geoff Phillips

Avatar
Sr. Member
Total Posts:  386
Posted: 30 November 2016 01:24 PM
[ # 1 ]

brandthropology,
Welcome to the forum!

Email coding can be a bit of a challenge. Here are a few pointers on this code:

You must always nest TR tags inside table tags, and TD (or TH) tags inside TR tags. You can’t follow a TR with a P, because it needs a TD to hold that P.
TRs cannot have width or height set on them. Set this instead on the table or TD.
When using the width or height attributes, choose a dimension in % or pixels. If you use pixels, do not put “px” in the value. For example: width=“590” or width=“100%”. Do not use: width=“590px”
Images need to have an absolute path, not a relative one. https://www.emailonacid.com/help-center/article/testing/email-testing/what-is-an-absolute-image-reference
All rows in the table need to have the same number of TDs. If you have a different number, you’ll need to use rowspan or colspan to make the table render correctly.
In general, “clear:both” CSS doesn’t work in email. Instead you’ll want to use stacking tables.
If you use a nonstandard font like Roboto, Outlook will display it in Times New Roman instead. Fix here: https://www.emailonacid.com/blog/article/email-development/custom-font-stacks-in-outlook

I hope this helps!


 

brandthropology

Newbie
Total Posts:  3
Posted: 06 December 2016 08:49 AM
[ # 2 ]

I’m just back now from vacation and will try these suggestions. Thank you for your patient directions for a newbie!