HTML email tips and tricks for Outlook com

Coding tips for the numerous problems in webmail.

tip banner 5 uai

1. How to remove small space below images in

The DOCTYPE of this client is responsible for this space. Here are a couple of workarounds (which also work in Gmail and

1) To the image element, apply the display:block style.

<img src="test.jpg" style="display:block"

2) In the image element, add align=absbottom.

<img src="test.jpg" align="absbottom"

3) To the picture element, add align=texttop.

<img src="test.jpg" align="texttop "

4) To the containing TD, add line-height:10px or lower.

<td style="line-height:10px"

5) To the containing TD, add font-size:6px or lower.

<td style="font-size:6px"

2. How to use margin property in does not accept the CSS term "margin," but it does support the term "Margin." To use the margin function in, you must type a capital M.

In addition,'s embedded CSS includes the following code:

p {Margin:0 0 1.35em;

In order to start with a clean slate for paragraphs, you'll need to override this in your embedded CSS.

For example:.

<style type="text/css">
p {Margin-bottom:0}

3. How to fix line height in

In their linked style sheet, includes the following:


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

.ExternalClass {line-height100%

The term “.ExternalClass” is necessary and is unique to They wrap your layout in a div with the class="ExternalClass," so you don't need to reference it anywhere else than in your embedded CSS.

4. How to fix green headers in

This has been added to's default CSS:

In addition,'s embedded CSS includes the following code:

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}

5. How to centered layout in

Your email is stored in a div with the class "ExternalClass" in The characteristics they've assigned to that class are as follows:


When using Internet Explorer, this has no effect on your email, but it will not be centred in any other browser.

Simply include the following in your embedded CSS to override this:

.ExternalClass {width100%;

6. How to use embedded CSS

<style type="text/css">
/**This is to overwrite's Embedded CSS************/
table {border-collapse:separate;}
a:linka:visited {text-decorationnonecolor#00788a} 
a:hover {text-decorationunderline;}
,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************/
.ExternalClass {width100%;}

7. How to fix image maps in

Unfortunately, image maps are no longer supported by

You'll have to slice your image into many images and use a table to align the parts if you want certain sections to be clickable. Remember to use our image spacing workarounds to ensure that your images are evenly spaced across all clients.

8. How to fix email getting cut off on the right in

To avoid this, keep your email's width within 630 pixels.

If the width of the reader's browser window is less than 370px, your email will be cut off on the right side, with a yellow box saying, "This message is too broad to suit your screen." “Show the entire message...”.

9. How to fix borders in

Border colour in RGB format, such as rgb, is not supported by (167, 194, 117). When you use this approach for border colour, it appears that the entire "border" declaration, as well as other properties, are ignored. The same is true for the borders at the bottom, right, left, and top.

10. How to fix email black in will display a blank white email if you include any HTML code in your style block, including inside comment tags. This is due to the fact that the display breaks in the style block before any of the HTML in the email body is read. To avoid this, do not include HTML in your style block.

11. How to fix full width image in

In some circumstances, appears to ignore 100% width.

Add “min-width:100 percent ;”

to the styles for that element to solve it.

12. How to fix email overlapping in right column

You may occasionally encounter an email that appears to be hanging off the right side of the frame when viewing broad emails. We purposely adjust the client's styles in our web client previews (Yahoo! Mail,, AOL Mail, Gmail, and others) to allow your complete email to be shown even if it is wider than the viewing pane. We do this because we can't possibly account for all of the different email widths that might be sent through our system. No, this isn't exactly how it'll appear in the real 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.