Solved

Creating Page Breaks in Outlook 2007 HTML E-mails

Posted on 2011-02-17
4
2,263 Views
Last Modified: 2012-05-11
Our software generates 100+ page e-mails in HTML format, separating each page using

<div style="page-break-after: always;">&nbsp;</div>

This is so when printed, each page breaks exactly where we expect it to (we are generating invoices).

If the entire document is e-mailed to a computer using Outlook 2003, and then sent to a printer, everything prints as expected.

If the entire document is e-mailed to a computer using Outlook 2007, and then sent to a printer, it ignores our page break commands.

I realize Outlook 2007 uses a different HTML rendering engine -- my question is what is the work around?  What can we replace <div style="page-break-after: always;">&nbsp;</div> with so it generates a page break command upon printing, preferably a solution that works in both Outlook 2003 and Outlook 2007?

Thanks,
0
Comment
Question by:epicdevelopers
  • 2
  • 2
4 Comments
 

Author Comment

by:epicdevelopers
Comment Utility
0
 
LVL 7

Expert Comment

by:Vanguard_LH
Comment Utility
I'm no HTML or CSS guru.  I just struggle along looking up what I need.  What strikes me peculiar is that you are using a page break attribute in a DIV element which contains nothing but a non-breaking space.  That is, this isn't the DIV that encompasses the content for which you want to ensure a page break (i.e., the portion of the invoice after which you want a page break).  My guess is you have a bunch of content for part of the invoice and expect this separate element to do a page break on a prior element.  Is the invoice part after which you want a page break contained in its own DIV (was that what you meant by the non-breaking space)?  That is, is the DIV defining the invoice part the one that has the style attribute for page break?

The way that I've seen page breaks handled is with CSS definitions, not with div attributes, as described here:

http://www.htmlgoodies.com/beyond/css/article.php/3470341/CSS-and-Printing.htm

Another way that doesn't use the CSS class definition is similar to how you tried to use the style attribute, as decribed at:

http://www.chami.com/tips/internet/052898I.html

And lastly here is the definition as presented by W3 Schools which uses the CSS class to modify an element so a page break becomes inate to that element whether it was for an H2, HR, table, or other element:

http://www.w3schools.com/CSS/pr_print_pageba.asp

The above is what works in HTML in the supported *web browsers*.  Microsoft screwed every one of its customers when it pulled a fast one by switching from using IE's libraries to render HTML to instead using Word which is known to be a crappy HTML renderer.  So what works in HTML for web browsers may not work in MS Word's rendering.  This is one reason why I never bothered to, ahem, "upgrade" from OL2003.  I'm not interesting in using Word to render HTML during composition or display of an e-mail.  Some deficiencies of using Word are noted here (don't know if Word 2010 resolved any of them):

http://blogs.sitepoint.com/2007/01/10/microsoft-breaks-html-email-rendering-in-outlook/

Yet when I looked at http://msdn.microsoft.com/en-us/library/aa338201.aspx, it seems the page-break-after value for the style attribute in a DIV tag should be supported.  Well, should doesn't mean does.  There do appear to be values supported by the Word engine that may not be supported in web browsers.  See if using a P (paragraph) or HR (horizontal rule) with the STYLE attribute for page break works, or put the STYLE with page break in a DIV that encompasses the section of the invoice after which you want a page break, not in a following DIV.


I'm not a Word guru and asking them might find a solution (you didn't include the Word zone in your query).  There might be some Word-specific directive you can add as meta data to the HTML document that Word would recognize as a page break.  I've seen the HTML output generated when using Word as a poor substitute for an HTML editor and noticed that lots of directives get inserted that have meaning only to Word.  If the Word folks can't help, you may have to resolve to storing the invoices on a file server and providing a link to them in your e-mails.  Then recipients would click on the link and render the invoice in a web browser rather than using Word's crappy rendering.  If you don't like the idea of separating the e-mail from its intended content (by having a link to a separate document) then attach the invoice as a .doc file where within you can define the page breaks that you want.

2007 Office System Tool: Outlook HTML and CSS Validator
http://www.microsoft.com/downloads/en/details.aspx?familyid=0b764c08-0f86-431e-8bd5-ef0e9ce26a3a&displaylang=en

I've never used this and would be interested to know if it suggests changes to your HTML to make it better, resolve problems, or suggest changes to how you tried to add page breaks.  Personally I find it safest to use simple HTML for e-mail content because different e-mail clients have different problems rendering more complicated HTML.  Instead I attach the document and let the recipient handle how to render it (i.e., they will need Office or a viewer app for the doc, xls, ppt, and other Office-type files).
0
 

Author Comment

by:epicdevelopers
Comment Utility
Thanks for your efforts but unfortunately I could not get these to work either.  I wrapped our actual content with P (rather than a nbsp all by itself) and tried 3 methods of setting the page break as suggested above -- all of the methods worked in 2003 and none of the methods worked in 2007.

I installed the validation tool and have not had much luck with it.  Bugs me that not only do you need to install it but they make you muck around in your registry with quite a few keys too.  Selected "Word 2007" as my validator in Visual Studio 2008 and it's telling me: Element 'html' is not supported.  Same with head, title, body, p, etc... obviously not behaving as I would expect it to.
0
 
