Yahoo!
Tips for coding emails for Yahoo! Mail.
1 Can I get rid of the margins around the body of my email?
The quick answer to this question is no.
Many web based email clients use embedded CSS which may impact your email layout. Yahoo 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 Why aren't my body attributes working?
Yahoo 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 add styles in your embedded CSS. Yahoo 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 its attributes as long as they are supported within a div. So it’s a good habit to place your styles in both locations.
3 Why is there a small space under each of my images?
This space is actually caused by the Yahoo! DOCTYPE. Here are a few workarounds (these work in Gmail and Outlook.com 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 to the containing TD
<td style="line-height:10px">
5.) Add font-size:6px or lower to the containing TD
<td style="font-size:6px">
For more workarounds check out this blog article: 12 Fixes for Image Spacing
4 Why aren't my embedded styles working in IE7 & 8?
Yahoo! Mail in IE7 & IE8 does not support embedded styles in the head tags. Try moving 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>
</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 Why aren't my fonts working?
Yahoo! Mail converts single quotes inside tags to double quotes. If you are using quotes in your inline font CSS declaration, it might not render properly.
For example:
<span style="font-family: 'Open Sans',sans-serif;color:#666666'>Test</span>
Is converted to:
<span style="font-family: "Open Sans", 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 Why is there repetitive content at the bottom of my email?
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 “” 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.
7 Why are my links getting reformatted? (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 the styling to match your design.
8 Why aren't my paragraphs properly spaced?
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;}
9 Why does my email seem to be overlapping the right column?
On wide emails, you may occasionally see an email that looks like it is hanging off the right side of the frame. In our web client previews (Yahoo! Mail, Outlook.com, AOL Mail, Gmail, etc), we intentionally modify the client’s styles to allow your entire email to be visible even if it is wider than the viewing pane. We do this because we can’t account for all of the possible email widths that may come through our system. No, this is not exactly what it would look like in the live client, but it enables you to see the whole email, as well as how much of the email would require horizontal scrolling to view. The part of your email that overlaps the right column would not normally be visible in a browser window of that width.
10 Why is my element left aligned instead of center?
Yahoo! Mail ignores align=”center” in most browsers. We recommend that you instead use:
style="margin:0 auto;"
This should be placed on a table (or div) inside of a width=”100%” wrapper.
11 Does Yahoo support media queries?
Yes, it does! This change was made in 2015, and Yahoo! now has full support for media queries. Attribute selectors are no longer needed to “fool” Yahoo! mail.
