HTML Stationery Template in Outlook

Posted on 2006-03-21
Last Modified: 2012-06-22
Here's my template:

Here's what I'm trying to accomplish:

Our sales guys want to have a Visit Report template that they can compose within their e-mail (Outlook).  The first thing I came up with was to create an HTML template as shown above.  

With the template as the body of the e-mail, you can click around in each different 'field' to input data.  However, the only draw back to this design, and I'm not sure if it's a limitation of trying to use HTML in this capacity or not, is that when they're putting in data say in the bottom 3 fields (the ones that are fitted to have the most data), the data doesn't wrap to the next line, but instead continues to expand into the other 2 fields and shrinks them.

If you look at the HTML code, you'll notice fixed width's on the tables and percentage based width's on the table data cells.  I have tried with both fixed width and percentage based table data cells.

Any assistance is greatly appreciated!
Question by:djhath
    LVL 16

    Accepted Solution

    In your HTML, make sure to explicitly specify all your widths to pixels. You can't just have the number only.

    I.E. <table border=0 width="600px">
    <tr><td width="200px">blah</td></tr>

    That should automatically make the widths "stick" and not smush over when you have text.

    You can also use CSS if that doesn't work:

    <table width="600px">
    <td style="word-wrap: break-word">blah blah blah</td>

    LVL 3

    Author Comment

    Tried adding the px...and coding "appropriately" with quotes and it still doesn't work.

    The link has my updated code.

    I don't know CSS, so I'm unfortunately at mercy for trying it.
    LVL 25

    Expert Comment

    you really don't want to use actual pixels in the width attribute of a td tag (it works, but usually only in IE).  Best bet would be to use inline styles, or with a CSS stylesheet.

    instead of:
    <table border=0 width="600px">
    <td width="200px">blah</td>
    <td width="400px">blah</td>

    do it like this:
    <table border=0 style="width:600px;">
    <td style="width:200px">blah</td>
    <td>blah in column 2</td>
    LVL 25

    Expert Comment

    here is a fantastic tutorial, on how to use CSS, as this is the way you really should be doing it

    Write Comment

    Please enter a first name

    Please enter a last name

    We will never share this with anyone.

    Featured Post

    Course: Create Mobile App Prototypes with Adobe XD

    This is a project-based course: we go through all the steps of creating a prototype from start to finish, using all the tools and features currently available in Adobe XD. You can complete the course in less than a day, plus all project files and fonts are included.

    Introduction The Google Maps API offers various ways to draw dynamic and static maps.  Using a combination of PHP and JavaScript, you can draw active JavaScript maps that allow pan-and-zoom in the client browser window.  You can also draw "static" …
    Both Easy and Powerful How easy is PHP? (  Very easy.  It has been described as "a programming language even my grandmother can use." How powerful is PHP?  http://en.wikiped…
    In this tutorial viewers will learn how to embed videos in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <video> tag to insert a video. Define the src as the URL of your video; this is similar to …
    The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…

    737 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

    20 Experts available now in Live!

    Get 1:1 Help Now