Yahoo! drops paragraph spacing
Whereas emails sent to Yahoo! webmail subscribers in the past were appearing fine, recently it seemed like the rendering had changed. Paragraph spacing was now totally removed from many emails.
Diana ran some tests and was able to confirm that the spacing did disappear in both Yahoo! classic and the new version:
This is how paragraphs will now be spaced by default.
Fortunately, this is a simple one to fix. All you need to do is add a margin-bottom of 1em (either inline or in your stylesheet) and the spacing is back.
With the addition of a 1em margin, all is well.
It's unclear at this stage why the change has been made, but it is a timely reminder that you can't always rely on email client default settings - if it is important to your design, it's always best to explicitly apply styles to each element.
Thanks to everyone who reported this to us, and to Diana for doing the testing.
Looks like this problem appears in IE, not FF.
Actually I could replicate it in both Firefox and IE. The screen shots above were both taken in Firefox 2.0.
While this may be a problem for some web designers, the margin issue is prevalent across the board. Paragraph margins vary (albeit slightly) from one browser and email client to the next.
I always override default margins with this:
margin: 0em 0em 1em 0em;Then my paragraphs and lists are consistent all the time. So I’d recommend this route as a default. Moreover, if you only place a 1em margin at the bottom in many clients/browsers you’ll get a 2em margin between paragraphs.
That’s my two cents.
“I always override default margins with this:
margin: 0em 0em 1em 0em;”
Yes, I do the same on many site.
It’s a good way.
Good find, and really quick one :) but the only question that got in my mind is: why would they remove the spacing after all?
is it a matter of data bandwidth or even a new rendering system which still in beta?
after all thank you for sharing this.
I must be missing something. When I try to fix this by adjusting the margin settings, I still don’t see the improvement in IE6 or IE7. Looks good in Firefox, but not IE… Are you guys setting the margin to the tag itself? I tried both:
p {margin:0 0 1em 0}
and
p {margin-bottom:1em}
No luck getting either to play nice with IE looking at Yahoo Mail…
Trying to implement this but it’s not working. We generally avoid using CSS when sending emails as they often corrupt at the other end. Can anyone show me what the full style sheet should look like? Either that or how you would put it into effect ‘inline’.
Thanks!
Ian,
The key is to avoid external stylesheets and put CSS inside the document itself, but in the BODY, not the HEAD.
I wrote some of this up on a post a while back here, which might be helpful (also includes links to other resources for best practices):
http://mattmedia.net/2007/08/23/8-html-email-tips-i-wish-i-knew-sooner/
Thanks Matt, that’s great.
Lots of food for thought on that link and the others mentioned on the article.
I work for quite a small company and have to turn around email designs and send them out en masse (to a subscribed list) within an hour or two. That means most of our emails are 100% image based which, from what you say, seems far from ideal.
We do host a web version that people can view but overall I just wish we had enough time on each project to do the job more thoroughly!
Needless to say, it’s less than ideal to do something 100% images based… but if you’re forced to do that, one way to make it better is to be sure you use ALT tags for all images and provide image sizes so that the layout will remain relatively intact and will provide some information to recipients who have images blocked. It may look terrible, but it least they’ll be able to see some of the language they would otherwise be missing.
Thanks for that Matt. I think we’ll try and incorporate that at the very least as it will only take a minute or two longer to implement.
Thanks for the feedback.
One question re: adding margin spacing - does this then add tons of white space when the email is read in say, gmail? Or does gmail read the < p > tag as only allowing 1em bottom margin?
I’ve been putting everything in tables (so 10 years ago!) and adding padding to the < td > tags. It works, but this seems simpler.
Barbara,
It leaves the spacing as 1em in every email client I tested with. If the styles are stripped out it would just go to the default paragraph spacing, otherwise it’ll be the 1em.
I never though that the guys at Yahoo might have problems with the CSS for their layouts. I am not sure buy I thought they should kick ass in such small details, at least. OR maybe the issue was somewhere else.
Thanks for blog
Trying to implement this but it’s not working. We generally avoid using CSS when sending emails as they often corrupt at the other end. Can anyone show me what the full style sheet should look like? Either that or how you would put it into effect ‘inline’.
Thanks!
Basically, you put the CSS in the BODY, not the HEAD.
Here’s an example of one I did last year:
http://mattmedia.net/lab/email/MEB-Template.html
Lots of food for thought on that link and the others mentioned on the article.
I never though that the guys at Yahoo might have problems with the CSS for their layouts. I am not sure buy I thought they should kick ass in such small details, at least. OR maybe the issue was somewhere http://www.njqyml.com.cn else.
Louis Vuitton Replica Handbags
Yes, i got the problem while composing the email The spacing on webmail of yahoo always have some problem. I also checked this on yahoo answer but didn’t get the answer proper that how to fix this.
I am following your blog your blog is too exiting thanks for your article
it looks better, I prefer the new one.
IE doesnt show paragraph space, I think my IE has a problem, but firefox is successfuly showing paragraph spech