HTML Email Text Overflowing

Question

and thank you in advance.

When putting together the source coding all seems fine and displays as it should (dreamweaver, browsers, etc.) As soon as the email template gets sent out the text 'spills' out of the div that contains it.

I'd would appreciate any help in the right direction!

Here is the code:

 <!DOCTYPE html><HTML xmlns:o = 
"urn:schemas-microsoft-com:office:office"><HEAD><TITLE>Olympia Moving</TITLE>
<META charset=utf-8>
<STYLE>#content {
    PADDING-LEFT: 10px; WIDTH: 580px; DISPLAY: block;
}
UL {
    LIST-STYLE: circle none inside;
}
P {
    LINE-HEIGHT: 1.25em; MARGIN: 1.25em 0px; FONT-SIZE: 1em;
}
</STYLE>
</HEAD>
<BODY><img id=header 
src="http://olympiarelocationinc.com/mailing/img/img_001.jpg" width=600 
height=248 useMap=#header> 
<DIV id=content>
<P>Dear @@First_Name@@,</P>
<P>I tried reaching you by telephone today, without success, and thought that 
maybe communicating via email would be more convenient for you. <BR><BR>I 
received your contact information from our website, indicating that you are 
currently looking for movers to assist you on @@Move_Date@@. I would love to be 
able to help you out with your upcoming move. <BR><BR>I understand that you will 
be moving from @@PickCityStateZip@@ to @@DelCityStateZip@@. If this is incorrect 
please let me know. <BR><BR>I do have a few additional questions for you prior 
to providing you with an estimate. If you could please answer the following 
questions, it would be greatly appreciated and I will then promptly respond with 
both an estimate and a detailed explanation of all services we will provide for 
you. <BR></P>
<UL>
  <LI>
  <P>How many bedrooms do you currently have? </P>
  <LI>
  <P>Currently, do you live in a home, town house, or an apartment/condo?</P>
  <LI>
  <P>Is there an elevator in either location that you already have or still need 
  to reserve for a specific time? </P>
  <LI>
  <P>Are you going to be moving everything or only specific items? (If specific, 
  please list.) </P>
  <LI>
  <P>Are you going to be doing the packing yourself? </P>
  <LI>
  <P>Are you going to be moving any major appliances and/or heavy items such as 
  pianos, refrigerators, etc…? </P>
  <LI>
  <P>How long would you say the drive from your current location to your new 
  location would take? (Drive time, not distance.) </P></LI></UL><BR>
<P>If you are no longer moving, have chosen another carrier or would like to be 
removed from our database for any other reason please reply to this email with a 
brief explanation in the subject line. <BR><BR>I look forward to speaking with 
you soon and it would be a pleasure to help. I can be reached at the number 
listed below from 9am – 5pm or by email at all times. <BR><BR>On behalf of 
Olympia Moving and Storage we truly appreciate your consideration in our 
company! I hope to hear back from you soon! <BR><BR><BR>Thank You,<BR><BR>
<BR>
@@Signature@@
</DIV><img id=footer 
src="http://olympiarelocationinc.com/mailing/img/img_003.jpg" width=600 
height=87> <MAP name=header><AREA 
  href="https://www.facebook.com/movingcompany" shape=RECT target=_blank 
  coords=387,63,424,99><AREA href="https://twitter.com/OLYMPIAMOVINGIN" 
  shape=RECT target=_blank coords=423,63,468,98><AREA 
  href="http://www.bbb.org/chicago/business-reviews/moving-and-storage-company/olympia-moving-and-storage-in-skokie-il-47000954" 
  shape=RECT target=_blank coords=467,61,543,99><AREA 
  href="http://moveforhunger.org/what-we-do/" shape=RECT target=_blank 
  coords=543,59,592,100></MAP></BODY></HTML>

Something just doesn't add up! When I view the source out of outlook its identical to the original source. GRR!

score 3 · Answer 1 · edited May 23 '17 at 10:25

3

Email plays nicer with tables. Try wrapping everything in a 100% wide table.

Htmls email is very different from the web. Here is some more info on how to design for html email.

edited May 23 '17 at 10:25

Community

1
1

answered Dec 06 '13 at 14:47

John

11,985
3
45
60

Thank you! I re-formatted all my code into table form and now all works great! – user3072312 Dec 06 '13 at 15:09
1

