Outlook Webmail

Outlook.com


Coding tips for the numerous problems in Outlook.com webmail.


1 Why is my line height all screwed up?

Outlook.com includes the following in their linked style sheet:

{line-height131%

To overwrite it, use the following in your embedded CSS:

.ExternalClass {line-height100%

“.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/


2 Why is there a small space under each one of my images?

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


3 What is up with Outlook.com margins?

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:
<style type="text/css">
   
p {Margin-bottom:0}
</style


4 Why are my headers green?

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:

<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


5 Why is embedded CSS recommended for Outlook.com?

<style type="text/css">
/**This is to overwrite Outlook.com's Embedded CSS************/
table {border-collapse:separate;}
a
a:linka:visited {text-decorationnonecolor#00788a} 
a:hover {text-decorationunderline;}
h2
,h2 a,h2 a:visited,h3,h3 a,h3 a:visited,h4,h5,h6,.t_cht {color:#000 !important}
p {margin-bottom0}
.ExternalClass p, .ExternalClass span, .ExternalClass font, .ExternalClass td {line-height100%}
/**This is to center your email in Outlook.com************/
.ExternalClass {width100%;}
</style


6 Why isn't my email centered?

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-blockline-height131%}

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 {width100%;


7 Why aren't my borders working?

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.


8 Why aren't my image maps working?

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.


9 Why is my email getting cut off on the right?

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ā€¦”


10 Why is my email blank?

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.


11 Why does my email seem to be overlapping the right column?

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.


12 Why is my email getting cut off at the bottom?

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.


13 Why isn't the image full width?

Outlook.com seems to ignore 100% width in some cases. To fix this, add “min-width:100%;” to the styles on that element.