Search code examples
htmlcsshtml-emailyahoo-mail

Yahoo changes width to min-width on td

Sorry, not 100% certain if this belongs here or Super-User group but...

I have an html email, with 4 icons that I want centered and slightly spaced.

So, I have a table with 4 set width cells and an extra empty one on either side. 

<table style="width:100%;border-collapse:collapse;table-layout:fixed;">
    <tr>
        <td></td>
        <td style="width:32px;padding:0 4px;"><a><img src="" /></a></td>
        <td style="width:32px;padding:0 4px;"><a><img src="" /></a></td>
        <td style="width:32px;padding:0 4px;"><a><img src="" /></a></td>
        <td style="width:32px;padding:0 4px;"><a><img src="" /></a></td>
        <td></td>
    </tr>
</table>

Works in every email client in every browser I've tested (mostly using Litmus) except for Yahoo.

Yahoo is replacing the "width" declaration with "min-width" across all browsers, which is breaking the layout.

I've tried adding width:32px;min-width:32px;max-width:32px but it has the same issue.

Any workarounds or explanations?

Solution

  • Quick fix, place this in your <style> tag: @media yahoo {min-width:0!important}

    This change/bug is brand new at the time of this posting. Yahoo is now changing width to min-width, breaking hybrid layouts among other things. There is a good discussion about other hacks in the Litmus Community.