HTML email tips and tricks for Outlook com

1. How to remove small space below images in Outlook.com?

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

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

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

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

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

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

2. How to use margin property in Outlook.com?

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

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

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

For example:.

3. How to fix line height in Outlook.com?

In their linked style sheet, Outlook.com includes the following:

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

The term “.ExternalClass” is necessary and is unique to Outlook.com. 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 Outlook.com?

This has been added to Outlook.com's default CSS:

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

To overwrite it, use the same code in your embedded CSS and change the color:

5. How to centered layout in Outlook.com?

Your email is stored in a div with the class "ExternalClass" in Outlook.com. 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:

6. How to use embedded CSS Outlook.com?

7. How to fix image maps in Outlook.com?

Unfortunately, image maps are no longer supported by Outlook.com.

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 Outlook.com?

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 Outlook.com?

Border colour in RGB format, such as rgb, is not supported by Outlook.com (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 Outlook.com?

Outlook.com 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 Outlook.com?

In some circumstances, Outlook.com 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 Outlook.com?

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, Outlook.com, 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.