Yahoo! Mail HTML Email Alignment Issue

Question

I work on HTML email campaign builds on a daily basis and in the past 24 hours I've seen all of my emails aligning left. This includes the email campaigns I've built previously (which were tested in Yahoo! Mail and used to align center).

Has anyone else come across this? Any ideas what is causing it and whether there is a fix that can be added?

The standard coding used is tables with align center. This now doesn't work and all tables align left it seems.

Czarist

Yes i confirm this too, the newsletter I sent yesterday aligned left, seems they strip any center alignment from now on. – Apsis

Does anyone have any information on why they did this or if it was intentional? Seems like a bug on Yahoo's end. – Bumblebee

Answer 1

I've found a solution for this.

On the outer-most 100% width and centrally aligned table add this code:

style="table-layout: fixed;"

This should fix it.

Czarist

This made the column expand the full width of the email which looked bad. I used <div align='center'><table>...</table></div> which worked for me. – Alpenhorn

This doesn't work for me, instead I added to the main table wrapper a margin style : style="margin:0 auto;". Hope it helps – Gur

This doesn't work because on other email clients it causes the content to be cut off rather than be 100% width. – Veronaveronese

Answer 2

Add a class to the style block in the head of the email.

.table-center { table-layout: fixed; margin: 0 auto; }

Add this class to the outermost table to get the body centered in the window. Then add it to descendant tables as needed for center alignment.

Bumblebee

Answer 3

I tried both of the solutions provided and neither was able to solve the problem. I believe there is a larger issue – Yahoo! mail wraps the email in several div tags, one with a class of "body". This div is given a width value of "auto".

When I change this value, via Chrome developer tools, from "auto" to "100%" it fixes the problem.

Unmodified:

"Fixed":

Because this div is outside of the reach of my style block in the head of the email I do not believe this issue can actually be fixed. I would classify this as a bug on Yahoo's part.

Selby

Hi Istanard, make sure you wrap a 100% width table around the outside of your entire email, within that have a "content" table at the width you would like your email (best practice is 640 or 600 pixels). Within the outer table include style="table-layout: fixed; margin: 0 auto; - within the outermost TD include an align="center" tag too. – Czarist

Answer 4

I second Ed Johnson's answer here regarding the "fixed; margin: 0 auto;" style on the outer table. I just used this fix instead of the "table-layout: fixed" style because the latter seemed to break my responsive email style.

Annexation