• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 840
  • Last Modified:

HTML Stationery Template in Outlook

Here's my template:

http://www.hathinc.com/sales2.html

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!
0
djhath
Asked:
djhath
  • 2
1 Solution
 
ThinkPaperCommented:
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>
</table>

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">
<tr>
<td style="word-wrap: break-word">blah blah blah</td>
</tr>
</table>

0
 
djhathAuthor Commented:
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.
0
 
kevp75Commented:
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">
<tr>
<td width="200px">blah</td>
<td width="400px">blah</td>
</tr>
</table>

do it like this:
<table border=0 style="width:600px;">
<tr>
<td style="width:200px">blah</td>
<td>blah in column 2</td>
</tr>
</table>
0
 
kevp75Commented:
here is a fantastic tutorial, on how to use CSS, as this is the way you really should be doing it
http://www.w3schools.com/css/default.asp
0

Featured Post

Hire Technology Freelancers with Gigs

Work with freelancers specializing in everything from database administration to programming, who have proven themselves as experts in their field. Hire the best, collaborate easily, pay securely, and get projects done right.

  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now