LVL 7

Accepted Solution

by:
Vanguard_LH earned 500 total points
Comment Utility
Simple HTML is about all I would try using in an e-mail since different e-mail clients have different levels of HTML support.  Never attempt to deliver HTML web pages via e-mail.  I'd suggest either attaching a .doc file that has the page breaks where you want them or attach a web page with the page breaks but opens in a *real* web browser.  I doubt it's just Outlook 2007 with Word doing the HTML rendering that has problems displaying everything that is possible with XHTML, CSS, and everything else expected of web browsers.  I've seen mentioned of a couple of other e-mail clients that won't do everything that a web browser does but can't remember them right now.  For example, most e-mail clients are configured to deliberately not handle some HTML components, like scripting, for security purposes.  Any HTML e-mail with scripting won't have those scripts do anything (and some folks use scripting to delivery dynamic content).  I know that Outlook won't show animated GIFs.  In OL2003, you can "View -> View in Internet Zone" to temporarily get past the Restricted Sites throttling of HTML-formatted e-mail for one e-mail (but you're still rendering the HTML document inside of Outlook so Outlook 2007 would probably still stick you with using Word to do the rendering instead of IE's libraries).  Even for those e-mail clients that rely on a web browser or its libraries to render HTML documents, you can't dictate what version of which web browser they have on their host - and different web browsers and different versions of each have varying support for HTML.  It takes some effort to make an HTML document that is compatible across different web browsers and then to simplify to make sure 10-year versions of those web browsers can still properly display your HTML document.

It isn't just one e-mail client that has problems with rendering all of what HTML can provide.  That's why you don't use e-mail to deliver web pages.  You send a .htm document, or .doc or .pdf file if you want the full abilities of those document formats.  Besides, many e-mail users refuse to allow HTML formatted e-mails in their Inbox, anyway.  They configure their e-mail client to use plain text for all their e-mails.  After all, email is about communication, not presentation.  If presentation is important, use web pages or HTML documents that display in web browsers (and hope the recipient has a recent version of a web browser that can handle your HTML document).

I've seen some e-mails that try to use too much HTML but to be safe they will provide a link saying "If this email does not display properly (typically Outlook 2007) then click here" which opens a web page to show a copy of the e-mail.  But then not everyone is mass mailing the same HTML-rich document to all their recipients, as in your case where supposedly the invoice is unique to the recipient (or perhaps a template with info specific to a particular recipient).  Rather than a link, you could attach an .htm document; however, you'd have to put something in the HTML-formatted e-mail that obviously doesn't render "properly" to prod users to open the attachment with the note in the e-mail body saying "If this email does not display properly (typically Outlook 2007) then open the attached HTML file."  Of course, I have to wonder why you are sending invoices via e-mail since that is sensitive information to the recipient who should be connecting to a web site to login to look at their account.  I doubt these recipients have all sent you their public key from their email certificate so you can send them an encrypted e-mail with their financial data therein.

Franky, you're going overboard with HTML in your emails.  You cannot dictate what e-mail client the recipient might use.  You cannot dictate which web browser they might use or which version of it is on whatever host they happen to use at the time they view your e-mail.  For HTML-formatted e-mails, keep it simple.  Go complex if you must in an attachment in the email or link to a web page (like the recipient's account login page with parameters in the URL that guides them to the current invoice after they login).

I've seen some folks come up with macros that add a function in Outlook to load an e-mail document in a web browser (e.g., http://www.howto-outlook.com/howto/openinbrowser.htm).  That way, the full power of the web browser and whatever level of HTML support it provides is available in rendering the HTML document.  Of course, just like with the choice of e-mail client, its configuration, which web browser and which version of it is on the recipient's host cannot be mandated by you, it's unlikely you can get your recipients to define and use a macro in Outlook (if that's the e-mail client they use).

Outlook 2010 mitigated some of the HTML rendering problems by affordig the "View in Browser" option when viewing an HTML formatted e-mail (one of the drop-down options in the mail tips infobar; see http://www.windowsitpro.com/Content/UserStorage/1105543/Figure1-125320-Outlook-Email-Opening-Browser.png, figure taken from article at http://www.windowsitpro.com/article/outlook/Opening-Outlook-2010-Email-in-a-Web-Browser.aspx).  In Outlook 2007, you open the email in its own window (double-click on the item), Message tab, Other Actions, and choose View in Browser.  I got this info from http://www.slipstick.com/mail1/print.asp.  Of course, now you're having to tell your recipients to jump through a bunch of hoops to properly render your overly HTML'ed e-mail.
0

Featured Post

How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

Join & Write a Comment

Set OWA language and time zone in Exchange for individuals, all users or per database.
Check out this infographic on what you need to make a good email signature that will work perfectly for your organization.
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
This video shows how to remove a single email address from the Outlook 2010 Auto Suggestion memory. NOTE: For Outlook 2016 and 2013 perform the exact same steps. Open a new email: Click the New email button in Outlook. Start typing the address: …

744 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

15 Experts available now in Live!

Get 1:1 Help Now