A fix for Yahoo! link email issues (color change, hover: [underline, background-color])

| No Comments

yahoo_email_view.pngIssue:
If you code and send emails, you may have noticed that Yahoo! has been trying to help people notice links inside your email. Unfortunately, Yahoo! helps by recoloring your links and applying a hover style with background color and bottom dotted border. Chances are you didn't really want your links to be styled in such a way, and this article tells you how to avoid that behavior.


More Information:firebug_yahoo_view.gif
Occasionally the Yahoo! email platform recognizes key phrases in your links. If/when it does, Yahoo! inserts a span inside of your link with a class name of yshortcuts. An attempted fix I've seen includes styling the yshortcuts class inside of a style tag. This would work if it weren't for the fact that Yahoo! renames every class you put in your style tag and in your html. This renaming ensures that your classes work consistently in your email, but it also prevents you from styling any of the Yahoo!-added classes. I've added posted a gif (woo animations ;) ) to the right that highlights parts of the code- the first and third examples color the link as it is supposed to be (red, with no underline), and the second example, using the class styling method, does not work.

Simplest Fix:
Put a span tag inside your own link. You don't need to apply any styles to it, although you can if you really want to. I suspect  this prevents Yahoo! regexes from recognizing particular keywords inside your link, but it's hard to tell what goes on inside a black box.

Example link:
<a style="color:#ff0000;text-decoration:none;" href="http://www.yahoo.com"><span>Kitchen Appliances</span></a>
Post a comment

If you haven't left a comment here before, you may need to be approved by the site owner before your comment will appear. Until then, it won't appear on the entry. Thanks for waiting.

* required field