Blog   /   9 Ways to Prevent Yahoo! Headaches

9 Ways to Prevent Yahoo! Headaches

Yahoo! Mail is a popular web-based email client. Most problems with this client are caused by remnants of Yahoo! Shortcuts. This infuriating feature turned random keywords into advertisement links. We give kudos to Yahoo! for removing it, but it seems to have some lingering aftereffects. Read on for our top list of need-to-know tips for coding emails for this cranky client.
  1. Yahoo! enforces margins around your email.
  2. Your text links might get reformatted by Yahoo! shortcuts.
  3. Yahoo! Mail strips your body tag by default.
  4. Yahoo! Mail doesn't support embedded styles in the email's head in IE7 and 8.
  5. Sometimes Yahoo! breaks fonts.
  6. No padding for paragraphs by default.
  7. Yahoo!'s DOCTYPE adds space under images.
  8. Yahoo! renders your mobile version by default.
  9. Yahoo sometimes duplicates content.

1. Yahoo! enforces margins around your email.

Many web based email clients use embedded CSS which may impact your email layout.  Yahoo Beta inserts your HTML within a few divs.  For example: 
<body>
  Content
</body>
Will get converted to this: 
<body>
<div class="tripane content">
  <div class="msg-body inner undoreset">
    <div>
       Content
    </div>
  </div>
<div>
</body>
To check out the css for those styles, visit this blog post. There is no way to overwrite the styles for the divs that it inserts but you can overwrite the type selector classes within them. To do so, use embedded CSS: 
<style>
   p {margin:0}
   h1 {font-size:20px}
   .mystyle div {margin:0}
   .headers {font-size: 15px}
</style>
Or, do everything inline: 
<p style="margin:0"></p>
<h1 style="font-size:20px"></h1>
<div style="margin:0"></div>
<span style="font-size:15px"></span>

2. Your text links might get reformatted by Yahoo! shortcuts.

