EoA Web TIP
Coding tips for the numerous problems in Outlook.com webmail.
Outlook.com 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 Outlook.com 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: https://www.emailonacid.com/forum/viewthread/43/
This space is actually caused by this client’s 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
Outlook.com does not support “margin” in CSS, but it DOES support “Margin” instead. That’s right, you need to use a capital M to make margin function in Outlook.com.
Also, Outlook.com 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 paragraphs.
For example:
p {Margin-bottom:0}
Outlook.com 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:
h2,h2 a,h2 a:visited,h3,h3 a,h3 a:visited,h4,h5,h6,.t_cht {color:#000 !important}
/**This is to overwrite Outlook.com'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 Outlook.com************/
.ExternalClass {width: 100%;}
Outlook.com 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 in every other browser the email will not be centered.
To overwrite this simply include this in your embedded CSS:
.ExternalClass {width: 100%;}
Outlook.com does not support border color in RGB format, for example rgb(167, 194, 117). It seems that the entire “border” declaration, along with other properties, are ignored if you use this method for border color. The same applies for border-bottom, right, left, top.
Unfortunately Outlook.com has 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 workarounds to ensure they line up evenly in all clients.
To avoid this, it’s best to keep your email under 630px wide.
If your email exceeds the reader’s browser window width minus 370px, your email will get cut off along the right side and you’ll see a yellow box will appear saying, “This message is too wide to fit your screen. Show full message…”
If you include any HTML code in your style block, even inside comment tags, Outlook.com will display a blank white email. This is because the display breaks in the style block, before any of the HTML in the body of your email is read. To avoid this, do not include HTML in your style block.
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.
This is a known error in our system and we’re working on fixing it right now. For some reason the system sometimes doesn’t measure the height of the email properly before taking the screen capture.
Outlook.com seems to ignore 100% width in some cases. To fix this, add “min-width:100%;” to the styles on that element.
