Yahoo Beta’s Embedded CSS May Affect Your Layout


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:


Will get converted to this:

  	<div class="tripane content">
    		<div class="msg-body inner undoreset">

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

.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;}

Overwriting These Styles

You have many options for overwriting these:

1.) Use embedded CSS. For example:

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

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>
Author: Email on Acid

The Email on Acid blog is on a mission to share email best practices, industry news, and solutions to most annoying email client bugs. Plus, we like to have a little fun along the way. Learn how to join the party and contribute to our blog.

5 thoughts on “Yahoo Beta’s Embedded CSS May Affect Your Layout”

  1. 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!

  2. 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 tags inside tags.

  3. 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:

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

Comments are closed.

Free Email Goodies