In some situations, Outlook 2007 and 2010 will render an undesirable vertical house in your e mail. We’ve been conscious of this for some time and figured it’s time we hunker down in seek for an evidence. In case you are operating into this concern, hopefully this text will offer you some helpful work-a-rounds.

We’d like to supply a particular because of Adam Naisbitt from EasyBlast.co.uk for serving to us troubleshoot and collaborate on doable fixes. Thanks Adam, it’s individuals such as you who preserve our developer group going sturdy!

The Trigger

As everyone knows, Outlook 2007 and 2010 use the Microsoft Phrase rendering engine for displaying HTML emails. The desktop software of MS Phrase means that you can select from a number of completely different structure views however Outlook makes use of the “Internet Format” view which is very like a WYSIWYG editor as a result of it outputs its personal HTML code. Inside its viewer, it makes use of “textual content boundaries” which differ barely from “web page breaks.” When Phrase interprets a web page break, it truly inserts a <BR /> tag in its HTML output. Textual content boundaries are used to separate components inside the internet structure for functions of printing and don’t truly output any HTML code.

From our analysis, we discovered that textual content boundaries stretch to a most peak of 23.7 inches (aprox. 1,790 pixels) earlier than it robotically inserts a partition line and creates a brand new textual content boundary. Subsequently, In case you have any tables which can be larger than 23.7 inches inside your e mail, it’s going to get damaged up into a number of, stacked textual content boundaries.

Most frequently the contents from one textual content boundary to the following is flush and subsequently unnoticeable. Nonetheless, if you do discover undesirable spacing, you is perhaps in for many high-quality tuning earlier than you get it resolved.

Routinely generated textual content boundaries all the time render on the similar peak so in case you have a desk with a width of 100% of the view pane and your content material flows accordingly, the situation of the particular partition line shall be depending on the scale of the viewer’s window. Additionally, I used to be primarily testing with Outlook 2007, a part of Microsoft Workplace Enterprise 2007. The utmost peak of textual content boundaries might fluctuate from one model of Microsoft Workplace to the following.

From what I can inform, there is no such thing as a approach to disable or improve the utmost peak for textual content boundaries. In truth, I used to be actually hoping to discover a doc particular property within the HTML output as a result of which may have led manner a doable hack. In all the documentation I’ve discovered, even from Microsoft, they suggest that the utmost doc dimension is a tough, quick rule and there’s no getting round it.

Listed below are some situations which may trigger the spacing:

1.) A desk with two or extra columns that stretch longer than 23.7 inches in peak.

2.) Nested tables inside a big containing desk.

3.) Tables which can be reliant on rowspans that exceed 23.7 inches in peak.

4.) A big picture that’s positioned at or across the 23.7 inch border would possibly get bumped up or down from one textual content boundary to the following inflicting a number of undesirable spacing. In truth, I additionally examined photographs that the place bigger than 23.7 inches and the Phrase viewer primarily resizes the picture to a proportion that matches inside the textual content boundary. So when you insert actually tall spacer gif, for instance, it’s going to get positioned into one of many textual content boundaries and shall be resized inside that boundary’s peak constraint.

There could also be a number of different situations that trigger the hole, when you come throughout one which hasn’t been listed right here, please tell us about it, we’d be blissful to take a look at your HTML code.

So what’s the resolution?

Typically talking, I like to recommend testing your e mail first to see if textual content boundaries are inflicting areas. As I discussed, many occasions the desk seems to be fluid, regardless of what number of nested tables you could have. When you do see an area, listed below are some issues you may strive:

1.) The perfect resolution is to interrupt out your tables into two (or extra) stacked tables which can be lower than 23.7 inches in peak. A brand new textual content boundary is created each time you create a brand new desk aspect so one desk is perhaps 10 inches and one other is perhaps 15 inches. So long as every particular person desk doesn’t exceed the peak constraint you received’t find yourself with robotically generated textual content boundaries.

Use nested tables inside every stacked desk however pay attention to the truth that a few of your nested tables is perhaps over 23.7 inches in peak. With that mentioned, you can begin breaking these aside first and take a look at between every iteration.

When doing this, you may need to take away all areas and carriage returns inside your code, notably between your closing and opening tables. This helps to make sure that they stack on prime of one another completely.

Since this will likely trigger a whole restructure of your desk structure, it’s a good suggestion to get within the behavior of designing your tables in order that they are often simply stackable when wanted. You would possibly solely have to interrupt aside one desk that exceeds the utmost peak, others won’t trigger a noticeable hole.

In case you are utilizing a wrapper desk to manage the background coloration of your e mail strive utilizing a span with “show:block” as an alternative.

2.) Attempt setting a break proper BEFORE the spacing, utilizing fashion=”page-break-before: all the time”.

For instance, if the difficulty is correct on a sure desk row, then make that <tr> into:

<tr fashion="page-break-before: all the time">

A giant because of MiketheCoder for this advice!

3.) Add a “peak” attribute within the TD that’s getting damaged. Generally this may restrict the quantity of spacing.

<td peak="2000">

4.) You may strive inserting breaks or paragraph tags strategically with a view to match up every column of your desk so the textual content boundary seems seamless. 

<p fashion="peak:10px; margin-bottom:0; margin-top:0; padding:0">&nbsp</p>

It is very important escape margin-bottom and margin-top right here as a result of Hotmail doesn’t help the generic “margin” property. Since this may be tough and your content material is certain to vary, this feature is much less splendid.

5.) You may strive including content material to the part above the compelled break to push the content material down and keep away from the break – however that is additionally not splendid as you won’t be answerable for the content material inside the e mail.

I’ve learn from different blogs and sources to keep away from utilizing greater than 3 nested tables in Outlook 2007 and 2010 however I’ve but to show this principle. Many occasions, when you take away nested tables, you’re truly eradicating a desk that exceeds 23.7 inches so this is perhaps why it has labored for others up to now. Once more, in case you have extra examples or data to share, don’t hesitate to attain out to us and shed your knowledge on the topic.

In case you have gotten within the behavior of inserting wrapper tables with a width of 100% for functions of including a background coloration, this would possibly trigger your desk to be over 23.7 inches. I wrote a observe up article on methods to realize the identical impact in each e mail consumer with out having to make use of a wrapper desk: Background Colours in HTML Emails.