locked
Generating a HTML CSS Email Message from a windows console application - Rendering in Outlook 2019 RRS feed

  • Question

  • When I generate an HTML email and render it in an outlook message all fonts become very small, no matter the size I set for the font or the width of the columns.  When I view the same HTML inside of browsers it renders correctly.  What considerations do I need to be aware of for generating the HTML to render in Outlook 2019?  Are there any other resources on the web that describe this. 
    Monday, September 30, 2019 2:10 PM

All replies

  • Please supply a sample of the CSS and how it's being used.

    Seems like you might be using <font size="10"> while as things become less rigid seems like a better idea is to use font-size: ??? where ??? is xx-small, x-small, small, medium, large, x-large, xx-large, -webkiut-xxx-large. 

    You can use rem, em, px

    To try out different units see the following https://codepen.io/tutsplus/pen/bdxWbB

    Note Font is deprecated


    Please remember to mark the replies as answers if they help and unmarked them if they provide no help, this will help others who are looking for solutions to the same or similar problem. Contact via my Twitter (Karen Payne) or Facebook (Karen Payne) via my MSDN profile but will not answer coding question on either.

    NuGet BaseConnectionLibrary for database connections.

    StackOverFlow
    profile for Karen Payne on Stack Exchange


    Monday, September 30, 2019 6:37 PM
  • You need to use inline CSS for it to render correctly.  Example:

    <div style="font-size: 10pt; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;">
    I usually create email HTML with MS Expression Web 4 (free).  You can set it up to create CSS inline. 



    • Edited by mogulman52 Tuesday, October 1, 2019 1:03 AM
    Tuesday, October 1, 2019 12:45 AM
  • Hi DoubleRoze, 

    Thank you for posting here.

    According to your description, I hope the following reference can help you.

    1. HTML looks different in Browser and in Outlook
    2. 19 Big Differences Between Email and Web HTML

    Note: This response contains a reference to a third party World Wide Web site. Microsoft is providing this information as a convenience to you. Microsoft does not control these sites and has not tested any software or information found on these sites; Therefore, Microsoft cannot make any representations regarding the quality, safety, or suitability of any software or information found there. There are inherent dangers in the use of any software found on the Internet, and Microsoft cautions you to make sure that you completely understand the risk before retrieving any software from the Internet.

    Best Regards,

    Xingyu Zhao


    MSDN Community Support
    Please remember to click "Mark as Answer" the responses that resolved your issue, and to click "Unmark as Answer" if not. This can be beneficial to other community members reading this thread. If you have any compliments or complaints to MSDN Support, feel free to contact MSDNFSF@microsoft.com.

    Tuesday, October 1, 2019 7:58 AM
  • There is a lot of HTML that the Outlook client does not render properly. Tables come to mind.

    As for the font size are you using a relative or absolute font? In general you should set a base size in the body and then use relative after that. Note also that your CSS may just be wrong. Look at the page in all the different browsers. Some browsers will either allow invalid CSS (for a variety of reasons), use defaults that line up with what you expect or interpret things differently than Outlook's impl which is probably using the IE 11 engine under the hood. For example you mentioned column widths. This is generally outside the control of the page without relative, scaled sizing. However it used to be supported via CSS so lots of pages used it. However it was never standards compliant so more strict browsers don't anymore. 

    I would strongly recommend that you test your HTML in all the different browsers to ensure it renders correctly. Also run a linter to make sure your CSS/HTML is actually valid HTML5/CSS3. 


    Michael Taylor http://www.michaeltaylorp3.net

    Tuesday, October 1, 2019 1:48 PM