2012-12-07 39 views
0

好吧,所以我的问题是我想要两列。我想了解有关当前学校校长和其他人的头衔及其左侧名称的信息,右边是实际的信件。但是,所有人的标题和名称都显示在字母的上方而不是左侧。我想知道是否有人可以查看我的代码并告诉我我错过了什么。我认为这可能是一个愚蠢的语法错误,或者我忘了声明一条线,但我看不到它。HTML和PHP,创建一个包含两列的HTML电子邮件

感谢

如果你在浏览器中加载它
These are the headers: 
$headers .= "MIME-Version: 1.0\r\n"; 
$headers .= "Content-Type: text/html; charset=ISO-8859-1\r\n"; 

And this is the message: 

$message = " 

<HTML> 
<HEAD> 

<STYLE type=\"text/css\"> 
body {margin-top: 0px;margin-left: 0px;} 
#page_1 {position:relative; overflow: hidden;margin: 169px 0px 121px 34px;padding: 0px;border: none;width: 782px;} 
#page_1 #id_1 {float:left;border:none;margin: 98px 0px 0px 0px;padding: 0px;border:none;width: 182px;overflow: hidden;} 
#page_1 #id_2 {float:left;border:none;margin: 0px 0px 0px 0px;padding: 0px;border:none;width: 600px;overflow: hidden;} 
.ft0{font: bold 13px 'Times New Roman';text-decoration: underline;color: #47744c;line-height: 15px;} 
.ft1{font: bold 12px 'Times New Roman';text-decoration: underline;color: #47744c;line-height: 14px;} 
.ft2{font: bold 12px 'Times New Roman';color: #47744c;line-height: 15px;} 
.ft3{font: bold 12px 'Times New Roman';text-decoration: underline;color: #47744c;line-height: 13px;} 
.ft4{font: italic bold 12px 'Times New Roman';color: #47744c;line-height: 14px;} 
.ft5{font: italic bold 12px 'Times New Roman';color: #47744c;line-height: 15px;} 
.ft6{font: 16px 'Times New Roman';line-height: 19px;} 
.ft7{font: italic 12px 'Times New Roman';line-height: 15px;} 
.ft8{font: 15px 'Arial';line-height: 17px;} 

.p0{text-align: left;margin-top: 0px;margin-bottom: 0px;} 
.p1{text-align: left;margin-top: 13px;margin-bottom: 0px;} 
.p2{text-align: left;margin-top: 1px;margin-bottom: 0px;} 
.p3{text-align: left;margin-top: 12px;margin-bottom: 0px;} 
.p4{text-align: left;margin-top: 11px;margin-bottom: 0px;} 
.p5{text-align: left;margin-top: 2px;margin-bottom: 0px;} 
.p6{text-align: left;margin-top: 25px;margin-bottom: 0px;} 
.p7{text-align: left;padding-right: 384px;margin-top: 73px;margin-bottom: 0px;} 
.p8{text-align: left;margin-top: 16px;margin-bottom: 0px;} 
.p9{text-align: left;padding-right: 123px;margin-top: 18px;margin-bottom: 0px;} 
.p10{text-align: left;padding-right: 123px;margin-top: 33px;margin-bottom: 0px;} 
.p11{text-align: left;margin-top: 53px;margin-bottom: 0px;} 
.p12{text-align: left;margin-top: 54px;margin-bottom: 0px;} 
.p13{text-align: left;padding-right: 131px;margin-top: 17px;margin-bottom: 0px;} 
.p14{text-align: left;margin-top: 0px;margin-bottom: 0px;white-space: nowrap;} 
.p15{text-align: left;padding-left: 29px;margin-top: 0px;margin-bottom: 0px;white-space: nowrap;} 

.td0{padding: 0px;margin: 0px;width: 115px;vertical-align: bottom;} 
.td1{padding: 0px;margin: 0px;width: 103px;vertical-align: bottom;} 

.tr0{height: 17px;} 
.tr1{height: 22px;} 

.t0{width: 218px;margin-left: 96px;margin-top: 17px;font: 15px 'Arial';} 

</STYLE> 
</HEAD> 

<BODY> 
<DIV id=\"page_1\"> 


<DIV> 
<DIV id=\"id_1\"> 
<P class=\"p0 ft0\">Board of Trustees</P> 
<P class=\"p1 ft1\">REDACTED</P> 
<P class=\"p6 ft4\">“Nurturing Hearts,</P> 
<P class=\"p2 ft5\">Developing Minds”</P> 
</DIV> 
<DIV id=\"id_2\"> 
<P class=\"p0 ft6\">$today</P> 
<P class=\"p7 ft6\">$title $first_name $last_name<br>$street_address<br>$city, $state $zip</P> 
<P class=\"p8 ft6\">Dear $title $last_name,</P> 
<P class=\"p9 ft6\">We have received your generous donation of $$mathAmt.00, and we are truly grateful. Since its founding in 1970, The School has been fortunate to receive philanthropic support from forward looking people like you who understand and appreciate the unique significance of our school’s mission in our community. Over these past <NOBR>forty-one</NOBR> years, many of our graduates have become respected professionals and leaders in our community, and our school is widely acknowledged as an important education resource in our region.</P> 
<P class=\"p10 ft6\">On behalf of the Board of Trustees, the Faculty, and our Students, who are the ultimate recipients of your generosity, I wish to personally thank you. Your sacrificial donation sends an especially powerful message during theses challenging economic times about your devotion to the school.</P> 
<P class=\"p11 ft6\">Sincerely yours,</P> 
<P class=\"p12 ft6\">James </P> 
<P class=\"p0 ft6\">Headmaster</P> 
<P class=\"p13 ft8\">For tax purposes, School is pleased to provide the following information. No goods or services were rendered in exchange for this contribution. Please retain this letter for income tax purposes. This written acknowledgement of your donation serves as the substantiation required under section 170 of the Internal Revenue Code.</P> 
<TABLE cellpadding=0 cellspacing=0 class=\"t0\"> 
<TR> 
    <TD class=\"tr0 td0\"><P class=\"p14 ft8\">Date of Gift:</P></TD> 
    <TD class=\"tr0 td1\"><P class=\"p15 ft8\">1/19/2012</P></TD> 
</TR> 
<TR> 
    <TD class=\"tr1 td0\"><P class=\"p14 ft8\">Value of Gift*<SPAN class=\"ft6\">:</SPAN></P></TD> 
    <TD class=\"tr1 td1\"><P class=\"p15 ft8\">$$mathAmt.00</P></TD> 
</TR> 
</TABLE> 
</DIV> 
</DIV> 
</DIV> 

</body> 
</HTML> 

"; 

回答

0

您的电子邮件看起来不错,所以我不知道你在做什么错事,除本:

大多数电子邮件客户端不支持基于div的布局或非内联样式。你需要重做你的电子邮件与表格布局和所有你的CSS内联(或通过不赞成的HTML属性声明)。

http://htmlemailboilerplate.com/可能会帮助您处理一些电子邮件特性。

+0

堆栈溢出不会让我编辑帖子只添加一个JSFiddle链接,但你可以在http://jsfiddle.net/Tpf3B/ – greg5green

+0

看到工作电子邮件是的,我注意到它在浏览器中看起来很好,但是我对此很新,所以我想我仍然在搞点东西,哈哈。感谢您的建议,我会尝试。 – Joel

+0

慢慢来吧。与制作“常规”网站相比,编写HTML电子邮件可能相当困难。只要确保你的东西在大的东西上验证(使用不“支持”的属性不是什么大问题,但要确保你的tr和table都是封闭的)。另外,请检查http://premailer.dialect.ca/将您从样式块写入的CSS移动到内联样式中。 – greg5green