IN0
White Border Around Some Yahoo Images
Hey guys,
I have a problem with displayed images in yahoo mail on chrome (haven't tested on other clients but seems to be consistent on yahoo).
The client displays a white border around my images, only some that are contained in a 2 column table.
Example:
Also ran a litmus test here: https://litmus.com/tests/21876623/versions/1/results#chromeyahoo-full_on
Everything is ok in other browsers, just yahoo has this problem.
The code for the table containing the image and right text is the following:
<table width="100%" height="232" border="0" cellspacing="0" cellpadding="0" style="border-collapse:collapse;">
<tbody>
<tr>
<th width="223" height="89"><img style="display:block; float:left;" src="http://cdn2.hubspot.net/hubfs/461175/headlefttop.png"></th>
<th width="397" height="89" bgcolor="#fbaf33" style="font-family:Lato, Helvetica, sans-serif; font-weight:300; font-size:26px; color:#ffffff; text-align:left; padding-left:20px; ">text</th>
</tr>
<tr>
<td width="223" height="143"><img style="display:block;" src="http://cdn2.hubspot.net/hubfs/461175/headleftbot.png"></td>
<td width="397" height="143" bgcolor="#ffffff" style="font-family:Lato, Helvetica, sans-serif; font-weight:400; font-size:14px; color:#3C3C3C; text-align:left; padding-left:20px; padding-right:20px;">text</td></tr></tbody></table>
Any ideas on how to fix this? The strange fact is that this issue exists only in tables with text included in another cell.
Thanks
Link to test above possibly won't work. Published here: https://litmus.com/pub/53f849e/screenshots
Try adding one of the following to your <img> tags. Depending on the browsers throwing this issue, you may need to include multiple of these.
I included all of the above in a test that I just ran and it seems that it's still rendering that way.
Funny thing is that this happens ONLY in yahoo mail. No idea why.
You may need to define the height and width directly within the <img> tag in addition to inside the <td>.
Hey, Thanks for the reply. Unfortunately still not working as expected.
Code is as following:
Yahoo has the following CSS rule in its own styles :
Adding a
style="padding:0;"to all your<th>s should fix this.padding:0 did not work, BUT i found out what was causing the problem and fixed it ultimately.
I had some <th> tags in the table, that combined with the padding applied by yahoo made it display with borders.
Simply switched those to <td> tags and problem was fixed.
Thanks!
Hello Iulian. I'm glad this helped you. I just realized I made a mistake on my initial comment and told you to add the
paddingon all<td>s while it obviously should have been<th>s since Yahoo's CSS rule applies to<th>s.