@user3072312 Don't forget to mark the answer as correct. Also if you are summarizing/sharing the final solution based on a correct answer, it is better to edit your question, putting the updated solution at the bottom. – John Dec 06 '13 at 15:23

score 0 · Answer 2 · answered Dec 05 '13 at 22:51

0

Do you have a copy of an email that shows the "spilling"? A view source of the generated email might help us see if something is being introduced during generation that throws the formatting off.

answered Dec 05 '13 at 22:51

Mike Devenney

1,758
1
23
42

Thats the problem -- the source comes out the same. It spills out of the container both in Gmail and in Outlook. Is there possibly something wrong with my CSS for the div? Am I doing something that isnt 'universal'? Thanks! – user3072312 Dec 05 '13 at 22:57

score 0 · Answer 3 · answered Dec 06 '13 at 15:12

All is fixed! I turned everything into table formatting, here is the code:

<!DOCTYPE html><HTML><HEAD>
<STYLE>BODY {
    TEXT-ALIGN: center
}
P {
    TEXT-ALIGN: left
}
</STYLE>
</HEAD>
<BODY>
<TABLE>
  <TBODY>
  <TR>
    <TD style="WIDTH: 600px"><IMG id=header 
      src="http://olympiarelocationinc.com/mailing/img/img_001.jpg" width=600 
      height=248 useMap=#header> </TD></TR>
  <TR>
    <TD style="WIDTH: 600px; HEIGHT: auto">
      <DIV id=content>
      <P>Dear @@First_Name@@,</P><BR>
      <P>I tried reaching you by telephone today, without success, and thought 
      that maybe communicating via email would be more convenient for you. 
      <BR><BR>I received your contact information from our website, indicating 
      that you are currently looking for movers to assist you on @@MoveDate@@. I 
      would love to be able to help you out with your upcoming move. <BR><BR>I 
      understand that you will be moving from @@PickCityStateZip@@ to 
      @@DelCityStateZip@@. If this is incorrect please let me know. <BR><BR>I do 
      have a few additional questions for you prior to providing you with an 
      estimate. If you could please answer the following questions, it would be 
      greatly appreciated and I will then promptly respond with both an estimate 
      and a detailed explanation of all services we will provide for you. 
      <BR></P>
      <UL>
        <LI>
        <P>How many bedrooms do you currently have? </P>
        <LI>
        <P>Currently, do you live in a home, town house, or an 
        apartment/condo?</P>
        <LI>
        <P>Is there an elevator in either location that you already have or 
        still need to reserve for a specific time? </P>
        <LI>
        <P>Are you going to be moving everything or only specific items? (If 
        specific, please list.) </P>
        <LI>
        <P>Are you going to be doing the packing yourself? </P>
        <LI>
        <P>Are you going to be moving any major appliances and/or heavy items 
        such as pianos, refrigerators, etc…? </P>
        <LI>
        <P>How long would you say the drive from your current location to your 
        new location would take? (Drive time, not distance.) </P></LI></UL><BR>
      <P>If you are no longer moving, have chosen another carrier or would like 
      to be removed from our database for any other reason please reply to this 
      email with a brief explanation in the subject line. <BR><BR>I look forward 
      to speaking with you soon and it would be a pleasure to help. I can be 
      reached at the number listed below from 9am – 5pm or by email at all 
      times. <BR><BR>On behalf of Olympia Moving and Storage we truly appreciate 
      your consideration in our company! I hope to hear back from you soon! 
      <BR><BR><BR>Thank You,<BR><BR>@@Signature@@</P></DIV></TD></TR>
  <TR>
    <TD style="WIDTH: 600px"><IMG 
      src="http://olympiarelocationinc.com/mailing/img/img_003.jpg" width=600 
      height=87> </TD></TR></TBODY></TABLE><MAP name=header><AREA 
  href="https://www.facebook.com/movingcompany" shape=RECT target=_blank 
  coords=387,63,424,99><AREA href="https://twitter.com/OLYMPIAMOVINGIN" 
  shape=RECT target=_blank coords=423,63,468,98><AREA 
  href="http://www.bbb.org/chicago/business-reviews/moving-and-storage-company/olympia-moving-and-storage-in-skokie-il-47000954" 
  shape=RECT target=_blank coords=467,61,543,99><AREA 
  href="http://moveforhunger.org/what-we-do/" shape=RECT target=_blank 
  coords=543,59,592,100></MAP></BODY></HTML>

HTML Email Text Overflowing

3 Answers3