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 10 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 10 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 9 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 9 months ago

Hi Tony,

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

JD

Tristan H 8 months ago

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

Facing the same issue with my Foundation emails.

Tony Strack 8 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 4 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...)

Dimitar Stojanov 12 days ago

This solved my issue:

table {
  float: none !important;
}

I also inlined all CSS and works in Gmail, Thunderbird and Outlook 2016 alike (most likely other email clients work too). I don't know how, but somehow the tables are floated to the left although I've never specified that nor find it in the Foundation for Emails code. Very strange...

Edit: I've tested this with online Hotmail/Outlook and Yahoo email clients and it worked without issues. Also inspected the HTML with Google Dev Console, and it gives `float: left;` for all tables in the default browser style attributes (which are hardcoded in the browser). So the only solution is to override it with your own `float: none;` style for the table element.

Tony Strack 11 days ago

Dimitar...You just made my day. That worked. Thank you!

Dimitar Stojanov 11 days ago

Hi Tony, I'm glad that fixed the issue!