Working on an email in HTML format, we got all the necessary information: Outlook 2010, Mozilla Thunderbird, Horde / IMP, Gmail, Yahoo, etc. However, when an email is scanned through Outlook Web App (Exchange 2010), the HTML email does not display correctly sometimes.
The two issues that we see are that in Internet Explorer and Firefox, the built-in CSS font-size directives are not respected, and in Firefox, the image is split between table cells. This only happens when the message is NOT in your inbox. If we drag the message from the folder to the inbox, the problems will disappear. Drag it back to the folder and they will reappear. If we open the message in a new window (and not in the preview area), the message will be displayed correctly.
I assume that the Outlook CSS application is interfering, but I hope someone had a similar problem and can shed some light on how we can fix this problem.
Here is the appropriate message source, as shown on the client:
<html> <head> <style>a{color:#BF0005}</style> </head> <body bgcolor="#F5F5F5" style="margin:0;text-align:center"> <table cellpadding="0" cellspacing="0" style="width:604px;margin:0 auto;font-family:Tahoma,sans-serif;font-size:10pt;line-height:16pt"> <tr> <td rowspan="3" style="vertical-align:top;width:10px"><img src="cid:2e39cc62f2ab417d1b9461b437c72ffc" width="10px" height="410px" /></td> <td style="padding-top:10px;margin-bottom:0;vertical-align:bottom;width:584px;height:84px"><img style="vertical-align:bottom" src="cid:5ed2b7dfeca322e0d1e0b40bd3a0a48d" width="584px" height="84px" alt="Image Alternate Text Here" /></td> <td rowspan="3" style="vertical-align:top;width:10px"><img src="cid:6f108f42f85401cababf9d5dc64fb8f9" width="10px" height="410px" /></td> </tr> <tr> <td style="vertical-align:top;text-align:left;background-color:#FFF;padding:0 50px 40px"> <h1 style="text-align:center;margin-top:15px;font-size:12pt">Header</h1> <p>This is a test email.</p> </td> </tr> <tr> <td colspan="3" style="padding:30px 50px;font-size:8pt;text-align:center;color:#888888;line-height:10pt">Footer text</td> </tr> </table> </body> </html>
EDIT: I did some digging into the source through Firebug, and I think I narrowed it down to a problem with Outlook Web App. In the Inbox view, the message body is encapsulated in an <iframe> , and the content of the HTML message is not changed. However, when viewing the message source in other folders, the <iframe> not used, and the message <body> is converted to OWA <div> . The message then includes styles from the OWA stylesheet, which seem to overwrite the inline style of the HTML email message.
I think we are going to open a ticket with Microsoft.