Randy Hall Randy Hall - 5 months ago 38
HTML Question

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?

Answer

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.