Menu icon Foundation
Thunderbird Table Issue

I'm in the QA stages of my email template and it's rock solid across all email clients...except Thunderbird. My <table class="row"> elements aren't stacking, rather they are floating to the right of each other. Screenshot attached.

 

Thunderbird Tables Floating Right

 

Any ideas on why this would be happening?

emailthunderbird

I'm in the QA stages of my email template and it's rock solid across all email clients...except Thunderbird. My <table class="row"> elements aren't stacking, rather they are floating to the right of each other. Screenshot attached.

 

Thunderbird Tables Floating Right

 

Any ideas on why this would be happening?

Tony Strack 8 months ago

So I figured out that Thunderbird strips out the Doctype. I loaded my HTML into Firefox and it rendered correctly, but once I stripped out the Doctype, it rendered like the screenshot above.

Is there a way to force the Doctype? Or use a specific one? Currently I'm using: 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Wally Glenn 8 months ago

I'm not having any troubles using this doctype: 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Is there something that is stripping it out of your gulpfile when you run foundation build to create your final emails? 

Tony Strack 7 months ago

I believe that the Thunderbird email client itself is stripping out the doctype. Certain email clients do this: https://www.emailonacid.com/blog/article/email-development/doctype_-_the_black_sheep_of_html_email_design

Another thing I noticed while troubleshooting is that my email CMS (HubSpot) uses an ID to inline styles. This is done so that it works for email clients that don't support <style> in the head: https://www.campaignmonitor.com/css/style-element/style-in-head/

When I take out the inline functionality, the email renders correctly in Thunderbird. But in turn, no longer renders correctly in those email clients that don't support <style> in the head.

I'm getting closer to a solution based on those two findings, but still not quite ther

James Donnelly 7 months ago

Hi Tony,

You probably are but are you running npm run build to get an inlined HTML file?

JD

Tristan H 6 months ago

Hey Tony, did you ever end up finding a solution to this?

Facing the same issue with my Foundation emails.

Tony Strack 6 months ago

No. However, I have narrowed it down to the inliner that the CMS (HubSpot) uses. HubSpot wraps any styles in the <head> in a <div> with an ID that takes care of the inlining on the backend.

If I remove the ID from that div, essentially eliminating the inlining process, the email renders fine in Thunderbird.

But I need the utilize inlining for email clients that require it, such as Gmail. It works perfectly fine for those email clients when inlined.

At this point, I'm just not supporting Thunderbird, but would love a solution if anyone has one.

Harry about 2 months ago

I found my problem as I had the same issue was any tables with align="left", align="center", align="right" were causing the layout to completely break like the screen shot at the top of this page.

Once I removed the alignment off the tables, it displayed perfect. (Silly that you have to do this but oh well...)