Yes, it’s true, Yahoo Shortcuts still exist! Sometimes, if you are using link names to popular items like “Washer & Dryer” Yahoo! inserts a span inside your anchor with a class of “yshortcuts” - Here’s your quick fix: Insert the following into your embedded CSS: 
<style type="text/css">

  span.yshortcuts, a span {color:#000}
  span.yshortcuts:hover, 
  span.yshortcuts:active,
  span.yshortcuts:focus {text-decoration:none; color:#000; background-color:none; border:none} 

</style>
This is just an example, you will need to update your styling according to your design.

3. Yahoo! Mail strips your body tag by default.

Yahoo Beta strips your entire body tag along with each of its attributes. For example, this: 
<body style=" background-color: #CEE2DF">...
Will get converted to this: 
<body>
   <div class="tripane content">
     <div class="msg-body inner undoreset">
       <div>...
To get around this, you can define your styles in the “body” type selector in your embedded CSS. From there, Yahoo Beta will convert your embedded body styles to inline and place them inside the div it creates around your email content. For example, this: 
<style>
   body {background-color: #CEE2DF}
</style>

<body>...
Will get converted to this: 
<body>
  <div class="tripane content">
    <div class="msg-body inner undoreset">
      <div style=" background-color: #CEE2DF">...
Special Note: Gmail does not support embedded css. This client also converts your body to a div, however, it still retains it’s attributes as long as they are supported within a div. So it’s a good habit to place your styles in both locations. Click here for more examples.

4. Yahoo! Mail doesn't support embedded styles in the email's head in IE7 and 8.

This only affects Internet Explorer 7 and 8. Try duplicating your style block to just before the closing body tag. For example, change this: 
<html>
  <head>
    <style type="text/css">
      p {margin-bottom: 1em; background:#096}
    </style>
  </head>
  <body>
    <p>This is the first paragraph</p>
    <p>This is the second paragraph</p>
  </body>
</html>
To this: 
<html>
  <head>
    <style type="text/css">
      p {margin-bottom: 1em; background:#096}
    </style>
  </head>
  <body>
    <p>This is the first paragraph</p>
    <p>This is the second paragraph</p>
    <style type="text/css">
      p {margin-bottom: 1em; background:#096}
    </style>
  </body>
</html>

5. Sometimes Yahoo! breaks fonts.

Yahoo! Mail converts single quotes to double quotes so if you are using quotes in your inline font CSS declaration, it might not render properly. For example: 
<span style='font-family:"Verdana","sans-serif";color:#666666'>Test</span>
Is converted to: 
<span style="font-size:20px; font-family:"sans-serif";color:#666666">Test</span>
(The above example renders a serif font in all browsers as opposed to what was intended) Note: Single quotes within your content are not affected.

6. No padding for paragraphs by default.

Yahoo doesn’t give paragraphs any padding by default. You’ll need to add an inline style or embedded style if you want to have space after each paragraph. Inline example: 
<p style="padding-bottom:1em;">
Embedded example: 
p {padding-bottom:1em;}

7. Yahoo!'s DOCTYPE adds space under images.

This space is actually caused by the Yahoo! DOCTYPE.  Here are a few workarounds (these work in Gmail and Hotmail as well): 1.) Add style display:block to the image element 
<img src="test.jpg" style="display:block">
2.) Add align absbottom in the image element 
<img src="test.jpg" align="absbottom">
3.) Add align texttop to the image element 
<img src="test.jpg" align=" texttop">
4.) Add line-height 10px or lower in the containing TD 
<td style="line-height:10px">
5.) Add font-size 6px or lower in the containing TD 
<td style="font-size:6px">
For more workarounds check out this blog article: 12 Fixes for Image Spacing

8. Yahoo! renders your mobile version by default.

UPDATE: This fix is no longer needed. As of March 2015, Yahoo! Mail has remedied its issue with media query rendering. Read more at Yahoo! Mail Now Supports Media Queries.
Yahoo! ignores your media query declaration along with all of its conditional statements. It then renders each of the styles as if they are outside of the media query to begin with. On top of that, it gets confused with your first declaration which is therefore ignored. Here’s the fix: Since Yahoo! also does not support attribute selectors, you can use them within your media queries.  This way Yahoo! will ignore the query entirely. 
<style>
  @media only screen and (max-device-width: 480px) {
     body[yahoo] p {color:#00C}
     body[yahoo] .foo {color:#C03}
     body[yahoo] .bar {color:#C03}
   }
</style>
...
<body yahoo="fix">
   <p>test</p>
   <p class="foo">test</p>
   <div class="bar">test</div>
</body>
In this example, we added a “yahoo” attribute and placed it in the body tag.  We could have left out the value “fix” but this will help you remember what it’s for later on.  Then place “body[yahoo] ” before each declaration in your media query.  This technique allows you to access universal selectors like “h1” or “p” as shown above. Here’s a blog post with more examples.

9. Yahoo sometimes duplicates content.

If you use a simple street address in your email, particularly with a city and state, there’s a chance that Yahoo might duplicate some of your content at the bottom of your email. This is caused by pesky remnants of the Yahoo! Shortcuts plugin. If this happens to you, the easiest fix is to spoof Yahoo into thinking that your city and state are just another text string. To do this, you can add an HTML entity like “&#173;” in your address that Yahoo does not recognize it: 
Austin, ­TX ­78713-7458<br />
Phone: 512­-555­-1212<br />
Here’s more information: Stop Yahoo! Mail from Displaying your Email Twice In the above example, we also inserted the same special character in the phone number to avoid issues in Gmail.

Latest Articles

Notes from the Dev logo teal
Notes from the Dev: Use the Word Rendering Engine to Enhance Outlook Emails 
email testing value - rotating coin with dollar symbol
Email Testing: The Risks, Costs, and Benefits Explained
Badge in an email envelope indicating a DMARC policy
What DMARC Policy Should Senders Use in 2024?