July 7, 201115 yr Hiya, I've had to re-register as my account went awol when I changed email address (aka Giraffic) I have designed another email template, which is fine in all browsers (haven't tested from Outlook as yet as client has a different version to me) I've have 8 errors when running through W3C validator, which I believe are all related to my table nesting skills I have tried to correct these but when I do it's not displaying correctly in a browser... Could anyone please point me in the right direction as to what I am doing wrong and why? Link to the template: Email Template Code below, feedback appreciated :-) <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Email from The Rapport Store</title> <style type="text/css"> body, table, td, img { margin: 0 auto; } .ReadMsgBody { width: 100%;} .ExternalClass {width: 100%;} .menu .yshortcuts {color:#9c180c !important;} .intro .yshortcuts {color:#9c180c !important;} .footer .yshortcuts {color:#9c180c !important;} .menu a:visited, .menu a:link, .menu a:hover {color:#FFFFFF !important;} .yshortcuts {border-bottom:0 !important;} #outlook a { padding: 0; } body { width:100% !important; } body { -webkit-text-size-adjust: none; -ms-text-size-adjust: none; } img { line-height:100%; outline: none; text-decoration: none; } table, td { border-collapse: collapse; page-break-before: avoid; page-break-after: avoid; page-break-inside: avoid; } </style> </head> <body> <table width="100%" cellpadding="10" cellspacing="0" border="0" style="background-color: #9c180c;"> <tr> <td> <table border="0" cellpadding="0" cellspacing="0" width="600" style="margin: 0 auto;"> <tr> <td align="left" width="600" bgcolor="fefefe" colspan="2" valign="bottom" style="line-height: 0%; a:link-color: #9c180c !important; a:link-decoration: none !important; color: #2d302f; background-color: #fefefe;"><img alt="Email from Clare Jones Morgan of The Rapport Store Limited" src="http://www.giraffical.co.uk/clients/rapportstore/images/hdr.gif" style="color: #2d302f; background-color: #fefefe; font-size: 12px; font-family: verdana, arial, sans-serif; border: 0px !important; display: block; line-height: 0%; vertical-align: bottom;" align="left" width="600" height="10"> <tr> <td align="left" width="430" bgcolor="fefefe" valign="top" style="line-height: 0%; color: #2d302f;"><a href="http://rapportstore.co.uk" target="_blank" title="The Rapport Store Limited"><img src="http://giraffical.co.uk/clients/rapportstore/images/logo.gif" border="0" alt="Rapport Store Logo" width="375" height="116" style="padding-left: 10px;"></a><br><br> <span style="font-family: verdana, arial, sans-serif; color: #2d302f; font-size: 13px; font-weight: bold; padding-left: 8px; padding-bottom: 0px;">Improving individual and organisational effectiveness</span><br> </td> <td align="right" width="170" bgcolor="fefefe" valign="top" style="line-height: 0%; padding-right: 8px; color: #2d302f;"><span style="font-family: verdana, arial, sans-serif; font-size: 10px; font-weight: normal; text-align: right; color: #2do32f; line-height: 140%;">email: </span> <a href="mailto:info@rapportstore.co.uk" title="email us" target="_blank" style="font-family: verdana, arial, sans-serif; font-size: 9px; font-weight: normal; text-align: right; line-height: 140%; color: #9c180c;">info@rapportstore.co.uk</a><br> <span style="font-family: verdana, arial, sans-serif; font-size: 10px; font-weight: normal; text-align: right; color: #2do32f; line-height: 140%;">web: </span><a href="http://rapportstore.co.uk"target="_blank" title="Visit our website" style="font-family: verdana, arial, sans-serif; font-size: 9px; font-weight: normal; text-align: right; line-height: 140%; color: #9c180c;">www.rapportstore.co.uk</a><br><br> <span style="font-family: verdana, arial, sans-serif; font-size: 10px; font-weight: normal; text-align: right; color: #2do32f; line-height: 140%;"><br>tel: 01562 547545<br><br> 24 Neville Avenue<br> Kidderminster<br> Worcestershire<br> DY11 7AL</span> </td></tr></td></tr> <table border="0" cellpadding="0" cellspacing="0" width="600" style="margin: 0 auto;"> <td align="left" width="600" colspan="6" valign="bottom" style="background-color: #fefefe; color: #2d302f; line-height: 0%; a:link-color: #9c180c !important; a:link-decoration: none !important;"><img alt="Spacer Image" src="http://www.giraffical.co.uk/clients/rapportstore/images/spacers.gif" style="border-collapse: collapse; color: #fefefe; background-color: #fefefe; font-size: 8px; font-family: verdana, arial, sans-serif; border: 0px !important;" align="left" width="600"><tr style="line-height: 0%;"><td></td></tr> <tr> <td width="5" bgcolor="fefefe" style="line-height: 0%;"></td> <td width="410" style="width: 410px; line-height: 0%; a:link-color: #9c180c !important; a:link-decoration: none !important; color: #2d032f; background-color: #ffffff; font-size: 12px; font-family: verdana, arial, sans-serif; padding-left: 0px; padding-right: 0px; text-align: left;"></td> <td width="5" bgcolor="fefefe" style="line-height: 0%;"></td> <td width="5" bgcolor="000000" style="line-height: 0%; padding: 0px; border-spacing: 0px;"></td> <td width="170" style="padding: 0px; border-spacing: 0px; width: 170px; line-height: 160%; a:link-color: #fefefe !important; a:link-decoration: none !important; color: #fefefe; background-color: #000000; font-size: 11px; font-family: verdana, arial, sans-serif; margin-left: 0px; padding-left: 0px; padding-right: 0px; padding-top: 10px; padding-bottom: 10px; text-align: left;"> <br> <a href="http://www.facebook.com/rapportstore" target="_blank" title="Join us on Facebook"><img src="http://www.giraffical.co.uk/clients/rapportstore/images/fb.gif" alt="Facebook" width="25" height="25" border="0" align="left" style="border: 0px !important;"></a> <a href="http://www.facebook.com/rapportstore" target="_blank" title="Join us on Facebook" style="font-size: 11px; font-family: verdana, arial, sans-serif; color: #fefefe; padding: 10px; text-decoration: none;">Join us on Facebook</a><br><br> <a href="http://www.twitter.com/ccjrapport" target="_blank" title="Follow us on Twitter"><img src="http://www.giraffical.co.uk/clients/rapportstore/images/twitter.gif" alt="Twitter" width="25" height="25" border="0" align="left" style="border: 0px !important;"></a> <a href="http://www.twitter.com/ccjrapport" target="_blank" title="Follow us on Twitter" style="font-size: 11px; font-family: verdana, arial, sans-serif; color: #fefefe; padding: 10px; text-decoration: none;">Follow on Twitter</a><br><br> <a href="http://www.linkedin.com/pub/clare-jones/16/8b5/18b" target="_blank" title="Connect on Linked In"><img src="http://www.giraffical.co.uk/clients/rapportstore/images/in.gif" alt="LinkedIn" width="26" height="25" border="0" align="left" style="border: 0px !important;"></a> <a href="http://www.linkedin.com/pub/clare-jones/16/8b5/18b" target="_blank" title="Connect on Linked In" style="font-size: 11px; font-family: verdana, arial, sans-serif; color: #fefefe; padding: 10px; text-decoration: none;">Connect on LinkedIn</a><br><br> <hr> <br><a href="http://rapportstore.us2.list-manage.com/subscribe?u=7cd67a639c32ae0625001a5d3&id=dd0c1a670c" target="_blank" title="Subscribe to our newsletter"><img src="http://www.giraffical.co.uk/clients/rapportstore/images/rs-icon.gif" alt="RapportStore_Icon" width="35" height="43" border="0" align="left" style="border: 0px !important;"></a> <a href="http://rapportstore.us2.list-manage.com/subscribe?u=7cd67a639c32ae0625001a5d3&id=dd0c1a670c" target="_blank" title="Subscribe to our newsletter" style="font-size: 10px; font-family: verdana, arial, sans-serif; color: #fefefe; padding: 5px; text-decoration: none;">Subscribe to our <span style="padding-left: 5px;">newsletter</span></a><br><br> <a href="http://rapportstore.co.uk/hr-health-check.html" target="_blank" title="Download our Employer's Challenge"><img src="http://www.giraffical.co.uk/clients/rapportstore/images/rs-icon.gif" alt="RapportStore_Icon" width="35" height="43" border="0" align="left" style="border: 0px !important;"></a> <a href="http://rapportstore.co.uk/hr-health-check.html" target="_blank" title="Download our Employer's Challenge" style="font-size: 10px; font-family: verdana, arial, sans-serif; color: #fefefe; padding: 5px; text-decoration: none;">Download our free <span style="padding-left: 5px;">Employer's Challenge</span></a><br><br> <br> <hr> <br><span style="line-height: 120%;">We love to work hands on with our clients and deliver personable and bespoke solutions for people management and development.</span> <a href="http://rapportstore.co.uk/about.html" target="_blank" title="Read More" style="font-size: 11px; font-family: verdana, arial, sans-serif; color: #fefefe; text-decoration: underline;">Read more</a><br> <br><hr><br> <span style="line-height: 120%;">The Rapport Store provides:</span> <ul style="padding-left: 15px;"> <li>Human Resources <li>Coach-Mentoring <li>Recruitment and Selection <li>Training and Development <li>Outplacement Provision</ul> <span style="line-height: 120%;">To see our full service offering, please visit <a href="http://rapportstore.co.uk/services.html" target="_blank" title="Our Services" style="font-size: 11px; font-family: verdana, arial, sans-serif; color: #fefefe; text-decoration: underline;">www.rapportstore.co.uk</a>.</span><br> <br><hr><br> <a href="http://www.giraffical.co.uk/clients/rapportstore/redirect_giraffical.php" target="_blank" title="Giraffical Creative Design"><img src="http://www.giraffical.co.uk/clients/rapportstore/images/giraffical-icon.gif" alt="Giraffical_Icon" width="26" height="26" border="0" align="left" style="border: 0px !important;"></a> <a href="http://www.giraffical.co.uk/clients/rapportstore/redirect_giraffical.php" target="_blank" title="Giraffical Creative Design" style="font-size: 10px; font-family: verdana, arial, sans-serif; color: #fefefe; padding: 5px; text-decoration: none;line-height: 120%;">Enchanting email<br><span style="padding-left: 5px;">designed by </span><span style="color: #f1058a; text-decoration: underline;">Giraffical</span></a><br><br> <td width="5" bgcolor="000000" style="padding: 0px; border-spacing: 0px; line-height: 0%;"></td> <tr style="line-height: 0%;"> <td width="600" bgcolor="fefefe" colspan="6" style="padding: 0px; border-spacing: 0px; color: #9c180c; line-height: 100%; a:link-color: #2d302f !important; a:link-decoration: none !important;"><img alt="Spacer Image" src="http://www.giraffical.co.uk/clients/rapportstore/images/spacers.gif" style="border-collapse: collapse; color: #fefefe; background-color: #fefefe; font-size: 8px; font-family: verdana, arial, sans-serif; border: 0px !important;" align="left" width="600"> <img src="http://giraffical.co.uk/clients/rapportstore/images/certifications.gif" alt="Our certifications" border="0"> <span style="font-family: verdana, arial, sans-serif; color: #2d302f; font-size: 10px; padding-left: 5px;">© Copyright 2011 <a href="http://rapportstore.co.uk" target="_blank" title="The Rapport Store Limited" style="font-family: verdana, arial, sans-serif; color: #9c180c; font-size: 10px; text-decoration: underline;">The Rapport Store Limited</a> Co. Reg: 07015075 VAT Reg: 983215313<br><span style="padding-left: 70px; line-height: 200%;">Registered Office: 24 Neville Avenue, Kidderminster, Worcestershire, DY11 7AL<br></span></span> <img src="http://giraffical.co.uk/clients/rapportstore/images/footer.gif" alt="Footer Image" width="600" style="display: block; width: 600px; height: 10px; background-color: #fefefe;"></td></tr> </table> </td> </tr> </table> </td> </tr> </table> </body> </html>
July 7, 201115 yr Author Oh and these are the errors reported: Error Line 70, Column 15: end tag for "TABLE" omitted, but its declaration does not permit this </td></tr></td></tr> ✉ Info Line 57, Column 1: start tag was here <table border="0" cellpadding="0" cellspacing="0" width="600" style="margin: 0 … Error Line 72, Column 86: document type does not allow element "TABLE" here …border="0" cellpadding="0" cellspacing="0" width="600" style="margin: 0 auto;"> ✉ Error Line 73, Column 195: start tag for "TR" omitted, but its declaration does not permit this …; a:link-decoration: none !important;"><img alt="Spacer Image" src="http://www… ✉ Error Line 115, Column 5: end tag for element "TD" which is not open </td> ✉ Error Line 116, Column 5: end tag for element "TR" which is not open </tr> ✉ Error Line 118, Column 5: end tag for element "TD" which is not open </td> ✉ Error Line 119, Column 5: end tag for element "TR" which is not open </tr> ✉ Error Line 120, Column 8: end tag for element "TABLE" which is not open </table> ✉ Edited July 7, 201115 yr by arsix
July 7, 201115 yr It might be worth you having a look at W3CScools - Tables, which will explain table layout for - basically ... <table border="1"> <tr> <td>row 1, cell 1</td> <td>row 1, cell 2</td> </tr> <tr> <td>row 2, cell 1</td> <td>row 2, cell 2</td> </tr> </table> I would also look at styling your tr, td etc in the CSS to help clean up your code
July 8, 201115 yr Your missing a closing table tag just after the address details - there's a number of other missing tags too. Always use this format: <table> <tr> <td></td> </tr> </table> In other words, td tags always have to be within tr tags. Edited July 8, 201115 yr by bb_matt
Create an account or sign in to comment