Click to Sign Up for a 7 Day Free Trial!

Email Development

Yahoo Beta’s Embedded CSS May Affect Your Layout

Email On Acid

Many web based email clients use embedded CSS which may impact your email layout. Our focus for this article is Yahoo Beta. It places all of your content within two distinct divs, each with its own embedded CSS.

For example, this:

<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>

Here are the styles that Yahoo Beta uses with regard to those two divs:
(for simplicity, I have displayed only relevant styles)

<style>
.tripane .inner{margin-left:10px;}
.tripane .msg-body{margin-left:29px;}
.message .inner p, .tripane .inner p {line-height: normal;}
.undoreset strong, .undoreset th {font-weight:bold;}
.undoreset em, .undoreset address, .undoreset caption, .undoreset cite {font-style:italic;}
.undoreset table {display:table;border-collapse:separate;}
.undoreset tr {display:table-row;vertical-align:inherit;}
.undoreset td {display:table-cell;border-spacing:2px;border-collapse:none;}
.undoreset th {display:table-cell;vertical-align:inherit;font-weight:bold;padding:1px;border-collapse:none;}
.undoreset p {display:block;margin:1em 0;}
.undoreset blockquote {display:block;margin:1em 40px;}
.undoreset address {display:block;font-style:italic;}
.undoreset center {display:block; text-align:center; text-align:-moz-center; text-align:-webkit-center;}
.undoreset h1, .undoreset h2, .undoreset h3, .undoreset h4, .undoreset h5, .undoreset h6 {display:block;font-weight:bold;}
.undoreset h1{font-size:2em;margin:.67em 0;}
.undoreset h2{font-size:1.5em;margin:.83em 0;}
.undoreset h3{font-size:1.17em;margin:1em 0;}
.undoreset h4{margin:1.33em 0;}
.undoreset h5{font-size:.83em;margin:1.67em 0;}
.undoreset h6{font-size:.67em;margin:2.33em 0;}
.undoreset ol,.undoreset ul{display:block;padding-left:40px;margin:1em 0;}
.undoreset ul{list-style-type:disc;}
.undoreset ol{list-style-type:decimal;}
.undoreset li{display:list-item;}
.undoreset pre,.undoreset code{display:block;font-family:Courier New;white-space:pre;margin:1em 0;}
.undoreset a, .undoreset a:hover{text-decoration:underline;}
.undoreset div p{margin:0;}
</style>

Overwriting These Styles

You have many options for overwriting these:

1.) Use embedded CSS. For example:

<style>
  	p {margin:0}
  	h1 {font-size:20px}
  	.mystyle div {margin:0}
  	.headers {font-size: 15px}
</style>

2.) Do everything inline. For example:

<p style="margin:0"></p>
<h1 style="font-size:20px"></h1>
<div style="margin:0"></div>
<span style="font-size:15px"></span>

About the Author

Michelle Klann

Michelle Klann

A Jackie of all trades, Michelle (aka Miki) specializes in design and has been known to knock down some pretty nifty, object oriented, JS applications. Mozify, anyone?

Join the Discussion

Sort of related... I have noticed that the new Y! Mail Beta does not put the Y! Shortcut hyperlinks that pop-up those stupid little windows with useless information on random content in my e-mails anymore. Any word... did they officially kill this? Hope... Hope!
Eric
Eric - I've noticed the same thing. Hope it stays this way!

Also, looks like they no longer are forcing their color on links. Maybe we can stop coding <span> tags inside <a> tags.
Brian
In the new Yahoo Mail, is anyone getting 'Times New Roman' as the only font in their email newsletters? Does any geniuses know any work arounds? It works across other email clients , Outlook etc and I am following all of the recommended ways of writing HTML code for email newletter (i.e. inline styles) and I can't find the solution with Firebug. Others are having the same problem too:

http://stackoverflow.com/questions/6862388/how-do-i-stop-yahoo-displaying-serif-fonts-in-html-emails-when-ive-specified-sa
Bobby
LOL Eric and Brian, that's confirmed, there are no more Yahoo Shortcuts!
Michelle Klann
I'm not seeing the Yahoo Shortcuts 'in action', but I'm currently debugging an email, and I see that they're still present in the code.
Ryan

Leave a Comment