While many people dismiss Yahoo as an outdated company, their web-based Mail service is still a force to be reckoned with. Currently holding the #4 position in our Email Client Market Share rankings, Yahoo Mail has a huge user base. Even the smallest email lists are sure to have a few Yahoo users, which can be disconcerting when Yahoo introduces a new bug that affects how email designs are displayed, like the recent Yahoo Mail layout problem we’ve been seeing.
 | How many of your subscribers use Yahoo?When it comes to email marketing, it’s all about your audience. Use Litmus Email Analytics to discover which email clients are most popular with your subscribers. Sign up free! |
Such was the case a few months ago when email designers noticed that Yahoo was no longer properly aligning tables.
The Problem
As a necessity, email designers rely on HTML tables to structure the content of their campaigns. While there are a lot of hacks and tricks to working with HTML tables, one of the most commonly used techniques is relying on the align attribute to position the table. There are three values for the align attribute:
- Left – aligns the table to the left of the display.
- Center – aligns the table to the center of the display.
- Right – aligns the table to the right of the display.
Many email designers use the align=“center” attribute to center tables in their campaigns. It helps prevent content from pushing up against the edges of a preview pane and generally makes for a better looking email. It’s a technique we use in our own emails.
Unfortunately, a while back, Yahoo updated their Mail application and created a bug with the align attribute. One of our Community members, Mark, identified an issue where the align=“center” attribute doesn’t work, and tables are displayed to the left of their intended position, like so:
As you can imagine, this is a significant issue for designers who have labored over every detail of their email campaign.
The Fix
After a few false starts and some haphazard testing, a solution was discovered. Mark Robbins posted a solution in the Community that used the CSS table-layout property to fix the issue. When applied to the outermost container table, the table-layout property set with a value of ‘fixed’ ensures that the align=“center” attribute works as intended for any nested tables.
Pre-Fix
<!-- CONTAINER TABLE -->
<table width="100%">
<tr>
<td>
<!-- NESTED TABLES AND EMAIL CONTENT -->
</td>
</tr>
</table>Post-Fix
<!-- CONTAINER TABLE -->
<table width="100%" style="table-layout: fixed;">
<tr>
<td>
<!-- NESTED TABLES AND EMAIL CONTENT -->
</td>
</tr>
</table>Fortunately, including this CSS property doesn’t affect how other email clients render campaigns, meaning it’s safe to include in your emails from here on out. Better yet, there is some evidence that the the table-layout: fixed; declaration can actually improve rendering performance.
With that update to our code, you can see that our layouts display exactly as intended!
A Note on Safari
After posting this article, one of our readers noticed an issue with the fix when viewing in Safari:
https://twitter.com/joon82/status/520307675289378816
After investigating, we found that older versions of Safari likely don’t support the table-layout property. I tested the fix in Safari 7.0.6, where it worked flawlessly, but in Safari 5.1.10, the fix did not work—resulting in the left-aligned tables.
Always Test Your Emails
Undocumented changes to email clients can cause your emails to break for subscribers, which is why it’s important to test every campaign before you hit “send”. Litmus allows you to send with confidence by quickly testing your emails in over 50 different email clients.
Try us, free!
Jason Rodriguez was the Community & Product Evangelist at Litmus
