A list of quarky issues in Android 2.3:
Yes. You can use media queries in your embedded CSS:
@media only screen and (max-device-width: 480px) {
/* Here you can include rules for the Android and
iPhone native email clients. ALWAYS USE IDs!!! The
Android does not support “class” declarations.
Here’s more info on that: http://www.emailonacid.com/blog/the_android_mail_app_and_css_class_declarations/
Device viewport dimensions are as follows:
Iphone: 320px X 480px - portrait, 480px X 320px - landscape
Android:350px X 480px - portrait, 480 X 350 - landscape
(These are average dimensions, the Android OS runs on several different devices)
*/
}
@media only screen and (min-device-width: 768px) {
/* Here you can include rules for the iPad native
email client.
Device viewport dimensions in pixels:
768 x 1024 - portrait, 1024 x 768 - landscape
*/
}
Media queries will not work for mobile versions of Gmail.
Here are a few options:
1.) Re-size and re-use the same image (better for overall file size)
<style type=“text/css”>
@media only screen and (max-device-width:480px;) {
body[yahoo] .header { width:300px}
}
</style>
<body yahoo=“fix”>
<img src=“http://www.url.com/image.jpg” class=“header” width=“600” height=“100” />
</body>
2.) Completely replace the image:
<style type=“text/css”>
@media only screen and (max-device-width:480px;) {
body[yahoo] .mobile_only {
width:600px !important;
overflow:visible !important;
float: none !important;
display: block !important;
}
body[yahoo] .desktop_header { display:none}
}
</style>
<body yahoo=“fix”>
<div class=“mobile_only” style=“width:0px; overflow:hidden;float:left;display:none”>
test image for mobile, width=“300px”
</div>
<div class=“desktop_header”>
test image for desktop width=“600px”
</div>
</body>
Note, we used overflow, width and float above because Gmail does not support display:none. We also incorporated the Yahoo fix in both examples which is further explained here.
Option 2 is not for the faint of heart, if you want to nest block elements like tables within your hidden div, make sure you test in all clients - especially Outlook 2007/2010. Here’s more discussion on that.
Text wraps within the Android for easier user readability.
If the box element parent of the text string is set to align right or center, the text will not wrap within it. It’s important to point out, that a FONT or SPAN are not considered box elements, instead you would add the alignment to it’s containing TD, DIV, or Paragraph.
Another work-a-round is to set the box element parent line-height to a value that is equal to or lesser than the font-size within the container.
To control the font adjustment in the Android universally, try adding this to your embedded CSS:
<style>
* {-webkit-text-size-adjust: none}
</style>
Or you can also control text on a case by case basis by adding the following inline CSS:
<font style=”-webkit-text-size-adjust: none”>
Example
</font>
A list of quarky issues in Android Gmail 2.2:
Text wraps within the Android for easier user readability.
If the box element parent of the text string is set to align right or center, the text will not wrap within it. It’s important to point out, that a FONT or SPAN are not considered box elements, instead you would add the alignment to it’s containing TD, DIV, or Paragraph.
Another work-a-round is to set the box element parent line-height to a value that is equal to or lesser than the font-size within the container.
Gmail converts your body to a DIV. This is extremely important because since there is no width set in your body, the Android sets the width of your converted body tag to that of your viewport (horizontal or vertical). So if you have a background color or image in the body of your email, you have a few options:
1.) Wrap the contents of your email in a table or div with the width set to the widest element in your layout.
2.) Add an inline CSS width attribute to your body:
<body style=“width:800px”>
The problem with this solution is that your email will now be left aligned in the web based Gmail client and the background color won’t extend to the left/right.
IMPORTANT NOTE: *You must use ‘px’, ‘em’, or ‘pt’ in either of these options - percentages will not work.
A list of quarky issues in AOL :
We have had reports that this has happened to others. It seems that AOL might not always be as friendly with media queries, particularly in Google Chrome.
In this forum post: aol reads media queries in google chrome we’ve provided a working sample.
AOL removes the body tag and inserts its own:
So this:
<body style=“background:#000; min-height:2000px; color:#fff; padding:15px”>
Will get converted to this:
<body style=“background-color: white;font-family: Arial,sans-serif;font-size: 10pt;border: 0px;”>
Which completely overwrites your embedded body styles because this does it inline.
AOL also ignores the body type selector in your embedded CSS.
For example:
<style type=“text/css”>
body {background:#000; min-height:2000px; color:#fff; padding:15px}
</style>
The best solution is to include a wrapper element like a table or a span with disply:block in order to control the appearance of your email background colors, fonts, etc.
For an example and in depth explanation for this approach, check out this blog article: Background Colors in HTML Emails - this solution has been tested in all of the email clients that we currently support.
AOL uses the following default CSS:
body {font-family:Arial,sans-serif;font-size:10pt;}
th {font-size:13pt;}
td {color: black;}
You just need to overwrite this in your embedded CSS.
To achieve the same effect in Gmail, you can set the font in your body tag (you need to use inline CSS for the TH and TD, sorry!). Here is an example:
<body style=” font-family:Arial,sans-serif; font-size:10pt ”>
If you are using any relative URL paths in your embedded CSS, AOL will strip out the entire style block. You must use absolute references.
Other browser extensions like “-moz-binding” have also been known to cause this issue.
A list of quarky issues in BlackBerry 8800:
Up until 2008, early versions of the Blackberry email client did not support HTML in emails, instead it rendered a plain text version.
Here is a list of products that did not support HTML:
First color series: 7200, 7500, 7700
First SureType phone series: 7100
Modern BlackBerry series (2006–2008): 8000–8830 including: BlackBerry 8800, BlackBerry Pearl, BlackBerry Pearl Flip and BlackBerry Curve 8300
Here is a list of products that do support HTML:
Latest BlackBerry models (2008–2009): 8900+ GPS Wi-Fi series: BlackBerry Bold 9000, BlackBerry Curve 8900, BlackBerry Tour 9630, BlackBerry Storm 9500/9530, BlackBerry Curve 8520/8530
BlackBerry Storm 2 9520/9550 (2009): BlackBerry Storm2
BlackBerry Bold series (2009): BlackBerry Bold 9700
BlackBerry Bold series (2010): BlackBerry Bold 9650
BlackBerry Bold series (2010): BlackBerry Bold 9780
BlackBerry Bold series (2011): BlackBerry Bold 9900/9930
BlackBerry Pearl series (2010): BlackBerry Pearl 3G 9100/9105
BlackBerry Torch series (2010): BlackBerry Torch 9800
BlackBerry Torch series (2011): BlackBerry Torch 9810
BlackBerry Torch series (2011): BlackBerry Torch 9850/9860
BlackBerry Curve series (2010): BlackBerry 9300/9330
BlackBerry Curve series (2011): BlackBerry 9350/9360/9370
BlackBerry Style 9670 (2010):
A list of quarky issues in BlackBerry 9930:
Up until 2008, early versions of the Blackberry email client did not support HTML in emails, instead it rendered a plain text version.
Here is a list of products that did not support HTML:
First color series: 7200, 7500, 7700
First SureType phone series: 7100
Modern BlackBerry series (2006–2008): 8000–8830 including: BlackBerry 8800, BlackBerry Pearl, BlackBerry Pearl Flip and BlackBerry Curve 8300
Here is a list of products that do support HTML:
Latest BlackBerry models (2008–2009): 8900+ GPS Wi-Fi series: BlackBerry Bold 9000, BlackBerry Curve 8900, BlackBerry Tour 9630, BlackBerry Storm 9500/9530, BlackBerry Curve 8520/8530
BlackBerry Storm 2 9520/9550 (2009): BlackBerry Storm2
BlackBerry Bold series (2009): BlackBerry Bold 9700
BlackBerry Bold series (2010): BlackBerry Bold 9650
BlackBerry Bold series (2010): BlackBerry Bold 9780
BlackBerry Bold series (2011): BlackBerry Bold 9900/9930
BlackBerry Pearl series (2010): BlackBerry Pearl 3G 9100/9105
BlackBerry Torch series (2010): BlackBerry Torch 9800
BlackBerry Torch series (2011): BlackBerry Torch 9810
BlackBerry Torch series (2011): BlackBerry Torch 9850/9860
BlackBerry Curve series (2010): BlackBerry 9300/9330
BlackBerry Curve series (2011): BlackBerry 9350/9360/9370
BlackBerry Style 9670 (2010):
A list of quarky issues in Entourage 2004:
If you have an align attribute within an image and it is set to “right” or “left” Entourage 04 will add a 3 pixel margin to the left and right of the image. This is especially important of you are trying to get images to stack up neatly within a table.
To fix the spacing, either remove the alignment or add a CSS margin of “0”.
For example:
<img src=“http://www.test.jpg” align=“right” style=“margin:0”>
In Entourage 04 and 08, if you do not include ” <table” or ” <img” anywhere in your HTML code - it will ignore all of your embedded and inline CSS.
To correct this issue, simply include the following code anywhere within your email:
<table><tr><td> </td></tr></table>
In Entourage 04 and 08, if you do not include ” <table” or ” <img” anywhere in your HTML code - it will convert all your text links from:
<a href=“http://www.yahoo.com”>nested</a>
To:
nested <<a href=“http://www.yahoo.com” style=“color:blue”>http://www.yahoo.com</a>>
To correct this issue, simply include the following code anywhere within your email:
<table><tr><td> </td></tr></table>
If you use a percentage value over 100% in any attribute or CSS property, Mac Mail, Entourage 2004, and Entourage 2008 will force your container to that size. So for example:
<table width=“700%” border=“0”>
<tr>
<td width=“700” valign=“top”>
test
</td>
</tr>
</table>
Will result in a table that is about 6000 pixels wide. For these email clients, it is best to stick with percentage values under 100%.
A list of quarky issues in Entourage 2008:
In Entourage 04 and 08, if you do not include ” <table” or ” <img” anywhere in your HTML code - it will ignore all of your embedded and inline CSS.
To correct this issue, simply include the following code anywhere within your email:
<table><tr><td> </td></tr></table>
If you include a single quote ’ anywhere within your CSS comments your entire email will display blank in Entourage 08.
In Entourage 04 and 08, if you do not include
” <table”
or
” <img”
somewhere in your HTML code - it will convert all your text links from:
<a href=“http://www.yahoo.com”>nested</a>
To:
nested <<a href=“http://www.yahoo.com” style=“color:blue”>http://www.yahoo.com</a>>
To correct this issue, simply include the following code anywhere within your email:
<table><tr><td> </td></tr></table>
If you use a percentage value over 100% in any attribute or CSS property, Mac Mail, Entourage 2004, and Entourage 2008 will force your container to that size. So for example:
<table width=“700%” border=“0”>
<tr>
<td width=“700” valign=“top”>
test
</td>
</tr>
</table>
Will result in a table that is about 6000 pixels wide. For these email clients, it is best to stick with percentage values under 100%.
A list of quarky issues in Gmail :
Gmail does not support the inline display property if the value is set to “none.”
style=“display:none”
Each of the other values for the display property are supported.
One way to get around this issue is to convert your embedded CSS into inline using our CSS conversion tool in the “Developer Tools” dropdown in each test result.
There is another way of getting around the issue for things like font, font color and font size: Gmail converts your Body tag to a DIV. That can actually work to your advantage because you can use any inline CSS properties within your BODY that would otherwise be supported by a DIV. It is important to know, however, that some clients do not support the BODY tag so you should also include the same declarations within your embedded CSS. Also, keep in mind, you can’t rely on BODY attributes like “bgcolor” because it is not supported within a DIV.
<head>
<style type=“text/css”>
/*This is for all clients except Gmail,
Gmail gets the same declarations from the body tag */
table, tr, td, p, span {
font-family:Arial, Helvetica, sans-serif;
color:#333; font-size:11px;
}
</style>
</head>
<body style=“margin:0; padding:0; font-family:Arial,
Helvetica, sans-serif; color:#333; font-size:11px;”>
Content
</body>
#1155CC is the default color for Gmail links. You can overwrite this color using inline CSS. However, Gmail ignores #000, #000000, and “black” values. For example:
This will render as red:
<a href=“http://www.emailonacid.com” style=“color:#C00”>test</a>
This will be rendered as the default (#1155CC) color:
<a href=“http://www.emailonacid.com” style=“color:#000000”>test</a>
To fix this use a different hex value that is close to black:
<a href=“http://www.emailonacid.com” style=“color:#040400”>test</a>
Gmail converts this:
<td style=“height: 20px;”></td>
To this:
<td style=“min-height: 20px;”></td>
The min-height property does not have the same effect as the “height” property in TDs. This seems to have a universal effect in all browsers. By adding a space or a <br /> inside the empty cell, it resolves the problem.
<td style=“min-height: 20px;”> </td>
Gmail ignores the entire margin or padding declaration if there is a negative value.
margin:-40px 10px 0 0
margin:40px -10px 0 0
margin-top: -40px
margin-right: -40px
padding-right: -40px
padding-top: -40px
Gmail does support negative values in the generic padding property - this is not recommended however because Yahoo New and Classic do not support negative values at all.
If you include any reference to a URL, your entire declaration will be ignored.
For example:
background: #000; /*This will be accepted */
background: #000 url(http://www.test.com/test.jpg); /* This entire line will be ignored */
With that said, if you ever want to back up your background image with a color, be sure to do it within a different inline CSS declaration.
For example:
<td style=” background: #000; background: #000 url(http://www.test.com/test.jpg);”>
Another option is to use the “background” attribute within your TDs.
<td background=“http://www.test.com/test.jpg” bgcolor=”#eeeeee”>
This is because of the Gmail DOCTYPE, try putting your font inside a paragraph tag instead of using a font or span. Another way to get around this is to define a line-height and/or font-size in the containing TD.
Both the desktop and mobile version(s) of Gmail now insert an anchor link around phone numbers. In the desktop version, the link opens Google’s new voice/chat console which is displayed along the right column of the Gmail interface.
To block this, use an HTML entity in your phone number that Gmail does not recognize such as “­”
212­-389­-3934
In the above example we inserted this entity before each dash.
Click here for more examples and fixes.
Yes, if you have a URL or email address listed without a link, Gmail will add it for you. For example name@test.com within this paragraph will get converted to:
<a href=“mailto:name@test.com”> name@test.com</a>
Here are two possible fixes:
1.) Insert an HTML entity that Gmail does not recognize, like:
­
So change name@test.com to:
name@test­.com
Change www.mydomain.com to:
www.mydomain­.com
Change http://www.mydomain.com to:
http:­//www.mydomain­.com
2.) Insert an anchor around the URL or email address and format it like the rest of your text. For example:
<a href=’#’ style=“color:#000; text-decoration:none”> test@test.com</a>
If your email exceeds 102K, Gmail will display the first 102K along with a message that reads:
[Message clipped] View entire message
When the user clicks to view the entire message, your email will be displayed in a new window.
If you are close to 102K, you might save a few bytes by removing any unnecessary spaces, carriage returns or comments.
We recommend that you avoid embed images or documents when sending HTML emails.
Gmail does not support spaces within image paths. Always use underscores or dashes.
If that doesn’t fix it, check to make sure you are using absolute image references.
If that still doesn’t fix it, Gmail might be having a problem with your Hypertext Transfer Protocol Secure references (https://). If so, try switching to HTTP.
This space is actually caused by the Hotmail DOCTYPE. Here are a few workarounds (these work in Hotmail and Yahoo Beta 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
A list of quarky issues in Hotmail :
Hotmail places your email inside a div with a class named “ExternalClass” - here are the properties they have set on that class:
.ExternalClass{display:inline-block; line-height: 131%};
This has no effect on your email when using IE but every other browser the email will not be centered.
To overwrite this simply include this in your embedded CSS:
.ExternalClass {width: 100%;}
<style type=“text/css”>
/**This is to overwrite Hotmail’s Embedded CSS************/
table {border-collapse:separate;}
a, a:link, a:visited {text-decoration: none; color: #00788a}
a:hover {text-decoration: underline;}
h2,h2 a,h2 a:visited,h3,h3 a,h3 a:visited,h4,h5,h6,.t_cht {color:#000 !important}
p {margin-bottom: 0}
.ExternalClass p, .ExternalClass span, .ExternalClass font, .ExternalClass td {line-height: 100%}
/**This is to center your email in Hotmail************/
.ExternalClass {width: 100%;}
</style>
Hotmail does not support the “margin” and “margin-top” CSS properties for any HTML element. This, coupled with the Outlook 2007 and 2010’s “padding” issues on paragraphs and spans can make life difficult.
Also, Hotmail has the following code in their embedded CSS:
p {margin:0 0 1.35em;}
You will need to overwrite this in your embedded CSS in order to start with a clean slate.
For example:
<style type=“text/css”>
p {margin-bottom:0}
</style>
Our recommendation is to stick with margin-left, margin-right, and margin-bottom properties for all paragraphs and spans.
It is also safe to use the padding property within your TDs for additional spacing. Just know that if you have a specific width attribute or property set to a TD, the left/right padding will affect the actual width differently within browsers.
Here’s more on that.
http://www.emailonacid.com/forum/viewthread/47/
Hotmail has added this to their default CSS:
h2,h2 a,h2 a:visited,h3,h3 a,h3 a:visited,h4,h5,h6,.t_cht {color:#006E12 !important}
To overwrite it, use the same code in your embedded CSS and change the color:
<style type=“text/css”>
h2,h2 a,h2 a:visited,h3,h3 a,h3 a:visited,h4,h5,h6,.t_cht {color:#000 !important}
</style>
Hotmail does not support border color in this format: rgb(167, 194, 117) - it seems that the entire “border” declaration along with properties are ignored if you use this method for border color, same for border-bottom, right, left, top.
Hotmail includes the following in their linked style sheet:
* {line-height: 131%}
To overwrite it, use the following in your embedded CSS:
.ExternalClass * {line-height: 100%}
“.ExternalClass” is required and it is specific for Hotmail only. They wrap your layout inside a div with a class= “ExternalClass” so there is no need to include a reference to it other than in your embedded CSS.
Here is more on that topic: http://www.emailonacid.com/forum/viewthread/43/
This space is actually caused by the Hotmail DOCTYPE. Here are a few workarounds (these work in Gmail and Yahoo Beta 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
This is because of the DOCTYPE, try putting your font inside a paragraph tag instead of using a font or span tag. Another way to get around this is to define a line-height and/or font-size in the containing TD.
Hotmail converts the following symbols
® (®), ™ (™), ©(©), ♠ (♠), ♣ (♣), ♦ (♦) ♥ (♥).
Into large image representations of the symbol. There are two possible fixes:
Option 1.) Add this to your embedded styles:
<style type=“text/css”>
.ExternalClass .ecxhm { display:none; }
.ExternalClass .ecxhm2 {
display: inline !important;
font-size: 11px !important;
color:#666 !important;
}
</style>
...
Here’s your html:
<span class=“hm”>®</span>
<span class=“hm2” style=“display:none; font-size:0; color:#FFF”>(R)</span>
The second version (class hm2) will only display in Hotmail, all other clients will display the first class.
Here’s more on that.
Option 2.) Add this to your embedded:
<style>
.hmfix img{
width:10px !important;
height:10px !important;
}
</style>
...
Then reference your symbols like this:
<span class=“hmfix”>©</span>
Unfortunately in the latest release for Hotmail, they have discontinued support for image maps.
If you want individual sections of your image to be clickable, you are going to have to slice it into multiple images and use a table to align the pieces. Don’t forget about our image spacing work-arounds to ensure they line up evenly in all browsers.
If your email exceeds the reader’s browser window width minus 370px, your email will get cut off along the right side and a yellow box will appear saying the following:
“This message is too wide to fit your screen. Show full message…”
In general, it’s best to keep your email under 630px wide. This would presume that your average user will have their browser window sized to at least 1000px wide.
Here’s more on that topic…
A list of quarky issues in iPad 5.0:
Yes. You can use media queries in your embedded CSS:
@media only screen and (max-device-width: 480px) {
/* Here you can include rules for the Android and
iPhone native email clients. ALWAYS USE IDs!!! The
Android does not support “class” declarations.
Here’s more info on that: http://www.emailonacid.com/blog/the_android_mail_app_and_css_class_declarations/
Device viewport dimensions are as follows:
Iphone: 320px X 480px - portrait, 480px X 320px - landscape
Android:350px X 480px - portrait, 480 X 350 - landscape
(These are average dimensions, the Android OS runs on several different devices)
*/
}
@media only screen and (min-device-width: 768px) {
/* Here you can include rules for the iPad native
email client.
Device viewport dimensions in pixels:
768 x 1024 - portrait, 1024 x 768 - landscape
*/
}
Media queries will not work for mobile versions of Gmail.
Sometimes the iOS reader only displays a small segment of the original email. When this happens, it renders the loaded portion with a button at the bottom which reads: “Download remaining XX bytes.”
To fix this, make sure that you have a minimum of 1,019 characters before your closing head tag (</head>) including spaces and carriage returns.
If you don’t have any need for more styles nor a style block, try inserting several lines of empty spaces.
Here is a complete article with samples: Two ways to ensure that your entire email is rendered by default in the iPhone & iPad
By default, Safari on the iOS detects any text string that is formatted like a phone number and converts it to a link which allows users to call the number by simply touching it.
To remove this type of auto formatting simply add the following meta-tag:
<meta name=“format-detection” content=“telephone=no”>
A list of quarky issues in iPad Gmail:
Gmail converts your body to a DIV. This is extremely important because since there is no width set in your body, the iPad sets the width of your converted body tag to the width of the message details container (white background with gray border). So if you have a background color or image in the body of your email, you have a few options:
1.) Wrap the contents of your email in a table or div with the width set to the widest element in your layout.
2.) Add an inline CSS width attribute to your body:
<body style=“width:800px”>
The problem with this solution is that your email will now be left aligned in the web based Gmail client and the background color won’t extend to the left/right.
IMPORTANT NOTE: *You must use ‘px’, ‘em’, or ‘pt’ in either of these options - percentages will not work.
We are not sure why Google has decided to block all images on the iPad. Currently there is no setting that will allow users to turn on images for Gmail on the iPad.
A list of quarky issues in iPhone 5.0:
Yes. You can use media queries in your embedded CSS:
@media only screen and (max-device-width: 480px) {
/* Here you can include rules for the Android and
iPhone native email clients. ALWAYS USE IDs!!! The
Android does not support “class” declarations.
Here’s more info on that: http://www.emailonacid.com/blog/the_android_mail_app_and_css_class_declarations/
Device viewport dimensions are as follows:
Iphone: 320px X 480px - portrait, 480px X 320px - landscape
Android:350px X 480px - portrait, 480 X 350 - landscape
(These are average dimensions, the Android OS runs on several different devices)
*/
}
@media only screen and (min-device-width: 768px) {
/* Here you can include rules for the iPad native
email client.
Device viewport dimensions in pixels:
768 x 1024 - portrait, 1024 x 768 - landscape
*/
}
Media queries will not work for mobile versions of Gmail.
Here are a few options:
1.) Re-size and re-use the same image (better for overall file size)
<style type=“text/css”>
@media only screen and (max-device-width:480px;) {
body[yahoo] .header { width:300px}
}
</style>
<body yahoo=“fix”>
<img src=“http://www.url.com/image.jpg” class=“header” width=“600” height=“100” />
</body>
2.) Completely replace the image:
<style type=“text/css”>
@media only screen and (max-device-width:480px;) {
body[yahoo] .mobile_only {
width:600px !important;
overflow:visible !important;
float: none !important;
display: block !important;
}
body[yahoo] .desktop_header { display:none}
}
</style>
<body yahoo=“fix”>
<div class=“mobile_only” style=“width:0px; overflow:hidden;float:left;display:none”>
test image for mobile, width=“300px”
</div>
<div class=“desktop_header”>
test image for desktop width=“600px”
</div>
</body>
Note, we used overflow, width and float above because Gmail does not support display:none. We also incorporated the Yahoo fix in both examples which is further explained here.
Option 2 is not for the faint of heart, if you want to nest block elements like tables within your hidden div, make sure you test in all clients - especially Outlook 2007/2010. Here’s more discussion on that.
To control the font adjustment in the iPhone universally, try adding this to your embedded CSS:
<style>
* {-webkit-text-size-adjust: none}
</style>
Or you can also control text on a case by case basis by adding the following inline CSS:
<font style=”-webkit-text-size-adjust: none”>
Example
</font>
The iPhone shrinks and scales each of the elements within your email until the entire width of your design fits within its 320 pixel “viewport”. Most of the time this does not cause any visual problems, however sometimes HTML elements are not scaled at the same ratio.
There is a very simple fix - add an iOS specific meta-tag.
<meta name=“viewport” content=“width=600,initial-scale = 2.3,user-scalable=no”>
In this tag you can set the width of your email, the initial scale and whether you want users to be able to zoom in on the content. In the example above the total width of your design will be no less than 600 pixels but the iPhone will still scale it to fit within its viewport. The initial scale will be 2.3 and users cannot zoom.
If you notice any scaling problems on the iPhone set the width to the widest element in your email and you should be good to go.
For more information on the uses of this meta-tag visit the following link
If you run into an issue with hairline borders appearing in HTML email designs with table layouts, check out Campaign Monitor’s article and fix:
Sometimes the iOS reader only displays a small segment of the original email. When this happens, it renders the loaded portion with a button at the bottom which reads: “Download remaining XX bytes.”
To fix this, make sure that you have a minimum of 1,019 characters before your closing head tag (
) including spaces and carriage returns.
If you don’t have any need for more styles nor a style block, try inserting several lines of empty spaces.
Another option is to remove your
tags entirely. Be careful with this solution, some email service providers might place head tags within your email dynamically.
Here is a complete article with samples: Two ways to ensure that your entire email is rendered by default in the iPhone & iPad
By default, Safari on iOS detects any text string that is formatted like a phone number and converts it to a link which allows users to call the number by simply touching it.
To remove this type of auto formatting simply add the following meta-tag:
<meta name=“format-detection” content=“telephone=no”>
A list of quarky issues in Kindle Fire 2.3:
A list of quarky issues in Live Mail :
If you have a CSS “width” property set in a containing UL, your bullets will not render in Windows Mail, Outlook Express, Outlook 2003 and Live Mail. Once you remove the width property, you will resolve the issue.
For example, change:
<ul style=“width:250px; padding-top: 20px; margin-top: 2px;”>
to this:
<ul style=“padding-top: 20px; margin-top: 2px;”>
Also, Thunderbird 2 renders bullets like diamonds rather than circles.
One suggestion to resolve this in every email client is to create a table for every bulleted list and use images or an HTML entity as the bullet itself.
For example:
<table>
<tr>
<td><img src=“http://www.example.com/dot.gif”></td>
<td>Insert text here</td>
</tr>
</table>
OR
<table>
<tr>
<td>•</td>
<td>Insert text here </td>
</tr>
A list of quarky issues in Lotus Notes 6.5:
Lotus Notes 6.5 and 7.0 have very limited support for both inline and embedded CSS so the best way to get around that is to back up your styles with table and font attributes.
In Lotus Notes 6.5 and 7.0 - if you are using a background color attribute for your tables, it is a good habit to set an attribute for all nested tables as well.
There could be a couple reasons for your images not being displaying.
1. Lotus Notes 6.5 does not support .PNG file types.
2. Are you using https references to your images? Sometimes Lotus Notes 6.5 will not recognize the SSL certificate issuer and will display a pop-up warning. It is best to avoid using https when referencing images.
A list of quarky issues in Lotus Notes 7:
Lotus Notes 6.5 and 7.0 have very limited support for both inline and embedded CSS so the best way to get around that is to back up your styles with table and font attributes.
In Lotus Notes 6.5 and 7.0 - if you are using a background color attribute for your tables, it is a good habit to set an attribute for all nested tables as well.
There could be a couple reasons for your images not being displaying.
1. Lotus Notes 7 does not support .PNG file types.
2. Are you using https references to your images? Sometimes Lotus Notes 7 will not recognize the SSL certificate issuer and will display a pop-up warning. It is best to avoid using https when referencing images.
A list of quarky issues in Lotus Notes 8:
Lotus Notes 8 does not support inline CSS backgrounds with a url(). It will remove the entire background declaration.
Since Gmail and Yahoo do something similar, it is recommended that you use the “background” attribute within your TDs and set a bgcolor attribute as a backup.
<td background=“http://www.test.com/test.jpg” bgcolor=”#000”>
If you include an inline RGB decimal value, Lotus Notes 8.0 will ignore the entire style declaration.
To fix this, use hexadecimal values instead:
<td style=“font-size:10px; color:#7d7d7d; font-family:Arial; padding:20px;
background-color:#F90”>
This is a TD test
</td>
A list of quarky issues in Lotus Notes 8.5:
If you have an embedded CSS declaration that contains a background with a url() property, Lotes Notes 8.5 will remove the entire style tag. Example:
<style type=“text/css”>
p { background: #fff url(/images/clear.gif) no-repeat; }
</style>
It doesn’t matter what element the background declaration is intended for, the entire tag will be removed.
Using browser extensions (for example: -moz-outline-radius, -webkit-border-radius, and -ms-text-justify) within your embedded CSS have also been known to cause this issue. If this is the case, try using them inline instead.
A list of quarky issues in Mac Mail :
If you use a percentage value over 100% in any attribute or CSS property, Mac Mail, Entourage 2004, and Entourage 2008 will force your container to that size. So for example:
<table width=“700%” border=“0”>
<tr>
<td width=“700” valign=“top”>
test
</td>
</tr>
</table>
Will result in a table that is about 6000 pixels wide. For these email clients, it is best to stick with percentage values under 100%.
A list of quarky issues in Outlook 2003:
If you have a CSS “width” property set in a containing UL, your bullets will not render in Windows Mail, Outlook Express, Outlook 2003 and Live Mail. Once you remove the width property, you will resolve the issue.
For example, change:
<ul style=“width:250px; padding-top: 20px; margin-top: 2px;”>
to this:
<ul style=“padding-top: 20px; margin-top: 2px;”>
Also, Thunderbird 2 renders bullets like diamonds rather than circles.
One suggestion to resolve this in every email client is to create a table for every bulleted list and use images or an HTML entity as the bullet itself.
For example:
<table>
<tr>
<td><img src=“http://www.example.com/dot.gif”></td>
<td>Insert text here</td>
</tr>
</table>
OR
<table>
<tr>
<td>•</td>
<td>Insert text here </td>
</tr>
When Outlook 2003 is installed for the first time, it uses the version of IE that is installed on that particular OS as it’s rendering engine. From there, if IE6 is upgraded to IE7, Outlook will still use the original version of IE (in this case IE6).
When Outlook 2003 came out in 2003, IE 6.0 was the most popular web browser.
Here’s more on that topic.
A list of quarky issues in Outlook 2007:
Outlook 2007 and 2010 do not support the margin or padding CSS properties when placed within an image.
Try using hspace and/or vspace:
<img src=“http://www.emailonacid.com/example.jpg” align=“left” vspace=“10” hspace=“10” />
Or add the additional spacing to the image itself (in pixels).
If you have text within a table, for instance “aaaaaaaaaaaaaaaaa” and you want it to wrap, try adding this style:
<td style=“word-break:break-all;”>
This is a Microsoft only property so it should not adversely effect other clients.
If you are using a background color in your table cell, you might see a 1px white border around the contents of the TD. To fix, simply add the following to your embedded styles:
table td { border-collapse: collapse; }
Or you can add it inline:
<td style=“border-collapse: collapse;”>... </td> }
Check out this post from Campaign Monitor for more info.
Outlook 2007 and 2010 do NOT support the “style” block IF the “a” tag does NOT include an “href” attribute.
For example:
<a style=“font-size: 20px; color: #004990;”>Shop Flooring </a>
Should be changed to:
<a href=“http://www.test.com” style=“font-size: 20px; color: #004990;”>Shop Flooring </a>
The safest way to get consistent results is to use a table instead:
<table cellpadding=“2” cellspacing=“2” border=“0”>
<tr>
<td valign=“top”>•</td>
<td>Test</td>
</tr>
<tr>
<td valign=“top”>1.</td>
<td>Test</td>
</tr>
</table>
Avoid using “margin” or “padding” CSS properties in your TABLE tag. Cellpadding and Cellspacing attributes are generally safe but margin or padding will often be added to every TD within the table.
If you are using an align attribute on your table, for example:
<table align=“left”>
This can also cause unwanted cell padding and spacing. Try using mso-table-lspace and mso-table-rspace properties to tighten things up:
<table border=“0” align=“left” cellpadding=“0” cellspacing=“0” style=“mso-table-lspace:0pt;mso-table-rspace:0pt; ”>
Note: Be extra cautious with table alignment, you never know what the interpretation will be from Word rendering engine. We’ve seen instances where it tries to write it’s own absolute positioning.
Since this is a screen capture, the resulting JPG image is left aligned within our result preview pane. If you have the interfaces turned off, there might be a lot of extra white space to the right of the screen capture.
Don’t be alarmed, this is simply a limitation of our interface, not your email.
If your background is white and it is difficult to tell if your email is centered within the actual screen capture, you can always right click on the image, save it to your local computer and open it up in an any image editor to ensure that your email is centered within the screen capture. Another trick is to make sure your browser window is selected and type Ctrl-A (Cmd-A on the Mac). That will highlight the large JPG so you can see the borders of the image. To un-highlight simply click anywhere in the browser window.
Outlook 07 and 2010 have been known to convert divs and headings to paragraphs with nested spans. This changes the HTML container from a box element to an inline element.
For example this:
<h2 style=“font-size: 15px; font-weight: bold; margin: 0; padding: 17px 0 0 0;”>
NEW FASHIONS
</h2>
Will get converted to:
<p class=MsoNormal style=‘mso-outline-level:3’>
<b>
<span style=‘font-size:11.5pt’>NEW FASHIONS<o:p></o:p></span>
</b>
</p>
One fix is to move your padding into the containing TD, for example:
<td style=“padding: 17px 0 0 0”>
<h2 style=“font-size: 15px; font-weight: bold; margin: 0”>NEW FASHIONS</h2>
</td>
Another fix is to avoid headings and divs and use paragraphs instead.
Try adding “mso-line-height-rule:exactly” just before your line-height declaration.
For example:
<td style=“mso-line-height-rule:exactly; line-height:50px;>
This fix ONLY works on block elements. So trying to achieve the same effect inside a font or span tag will not work. Since this is a Microsoft only CSS property, it should not interfere with any other email client.
Yes, for the most part, it seems safe to nest at least 5 tables deep in Outlook 2007 and 2010. If you have an instance where you find that you can NOT nest that many tables, please share it with us.
Be sure your rowspan attributes within your TDs are set to the correct value. Most web browsers are very lenient if you have a higher value than required but Outlook 07 and 2010 will interpret them even if the additional rows do not exist in your table.
When viewing your Acid Test preview for Outlook 2007 click on the “Code Interpretation” for more clues as to what Outlook is doing with your original code.
Also, check out this forum post for additional insight:
http://www.emailonacid.com/S=ce30aa2a1edda60d375063ca816470dccb8584c3/forum/viewthread/149/
Depending on your layout, each instance might be different.
Box elements with a fixed width and height may not display correctly. If horizontal and vertical spacing is determined by spacer graphics (as opposed to the email’s content), be aware that customized spacing and alignment may be impossible in some cases. For best results, try using a combination of transparent spacer images and the HTML height attribute on the table cell.
Outlook 2007 and 2010 impose a 2-pixel height minimum for table cells. So, for example, if a table cell contains a 1-pixel transparent gif and a background color, your ‘horizontal line’ will appear thicker than expected.
Outlook often converts your DIVS to paragraphs, to be sure, you can review the “Code Interpretation” that we provide for this client. This is the output of our original code so it will help you work within the construct of Outlook07 and 2010. To date, we have not been able to detect a rhyme or reason for why it converts DIVs when it does, if you know, please feel free to share it with us below.
Within its viewer, Outlook 2007 uses “text boundaries” which differ slightly from “page breaks.” Text boundaries are used to separate elements within the web layout for purposes of printing and don’t actually output any HTML code.
From our research, we learned that text boundaries stretch to a maximum height of 23.7 inches (aprox. 1,790 pixels) before it automatically inserts a partition line and creates a new text boundary. Therefore, If you have any tables that are higher than 23.7 inches within your email, it will get broken up into multiple, stacked text boundaries.
The best solution is to break out your tables into two (or more) stacked tables that are less than 23.7 inches in height. A new text boundary is created every time you create a new table element so one table might be 10 inches and another might be 15 inches. As long as each individual table does not exceed the height constraint you won’t end up with automatically generated text boundaries.
Use nested tables within each stacked table but be aware of the fact that some of your nested tables might be over 23.7 inches in height. With that said, you could start breaking those apart first and test between each iteration.
When doing this, you might have to remove all spaces and carriage returns within your code, particularly between your closing and opening tables. This helps to ensure that they stack on top of each other perfectly. Since this may cause a complete restructure of your table layout, it’s a good idea to get in the habit of designing your tables so that they can be easily stackable when needed. You might only have to break apart one table that exceeds the maximum height, others might not cause a noticeable gap.
If this solution does not work for you, click here for more information and a few alternative work-a-rounds.
Since this is a screen capture, the resulting JPG image is left aligned within our result preview pane. If you have the interfaces turned off, there might be a lot of extra white space to the right of the screen capture.
Don’t be alarmed, this is simply a limitation of our interface, not your email.
If your background is white and it is difficult to tell if your email is centered within the actual screen capture, you can always right click on the image, save it to your local computer and open it up in an any image editor to ensure that your email is centered within the screen capture. Another trick is to make sure your browser window is selected and type Ctrl-A (Cmd-A on the Mac). That will highlight the large JPG so you can see the borders of the image. To un-highlight simply click anywhere in the browser window.
Outlook truncates the upper portion of all images higher than 1728px from the top-down. So, if your image is 250px longer than the 1728px limit, 250px will get cropped off the top.
We’ve also seen Outlook re-scale an image so that it’s max height is 1728px.
We suggest that you crop your images and stack them on top of each other.
Stretched images (e.g., bars, borders, gradients, etc.) may not render correctly. All graphics should have their correct dimensions in the file properties. Do not rely on HTML-defined dimensions for images that are critical to the email’s layout.
Outlook does not support animated GIFs, instead it only shows the first slide of your animation so make sure the most important call to action is on that slide.
A list of quarky issues in Outlook 2010:
Outlook 2007 and 2010 do not support the margin or padding CSS properties when placed within an image.
Try using hspace and/or vspace:
<img src=“http://www.emailonacid.com/example.jpg” align=“left” vspace=“10” hspace=“10” />
Or add the additional spacing to the image itself (in pixels).
If you have text within a table, for instance “aaaaaaaaaaaaaaaaa” and you want it to wrap, try adding this style:
<td style=“word-break:break-all;”>
This is a Microsoft only property so it should not adversely effect other clients.
If you are using a background color in your table cell, you might see a 1px white border around the contents of the TD. To fix, simply add the following to your embedded styles:
table td { border-collapse: collapse; }
Or you can add it inline:
<td style=“border-collapse: collapse;”>... </td> }
Check out this post from Campaign Monitor for more info.
Outlook 2007 and 2010 do NOT support the “style” block IF the “a” tag does NOT include an “href” attribute.
For example:
<a style=“font-size: 20px; color: #004990;”>Shop Flooring </a>
Should be changed to:
<a href=“http://www.test.com” style=“font-size: 20px; color: #004990;”>Shop Flooring </a>
The safest way to get consistent results is to use a table instead:
<table cellpadding=“2” cellspacing=“2” border=“0”>
<tr>
<td valign=“top”>•</td>
<td>Test</td>
</tr>
<tr>
<td valign=“top”>1.</td>
<td>Test</td>
</tr>
</table>
Avoid using “margin” or “padding” CSS properties in your TABLE tag. Cellpadding and Cellspacing attributes are generally safe but margin or padding will often be added to every TD within the table.
If you are using an align attribute on your table, for example:
<table align=“left”>
This can also cause unwanted cell padding and spacing. Try using mso-table-lspace and mso-table-rspace properties to tighten things up:
<table border=“0” align=“left” cellpadding=“0” cellspacing=“0” style=“mso-table-lspace:0pt;mso-table-rspace:0pt; ”>
Note: Be extra cautious with table alignment, you never know what the interpretation will be from Word rendering engine. We’ve seen instances where it tries to write it’s own absolute positioning.
Since this is a screen capture, the resulting JPG image is left aligned within our result preview pane. If you have the interfaces turned off, there might be a lot of extra white space to the right of the screen capture.
Don’t be alarmed, this is simply a limitation of our interface, not your email.
If your background is white and it is difficult to tell if your email is centered within the actual screen capture, you can always right click on the image, save it to your local computer and open it up in an any image editor to ensure that your email is centered within the screen capture. Another trick is to make sure your browser window is selected and type Ctrl-A (Cmd-A on the Mac). That will highlight the large JPG so you can see the borders of the image. To un-highlight simply click anywhere in the browser window.
Outlook 07 and 2010 have been known to convert divs and headings to paragraphs with nested spans. This changes the HTML container from a box element to an inline element.
For example this:
<h2 style=“font-size: 15px; font-weight: bold; margin: 0; padding: 17px 0 0 0;”>
NEW FASHIONS
</h2>
Will get converted to:
<p class=MsoNormal style=‘mso-outline-level:3’>
<b>
<span style=‘font-size:11.5pt’>NEW FASHIONS<o:p></o:p></span>
</b>
</p>
One fix is to move your padding into the containing TD, for example:
<td style=“padding: 17px 0 0 0”>
<h2 style=“font-size: 15px; font-weight: bold; margin: 0”>NEW FASHIONS</h2>
</td>
Another fix is to avoid headings and divs and use paragraphs instead.
Try adding “mso-line-height-rule:exactly” just before your line-height declaration.
For example:
<td style=“mso-line-height-rule:exactly; line-height:50px;>
This fix ONLY works on block elements. So trying to achieve the same effect inside a font or span tag will not work. Since this is a Microsoft only CSS property, it should not interfere with any other email client.
Yes, for the most part, it seems safe to nest at least 5 tables deep in Outlook 2007 and 2010. If you have an instance where you find that you can NOT nest that many tables, please share it with us.
Be sure your rowspan attributes within your TDs are set to the correct value. Most web browsers are very lenient if you have a higher value than required but Outlook 07 and 2010 will interpret them even if the additional rows do not exist in your table.
When viewing your Acid Test preview for Outlook 2010 click on the “Code Interpretation” for more clues as to what Outlook is doing with your original code.
Also, check out this forum post for additional insight:
http://www.emailonacid.com/S=ce30aa2a1edda60d375063ca816470dccb8584c3/forum/viewthread/149/
Depending on your layout, each instance might be different.
Box elements with a fixed width and height may not display correctly. If horizontal and vertical spacing is determined by spacer graphics (as opposed to the email’s content), be aware that customized spacing and alignment may be impossible in some cases. For best results, try using a combination of transparent spacer images and the HTML height attribute on the table cell.
Outlook 2007 and 2010 impose a 2-pixel height minimum for table cells. So, for example, if a table cell contains a 1-pixel transparent gif and a background color, your ‘horizontal line’ will appear thicker than expected.
Outlook often converts your DIVS to paragraphs, to be sure, you can review the “Code Interpretation” that we provide for this client. This is the output of our original code so it will help you work within the construct of Outlook07 and 2010. To date, we have not been able to detect a rhyme or reason for why it converts DIVs when it does, if you know, please feel free to share it with us below.
Within its viewer, Outlook 2010 uses “text boundaries” which differ slightly from “page breaks.” Text boundaries are used to separate elements within the web layout for purposes of printing and don’t actually output any HTML code.
From our research, we learned that text boundaries stretch to a maximum height of 23.7 inches (aprox. 1,790 pixels) before it automatically inserts a partition line and creates a new text boundary. Therefore, If you have any tables that are higher than 23.7 inches within your email, it will get broken up into multiple, stacked text boundaries.
The best solution is to break out your tables into two (or more) stacked tables that are less than 23.7 inches in height. A new text boundary is created every time you create a new table element so one table might be 10 inches and another might be 15 inches. As long as each individual table does not exceed the height constraint you won’t end up with automatically generated text boundaries.
Use nested tables within each stacked table but be aware of the fact that some of your nested tables might be over 23.7 inches in height. With that said, you could start breaking those apart first and test between each iteration.
When doing this, you might have to remove all spaces and carriage returns within your code, particularly between your closing and opening tables. This helps to ensure that they stack on top of each other perfectly. Since this may cause a complete restructure of your table layout, it’s a good idea to get in the habit of designing your tables so that they can be easily stackable when needed. You might only have to break apart one table that exceeds the maximum height, others might not cause a noticeable gap.
If this solution does not work for you, click here for more information and a few alternative work-a-rounds.
Since this is a screen capture, the resulting JPG image is left aligned within our result preview pane. If you have the interfaces turned off, there might be a lot of extra white space to the right of the screen capture.
Don’t be alarmed, this is simply a limitation of our interface, not your email.
If your background is white and it is difficult to tell if your email is centered within the actual screen capture, you can always right click on the image, save it to your local computer and open it up in an any image editor to ensure that your email is centered within the screen capture. Another trick is to make sure your browser window is selected and type Ctrl-A (Cmd-A on the Mac). That will highlight the large JPG so you can see the borders of the image. To un-highlight simply click anywhere in the browser window.
Outlook truncates the upper portion of all images higher than 1728px from the top-down. So, if your image is 250px longer than the 1728px limit, 250px will get cropped off the top.
We’ve also seen Outlook re-scale an image so that it’s max height is 1728px.
We suggest that you crop your images and stack them on top of each other.
Stretched images (e.g., bars, borders, gradients, etc.) may not render correctly. All graphics should have their correct dimensions in the file properties. Do not rely on HTML-defined dimensions for images that are critical to the email’s layout.
Outlook does not support animated GIFs, instead it only shows the first slide of your animation so make sure the most important call to action is on that slide.
A list of quarky issues in Outlook Express:
If you have a CSS “width” property set in a containing UL, your bullets will not render in Windows Mail, Outlook Express, Outlook 2003 and Live Mail. Once you remove the width property, you will resolve the issue.
For example, change:
<ul style=“width:250px; padding-top: 20px; margin-top: 2px;”>
to this:
<ul style=“padding-top: 20px; margin-top: 2px;”>
Also, Thunderbird 2 renders bullets like diamonds rather than circles.
One suggestion to resolve this in every email client is to create a table for every bulleted list and use images or an HTML entity as the bullet itself.
For example:
<table>
<tr>
<td><img src=“http://www.example.com/dot.gif”></td>
<td>Insert text here</td>
</tr>
</table>
OR
<table>
<tr>
<td>•</td>
<td>Insert text here </td>
</tr>
When Outlook Express is installed for the first time, it uses the version of IE that is installed on that particular OS as it’s rendering engine. From there, if IE5 is upgraded to IE6, Outlook will still use the original version of IE (in this case IE5).
When Outlook Express came out in 1999, IE 5.0 was the most popular web browser.
Here’s more on that topic.
A list of quarky issues in Thunderbird 3:
If you have an align attribute within an image and it is set to “right” or “left” Thunderbird will add a 3 pixel margin to your image.
align=“right” - adds a 3px margin to the left of the image
align=“left” - ads a 3px margin to the right of the image
This is especially important of you are trying to get images to stack up neatly within a table.
To fix the spacing, either remove the alignment or add a CSS margin of “0”.
For example:
<img src=“http://www.test.jpg” align=“right” style=“margin:0”>
Thunderbird automatically resolves the relative URL paths in linked CSS properties based on the value given in STYLE tags HREF attribute. Even though Thunderbird will automatically do this for you it is still highly recommended to use absolute URL paths in your linked CSS. This is the only email client that provides this feature.
A list of quarky issues in Windows Mail :
If you have a CSS “width” property set in a containing UL, your bullets will not render in Windows Mail, Outlook Express, Outlook 2003 and Live Mail. Once you remove the width property, you will resolve the issue.
For example, change:
<ul style=“width:250px; padding-top: 20px; margin-top: 2px;”>
to this:
<ul style=“padding-top: 20px; margin-top: 2px;”>
Also, Thunderbird 2 renders bullets like diamonds rather than circles.
One suggestion to resolve this in every email client is to create a table for every bulleted list and use images or an HTML entity as the bullet itself.
For example:
<table>
<tr>
<td><img src=“http://www.example.com/dot.gif”></td>
<td>Insert text here</td>
</tr>
</table>
OR
<table>
<tr>
<td>•</td>
<td>Insert text here </td>
</tr>
A list of quarky issues in Yahoo! :
The quick answer to this question is no.
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>
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 {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.
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.
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.
Yahoo! Mail 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>
This space is actually caused by the Hotmail 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
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 recent blog post with more examples.
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.
A list of quarky issues in Yahoo! (Classic):
Try adding this to your embedded CSS (just before the
):
<style type=“text/css”>
a, a:visited, a:link {
text-decoration:underline;
}
</style>
This will overwrite the linked style sheets for Yahoo Classic and Hotmail.
Yahoo-New and Yahoo-Classic ignore any negative values in the margin declaration. So it translates this:
margin:-40px 10px 0 0
to this:
margin: 10px 0pt 0pt
AND this:
margin:40px -10px 0 0
to this:
margin:40px 0pt 0pt
Both clients completely ignore any of the following:
margin-top: -40px
margin-right: -40px
padding:-15px 10px 0 0
padding:20px 10px -40px 0
Your best bet is to stay away from negative values entirely.
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 recent blog post with more examples.
|
|
||||||||||||||||||||||||||||||||||||||||||||||||||
