Yahoo Links & Outlook Image Alignment Issues

Hi There,

I'm having some nightmare time for the problem. I have coded a design & am facing quite a few issues:

Link colors are totally changed in Yahoomail although tried span color tag within <a>. At the same time working ok for some other links which has the same styling applied to.

Similarly the design uses some text background color which is not shown in gmail.

Althoug in outlook 2007 litmus test it is shown as ok, but the columns which have images at the top & then description below the image are not lining up when sent a test email to outlook 2007. The image is always about 2-4px shorter than the box below which doesn't look good.

Similarly the font is not the same throughout the email clients.

Here are the litmus screenshot:
https://ayaan.litmus.com/pub/b7e030f

Here is the code:
https://html.litmus.com/email/?url=/sitevista/7a4fc9a1-4900-4c75-aa8b-decf1d02ee4e

Any help in this regard will be highly appreciated.

Thanks,

Tahir

Stig Stig, 1 year ago

Hey Tahir,

Thanks for posting both your full code and Litmus test. That definitely makes it much easier to help look into the specific issues.

YAHOO! MAIL
We've written about the issue with link colors in Yahoo! Mail in the past, and it sounds like you've already tried one of the suggested solutions without much luck.

The other approach might work better - could you try replacing

    #forward a {color:#f1d9ae; text-decoration:none;}
    #browser a {color:#f1d9ae; text-decoration:none;}
    #unsubscribelink a {color:#f1d9ae; text-decoration:none;}
    a a:visited, a:link, a:active {color:#000;text-decoration:underline;}

with the following?

    a, a .yshortcuts { color: #ffffff; }
    #forward a, #browser a, #unsubscribelink a, #forward a .yshortcuts, #browser a .yshortcuts, #unsubscribelink a .yshortcuts {color:#f1d9ae; text-decoration:none;}
    a, a:visited, a:link, a:active, a .yshortcuts {color:#000;text-decoration:underline;}

GMAIL
Regarding the missing background colors in Gmail, does this also happen if you test the template via your Campaign Monitor account?

I think the issue might be that the CSS hasn't been copied online, which is something we do automatically in Campaign Monitor.

OUTLOOK 2007
Could you clarify the exact issue you're seeing here?

I see the following two are a few pixels off in height, but that doesn't seem to be specific to Outlook:

http://f.cl.ly/items/2P0d241X1d1x3u3H0832/BarChick-2.png

Is that what you meant, or something else?


The Campaign Monitor Blog – HTML email smarts to go with your good looks.
mtkhan, 1 year ago

I have just checked it in gmail it works perfectly ok, links problem also solved, thanks a lot.

In outlook I can see some random results, some times it would line up & the other time it wont.

The screenshot you have shown doesn't happen in my Gmail, yahoo, aol, hotmail, but with outlook, similarly the images in screenshots are also seen sometimes a pixel or two short on width when viewed in outlook.

Is there any way where we could limit the height/width for any cell from which it won't exceed.

Is there any work around for this.

Thanks a lot for your help.

roshodgekiss roshodgekiss, 1 year ago

Hi mtkahn, I've got two suggestions, but not sure if they're going to be the silver bullet we're after here.

Is there any way where we could limit the height/width for any cell from which it won't exceed.

Perhaps you can try using the overflow CSS property. For example:

td.restrict { width:150px; height:150px; overflow:hidden; }

In addition, I'd also suggest adding the following to your code:

img { display: block; }

Hopefully the latter technique will cut down on the spaces that are making the images extend that 1-2px further. Let us know how you go :)


Get in touch with us on Twitter: http://twitter.com/campaignmonitor
We're also on Facebook: http://facebook.com/campaignmonitor
Stig Stig, 1 year ago

Hi Tahir, great to hear that solved those two problems.

Regarding the difference I highlighted in the screenshot, this does seem to happen in Gmail, Yahoo! Mail, AOL and Hotmail in your Litmus test. The difference actually seems to be the height of the spacers below the description texts, rather than a difference in image heights.

The relevant lines in the code you posted are #417

<td colspan="3" height="6" style="line-height:1px;font-size:1px; height:6px !important;">
    <img src="https://i5.createsend1.com/ti/r/E3/460/B57/064402/spacer.gif" height="6" width="100" border="0" style="border:0;" alt="">
</td>

and line #468

<td colspan="3" height="8" style="line-height:1px;font-size:1px; height:8px !important;">
    <img src="https://i5.createsend1.com/ti/r/E3/460/B57/064402/spacer.gif" height="8" width="100" border="0" style="border:0;" alt="">
</td>

If you give both these spacers the same height (8px or 6px), the bottoms of those boxes should line up correctly.

If you do wish to crop the height of an image using CSS, I'd experiment with Ros' suggestion and maybe also expand it with the following, for Outlook support.

td.restrict { width:150px; height:150px; overflow:hidden; line-height:150px; mso-line-height-rule:exactly; }

The Campaign Monitor Blog – HTML email smarts to go with your good looks.

Sign up for free.
Then send campaigns for as little as $9p/m

Create an account