PHPMailer HTML, CSS Formatting

Question

I am currently having Issues with PHPMailer and CSS Formatting with HTML

<META HTTP-EQUIV='Content-Type' CONTENT='text/html;charset=iso-8859-1'>
<!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN' 'http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd'>
<html xmlns='http://www.w3.org/1999/xhtml'>
<head>
<style type='text/css'>
<!--
body[yahoo] {-webkit-text-size-adjust:none;width: 100%; background-color: #e3e3e3; margin:0; padding:0; -webkit-font-smoothing: antialiased;}
.ReadMsgBody {width: 100%; background-color: #e3e3e3;}
.ExternalClass {width: 100%; background-color: #e3e3e3;}
html {width: 100%; }
body[yahoo] table {border-collapse: collapse;}
body[yahoo] .btn {width:100%; text-align: center!important;}
body[yahoo] .farm-row{ font-family:Arial, sans-serif; font-size:12px; padding: 3px; color:#333333}
body[yahoo] .top10-img-Width {width:290px!important; text-align:center}
span.mainmessage {font-size:34px;text-decoration:none;font-family:Arial,sans-serif;line-height:1; color:#FF9900; font-weight:500}
body[yahoo] .image-csslot-normal img {width: 100% !important; height: auto !important;}
a:link, a:visited {color: #336699;}
body[yahoo] td[class='lcol'] img {width: 175px !important; height: 175px !important;}
body[yahoo] .sef_legal_footer {background-color: #E3E3E3;}
body[yahoo] .sef_footer_connect {border-bottom: 3px solid #888888; height: 0px !important; max-height: 0px !important; font-size:0px; margin: 0; width: 100%;}
body[yahoo] .sef_spacer div {background-image: url('http://danaserver.net/img/section-div_640x8.jpg') !important; background-color: #FFFFFF; height: 10px !important; background-repeat: no-repeat;}
@media only screen and (max-width: 680px)  {
body[yahoo] .deviceWidth {width:100%!important}
body[yahoo] td[class='col'] a img {width: 100% !important; max-width: 60px !important; height: auto !important; min-width: 41px !important;}
td[class='col'] {width: 30% !important; max-width: 60px !important;}
body[yahoo] .farmLinks {width: auto !important; text-align: left !important;}
body[yahoo] .farmLinks td {text-align: left !important;}
body[yahoo] td[class='farmContainer'] {width: 50% !important; text-align: left !important;}
body[yahoo] .sef_footer_linkfarm td {width: auto !important;}
body[yahoo] .sef_footer_linkfarm table {width: 100% !important;}
body[yahoo] .sef_legal_footer, body[yahoo] .sef_spacer, body[yahoo] .sef_footer_connect, body[yahoo] .sef_legal_footer, body[yahoo] .sef_footer_linkfarm {width: 100% !important;}
body[yahoo] .sef_footer_linkfarm tr:last-child td, body[yahoo] .sef_footer_linkfarm tr:first-child td {width: 100%;}
body[yahoo] .sef_footer_linkfarm tr td table {width: 100%;}
body[yahoo] .btn {width:100% !important; text-align: center!important;}
body[yahoo] td[class='x-site-tablet'] {display:none !important;}
body[yahoo] .seperator {width: 100% !important;}
body[yahoo] .seperator img {width: 100% !important; height: auto;}
}

@media only screen and (max-width: 599px)  {
body[yahoo] .top10-img-Width {width:440px!important; text-align:center}
body[yahoo] .center {text-align: center!important;}
body[yahoo] .footerLinks {width:32%; margin-bottom:40px}
body[yahoo] td[class='lcol'], body[yahoo] td[class='rcol'] {display: inline-block !important; display: inline-block; width: 100% !important; float: none !important; overflow: visible !important; max-height:none !important; padding:0px !important;}
body[yahoo] .farmLinks {min-width: 148px !important;}
body[yahoo] .farmBottom {width:100%!important}
body[yahoo] td[class='pe_asin'] {padding:4px 15px 4px 15px !important;}
}

@media only screen and (max-width: 515px) {
body[yahoo] .logoTop {width:100%!important}
body[yahoo] .top10-img-Width {width:290px!important; text-align:center}
body[yahoo] .center {text-align: center!important;}
body[yahoo] .footerLinks { width:32%; margin-bottom:40px}
body[yahoo] .btn {width:100%; text-align: center!important;}
body[yahoo] td[class='x-site'], body[yahoo] .x-site {display: none;}
body[yahoo] .sef_footer_linkfarm { display: none !important; }
body[yahoo] .sef_spacer { display: none !important; }
body[yahoo] .sef_footer_connect { width: 100% !important; }
body[yahoo] .sef_legal_footer { width: 100% !important; }
body[yahoo] .logoTop .center a {text-decoration: none !important;}
body[yahoo] .logoTop td {padding:right: 0px !important;}
body[yahoo] .amazonLogo {padding:0 10px !important;}
body[yahoo] .topMenu {padding:0 0 5px 0 !important;}
body[yahoo] .header-csslot {text-align:center !important;}
body[yahoo] .header-csslot table {width: 100%;}
}
-->
</style> 
</head>
<body style='background-color: #e3e3e3' yahoo='fix'>
<!-- Wrapper -->
<table width='100%' border='0' cellpadding='10' cellspacing='0'  style='background-color: #e3e3e3' yahoo='fix'> <tr><td valign='middle'>

<!-- site-wide slot -->
<table width='640' border='0' align='center' cellpadding='0' cellspacing='0' class='deviceWidth'>
    <tr>
        <td style='padding:0 0 10px 0; font-size:0; height:0;' class='x-site' valign='bottom'> <table cellspacing='0' cellpadding='0' border='0'> <tr><td><span style='font-family:verdana,arial,sans-serif;font-size:9px;line-height:11px;color:#555;'> </span>
        </td>
    </tr>
</table>
</td>
<td align='right' class='header-csslot'>
</td>
</tr>
</table>
<table width='640' height='6' border='0' align='center' cellpadding='0' cellspacing='0' bgcolor='#A70000' class='deviceWidth'>
    <tr>
        <td width='100%' bgcolor='#A70000' align='center'><p style='border-bottom: 6px solid #A70000; height: 0px !important; max-height: 0px !important; font-size:0px; margin: 0;' width='100%'>&nbsp;</p>
        </td>
    </tr>
</table>
<table width='640' height='5px' border='0' cellpadding='0' cellspacing='0' align='center' class='deviceWidth'>
    <tr>
        <td>
        </td>
    </tr>
    <tr>
        <td width='100%' valign='middle' bgcolor='#ffffff'>
                

<table width='640' cellspacing='0' cellpadding='0' border='0' bgcolor='#333333' align='center' class='deviceWidth'> <tbody><tr> <td> 
    <table bgcolor='#FFFFFF' border='0' cellpadding='0' cellspacing='0' class='logoTop' align='left'>
        <tbody>
            <tr bgcolor='#333333'>
                <td class='center'>
                    <a href='http://www.danaserver.net'>
                        <img src='http://danaserver.net/img/logo.png' alt='danaserver.net' border='0' hspace='6' vspace='6'>
                    </a>
                </td>
            </tr>
        </tbody>
    </table>

<table class='logoTop ' border='0' cellpadding='10' cellspacing='0' align='right'>
    <tbody>
        <tr>
            <td align='right' class='topMenu'>&nbsp;</td>
        </tr>
    </tbody></table>  
</td></tr></tbody></table>
<!-- End Nav -->

</td>
</tr>
</table>

<table width='640' class='deviceWidth' border='0' cellspacing='0' cellpadding='0' align='center' bgcolor='#FFFFFF'>
    <tr>
        <td align='center'><img src='http://danaserver.net/img/section-div_640x8.jpg' alt='= = = = = = = = = = = = = = = = = = = = ' border='0' align='middle' class='deviceWidth' style='bicubic; max-width:640px; max-height:8px; color:#CCCCCC; line-height:1px'/>
        </td>
    </tr>
</table>

<table width='640' border='0' cellpadding='0' cellspacing='0' align='center' class='deviceWidth'>
<tr>
    <td>
    </td>
</tr>
<tr>
<td width='100%' valign='middle' bgcolor='#ffffff'>
</td>
</tr>
</table>

<table width='640' border='0' cellpadding='0' cellspacing='0' align='center' class='deviceWidth'>
    <tr>
        <td>
        </td>
    </tr>
    <tr>
        <td width='100%' valign='middle' bgcolor='#ffffff'>
        </td>
    </tr>
</table>
<!-- content start -->

<table width='640' cellspacing='0' cellpadding='15' border='0' bgcolor='#FFFFFF' align='center' class='deviceWidth'>
    <tbody>
        <tr>
            <td style='font-size: 12px; color: #333333; font-weight: normal; text-align: left; font-family: Arial, sans-serif; line-height: 16px; vertical-align: top; padding:6px 15px 12px 15px;'>
                <span style='text-decoration: none; color: #303942; font-size: 14px; color: #303942; font-weight: bold;'>
                    EMAIL_USER,
                </span><br>
                	Welcome to DanaServer.net<br>
                    Please complete your Registration below
            </td>
        </tr>
    </tbody>
</table>

<table width='640' class='deviceWidth' border='0' cellspacing='0' cellpadding='0' align='center' bgcolor='#FFFFFF'>
    <tr>
        <td align='center'><img src='http://danaserver.net/img/section-div_640x8.jpg' alt='= = = = = = = = = = = = = = = = = = = = ' border='0' align='middle' class='deviceWidth' style='bicubic; max-width:640px; max-height:8px; color:#CCCCCC; line-height:1px'/>
        </td>
    </tr>
</table>

<table width='640' cellspacing='0' cellpadding='0' border='0' align='center' style='vertical-align:central' class='deviceWidth'>
    <tbody>
        <tr>
            <td width='28%' valign='middle' bgcolor='#ffffff' align='left' style='padding:6px 0' class='lcol'> <table width='100%' cellspacing='0' cellpadding='0' border='0' bgcolor='#ffffff'>
            <img src='' alt='Avatar' border='0' width="175" height="175" class="pr_image_175 pr_image_desktop"'/>	
</table>           
<td width='72%' valign='middle' bgcolor='#ffffff' align='right' style='padding:6px 0' class='rcol'>
    <table width='95%' cellspacing='0' cellpadding='0' border='0' bgcolor='#ffffff'>
        <tbody>
            <tr>
                <td valign='middle' align='left' class='pe_asin' style='font-size: 14px; color: #333333; font-weight: normal; text-align: left; font-family:Arial, sans-serif; line-height: 14px; vertical-align: middle; padding:4px 15px 4px 0'>
                    <table width='92%' cellspacing='0' cellpadding='0' border='0'>
                        <tbody>                    
                        <tr class='pr_description'>
                            <td width="96" align='right'>Username: <br />E-Mail: <br /><br /><br /><br /><br /><span style='font-family: Arial,Helvetica,sans-serif; text-decoration:none; font-weight:normal; color:#555555; font-size:12px;text-align:left;'></span>
                            
                            </td>
                            <td width="263" align='left' valign="top">&nbsp &nbsp &nbsp Test<br />&nbsp &nbsp &nbsp Test</td>
                        </tr>
                        
      <tr class='spacer'>
        <td height='10' colspan="2"><div width='1' class='spacer' style='font-size:8px;line-height:8px;'>&nbsp;</div>
        </td>
      </tr>
      
      <tr class='pr_byline'>
        <td colspan="2">
            <table cellspacing='0' cellpadding='0' border='0' height='34' class='btn' width='89%' style='margin-left:15px;'>
                <tbody>
                    <tr>
                        <td width="177" height='34' align='center' valign='middle' style='background-color:#A70000;border-radius:5px;font-family:Arial, sans-serif;font-size:14px;font-weight:bold;'>
                            <div align="center"><a href='' style='display:block;text-decoration:none;color:#303942;white-space:nowrap;padding:10px;'  >Confirm Registration</a></div>
                        </td>
                        
                        <td width='43' style='margin-right:10px;'>&nbsp;
                        </td>
                        
                        <td valign='middle' align='left' style='background-color:#e7e7c2;border-radius:5px;font-family:Arial, sans-serif;font-size:12px;font-weight:bold;'width='175';> <a href='' style='display: block; text-decoration: none; color: rgb(47, 47, 121); white-space: nowrap; padding: 7px; font-size: 14px;' align='center'  >Cancel Registration</a>
                        </td>
                    </tr>
                </tbody>
            </table>
        </td>
    </tr> 
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>

<table width='640' cellspacing='0' cellpadding='0' border='0' bgcolor='#FFFFFF' align='center' class='deviceWidth'>
    <tbody>
        <tr>
            <td align='center'><img src='http://danaserver.net/img/section-div_640x8.jpg' alt='= = = = = = = = = = = = = = = = = = = = ' border='0' align='middle' class='deviceWidth' style='bicubic; max-width:640px; max-height:8px; color:#CCCCCC; line-height:1px'/>
            </td>
        </tr>
    </tbody>
    <td><style type='text/css'>
    .sef_footer_connect .yshortcuts { color:#FFFFFF }
      </style>

    <table class='sef_footer_connect' bgcolor='#FFFFFF' border='0' cellpadding='10' cellspacing='0' width='640' align='center' style='border-bottom:3px solid #666666'>
        <tbody>
            <tr>
              <td bgcolor='#FFFFFF' valign='top' align='left'><font style='font-family: verdana,arial,sans-serif; font-size: 10px; color: #999;' color='#999' face='verdana,arial,sans-serif' size='1'><a href='' target='_blank'><img src='' alt='image' border='0' hspace='5'  align='left'></a></font>
                <table border='0' cellpadding='0' cellspacing='5' align='right'>
                <tbody>
                  <tr>
                    <td align='right'><font style='font-family: verdana,arial,sans-serif; font-size: 10px; color: #666; line-height:10px' color='#999' face='verdana,arial,sans-serif' size='1'>Follow Us</font><font style='font-family: verdana,arial,sans-serif; font-size: 10px; color: #666; line-height:10px' color='#999' face='verdana,arial,sans-serif' size='1'> <br>
                    under</font></td>
                            <td width='4'>&nbsp;</td>
                    <td><font style='font-family: verdana,arial,sans-serif; font-size: 10px; color: #999;' color='#999' face='verdana,arial,sans-serif' size='1'>
<a href='Facebook Shortcut' target='_blank'><img src='http://www.danaserver.net/img/FBlogo.gif' alt='image' border='0' height='30' hspace='0' vspace='0' width='30'></a></font></td>
                  </tr>
                </tbody>
              </table></td>
            </tr>
          </tbody></table>

<table width='640' border='0' cellpadding='2' cellspacing='0' class='sef_legal_footer' style='background-color:#e3e3e3' bgcolor='#e3e3e3' >
    <tr height='10'>
      <td width='100%'><div width='100%' style='font-size:10px; line-height:10px'>&nbsp;</div></td>
    </tr>
    
    <tr>
      <td align='left' style='font-family: Arial,Helvetica,Sans-Serif; font-size: 10px; color: #666'>
        <p>Under &quot;Edit&quot; within your Account you are able to choose the desired E-Mail Format: HTML or Plain-Text.<br /><br />
          Please do not reply to this E-Mail. In case you want to contact us please use the <a href='Contact Form' style='font-family: Arial,Helvetica,Sans-Serif; font-size: 10px; color: #bfbfbf'>Kontaktformular</a>.
          <br /><br />
          Alle Preise beinhalten die deutsche Mehrwertsteuer ausgenommen digitale Downloads, für welche die luxemburgische MwSt. Anwendung findet. Die in Ihrem Land geltenden Steuersätze finden sie <a href='Info'>hier</a>.
          <br /><br />
          To Unsubsribe please use one of the following Methods:<br>
          - Use the Link &lt;&gt; to unsubscribe<br>
          - Unsubscribe within your Account &quot;Edit&quot; Section
          <br />
        </p>
      </td>
    </tr>
  </tbody>
</table>

            </td>
</table></td> </tr> <tr height='15' class='spacer'><td>&nbsp;</td></tr>
      
</table><!-- content end -->
<!-- Farm Link Start -->
<!--Store footer for the email  -->

<table class='cs-slot deviceWidth' cellspacing='0' cellpadding='0' border='0' align='center' bgcolor='#ffffff' width='640'> <tr></tr> </table> <!-- Farm Link End --> </td> </tr> </table> <img src='' /></body> </html>

Always when I try to implement this code into the body tag I get a Syntax Error and it doesn't send anything at all.

IsHTML is True Furthermore viewing it in a regular Browser is no Problem. I am assuming everything is inline.

I apologize for the bunch of Code as I am unsure which Part of the Code may be important.

Could you kindly help me I am starting to get desperate here. Thank you all in advance :)

Not sure about the exact problem, but usually adding a style tag in a the html header doesn't work for emails. You need to put the styles inline for each element. — ventayol
– ventayol, Commented Jun 24, 2014 at 22:50
Also, don't pt any HTML above the doctype. Move that meta element inside the <head> section. — ralph.m
– ralph.m, Commented Jun 24, 2014 at 22:52
ralph.m it seems you were right. I changed the Order and it kinda solved the problem :) — Richard Dana
– Richard Dana, Commented Jun 25, 2014 at 19:39

Derek Carlson · Accepted Answer · 2014-06-24 22:49:46Z

3

You appear to have a backtick "`" starting right after the HTML comment after the opening style tag, which does not close until after the ending HTML tag. I would suggest first removing those and trying again. Otherwise, please include the syntax error you are receiving.

answered Jun 24, 2014 at 22:49

Derek Carlson

516 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Richard Dana Over a year ago

Hi User, the backtick is the failed attempt to insert the code here on the page ^^ sry for that I'll edit that. Unfortunately I dont have access to the files just now. Ill defintely edit the HTML Tag it does seem misplaced and then Ill add the Syntax Error I get. Would it be better to discard the yahoo css? I dont assume that it is used very much anymore?

Richard Dana Over a year ago

I just checked, I don't seem to receive an error when running it in a regular browser. danaserver.net/Registration_Mail.html Trying to include it into the Body of the PHPMail it produces a Syntax Error (using Dreamweaver CS6.0) but doesn't specify what exactly

Collectives™ on Stack Overflow

PHPMailer HTML, CSS Formatting

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related