gmail/hotmail footer issue

Hi all

Having problems with the footer of an email in hotmail and gmail...

In gmail the footer sits way over to the left and in hotmail there are two white boxes either side of the footer...

Email seems to work fine in pretty much all other mail clients including outlook....

Code below:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>ELTHAM ExECS Xpress</title>
<style type="text/css">
h1 { font-family: Arial, Helvetica, sans-serif; font-size: 24px; margin: 0px; padding: 0px; color: #244a67; }
h2 { font-weight: bold; font-family: Arial, Helvetica, sans-serif; font-size: 16px; margin-top: 0px; margin-bottom: 10px; padding: 0px; color: #23afdd !important; }
h3 { font-family: Arial, Helvetica, sans-serif; font-weight: bold; font-size: 12px; margin-top: 0px; margin-bottom: 7px; padding: 0px; color: #23afdd !important; }
p { font-family: Arial, Helvetica, sans-serif; font-size: 13px; margin-top: 0px; margin-bottom: 10px; padding: 0px; color: #595959}
a, .footer li, .footer a, { color:#ffffff; text-decoration: underline; text-align: center;}
.top p, .footer p { font-family: Arial, Helvetica, sans-serif; font-size: 11px; color: #ffffff; margin: 0; padding: 0; line-height: 16px; text-align: center;}
.toc a { color: #B72441; text-decoration: none; font-size: 11px; margin-bottom: 10px}
.toc p { color: #595959; text-decoration: none; font-size: 11px; margin-bottom: 10px}
.side p { margin-top: 0px; margin-bottom: 10px;}
.ReadMsgBody{width: 100%;}
.ExternalClass{width: 100%;}
a img{border:none;}
.top p{color:white; text-align: center;}
.top a, .top li {color:white; text-align: center; text-decoration: underline}

</style>
<!--[if gte mso 9]>
<style type="text/css">
.body {background: #23afdd;}         
.case {background: none;}
</style>
<![endif]-->



</head>
<body class="body" style="margin: 0; padding: 0; background-color:#23afdd;" marginheight="0" topmargin="0" marginwidth="0" leftmargin="0">
<!--100% body table-->
<table width="100%" border="0" cellspacing="0" cellpadding="0" bgcolor="#23AFDD" style=� table-layout:fixed� >
    <tr>
        <td class="case" bgcolor="#23afdd" style="background-color:#23afdd">
            <!--[if gte mso 9]>
<td style="background: none;">
<![endif]-->
         
            <!--intro-->
            <table width="578" border="0" align="center" cellpadding="0" cellspacing="5">
                <tr>
                    <td class="top" valign="top" height="20" align="center" style="padding-left:15px;">
                    
                    <p>Welcome to the ExECs Newsletter. Not displaying properly? <webversion>Please view it in your browser</webversion>.
                    </p>
                                  
                                   

                    </td>
                </tr>
                <tr>
                    <td style="margin: 0; padding: 0;"><img src="images/header.jpg" bgcolor="#23afdd" alt="ELTHAM ExECS Xpress" valign="top" height="149" width="578">
                        <table width="100%" border="0" cellspacing="0" cellpadding="0">
                           
                            <tr>
                                <td valign="top">
                                    <table width="100%" border="0" cellspacing="0" cellpadding="0">
                                        <tr>
                                            <td align="center" valign="bottom" width="7%">
                                                <table width="100%" border="0" cellspacing="0" cellpadding="0">
                                                    <tr>
                                                        <td width="15"></td>
                                                        <td width="10"></td>
                                                    </tr>
                                                </table>
                                            </td>
                                            <td valign="middle" width="93%">
                                                
                                            </td>
                                        </tr>
                                    </table>
                                </td>
                                <td valign="top">
                                    <table width="100%" border="0" cellspacing="0" cellpadding="0">
                                        <tr>
                                            <td height="10"></td>
                                        </tr>
                                    </table>
                                    
                                    
                                    <table width="100%" border="0" cellspacing="0" cellpadding="0">
    <tr>
                <td width="25">
        </td>
    </tr>
</table>
                                    
                                    
                                    
                                </td>
                            </tr>
                        </table>
                    </td>
                </tr>
              
            </table>
            <!--/intro-->
            <!--content section-->
            <table width="576" border="0" align="center" cellpadding="0" cellspacing="0">
                <tr>
                    <td valign="top">
                        <!--section-->
                        <table width="100%" border="0" cellspacing="0" cellpadding="0">
                            <tr>
                                <td>
                                    <table width="100%" border="0" cellspacing="0" cellpadding="0">
                                        <tr>
                                            <td width="21"></td>
                                            <td>
                                                <table width="100%" border="0" cellpadding="0" cellspacing="0">
                                                    <tr>
                                                        <td height="10" width="204" valign="top" bgcolor="#ffffff"> </td>
                                                    </tr>
                                                </table>
                                            </td>
                                            <td width="19"></td>
                                        </tr>
                                    </table>
                                    <table width="100%" border="0" cellspacing="0" cellpadding="0">
                                        <tr>
                                            <td height="25" align="center" >
                                                <table width="202" border="0" cellspacing="0" cellpadding="0">
                                                    <tr>
                                                        <td valign="top" alt="Upcoming events" height="25" bgcolor="#db8cb1">
                                                  

                                                            <table width="100%" border="0" cellspacing="0" cellpadding="0">
                                                                <tr>
                                                                    <td width="10"></td>
                                                                    <td height="4"></td>
                                                                    <td height="4"></td>
                                                                </tr>
                                                                <tr>
                                                                    <td>&nbsp;</td>
                                                                    <td>
                                                                        <p align="left" style="font-family: Arial, Helvetica, sans-serif; font-size: 13px; margin-top: 0px; margin-left: 10px; margin-bottom: 0px; padding: 0px; color: #ffffff; font-size: 16px; font-weight: bold; ">Upcoming events</p>
                                                                    </td>
                                                                    
                                                                </tr>
                                                            </table>
                                                        </td>
                                                    </tr>
                                                </table>
                                            </td>
                                        </tr>
                                    </table>
                                    <table width="100%" border="0" cellspacing="0" cellpadding="0">
                                        <tr>
                                            <td width="20">&nbsp;</td>
                                            <td>
                                                <table class="toc" width="100%" border="0" cellpadding="12" cellspacing="0">
                                                    <tr>
                                                        <td width="204" valign="top" bgcolor="#ffffff">
                                                            <repeater>
                                                                <table width="100%" border="0" cellspacing="0" cellpadding="0">
                                                                    <tr>
                                                                        <td>
                                                                            <h3>
                                                                                <$title default='Enter title here'$>
                                                                            </h3>
                                                                            <$description default='<p>Enter description here</p>'$>
                                                                            <table width="100%" border="0" cellspacing="0" cellpadding="0">
                                                                                
                                                                            </table>
                                                                        </td>
                                                                    </tr>
                                                                </table>
                                                            </repeater>
                                                            
                                                        </td>
                                                    </tr>
                                                </table>
                                            </td>
                                            <td width="19"></td>
                                        </tr>
                                    </table>
                                </td>
                            </tr>
                        </table>
                        <!--/section-->
                        <!--break-->
                        <table width="100%" border="0" cellspacing="0" cellpadding="0">
                            <tr>
                                <td height="20"></td>
                            </tr>
                        </table>
                        <!--/break-->
                        <!--section-->
                        <table width="100%" border="0" cellspacing="0" cellpadding="0">
                            <tr>
                                <td>
                                    <table width="100%" border="0" cellspacing="0" cellpadding="0">
                                        <tr>
                                            <td width="21"></td>
                                            <td>
                                                <table width="100%" border="0" cellpadding="0" cellspacing="0">
                                                    <tr>
                                                        <td height="10" width="204" valign="top" bgcolor="#ffffff"> </td>
                                                    </tr>
                                                </table>
                                            </td>
                                            <td width="19"></td>
                                        </tr>
                                    </table>
                                    <table width="100%" border="0" cellspacing="0" cellpadding="0">
                                        <tr>
                                            <td height="25" align="center">
                                                <table width="202" border="0" cellspacing="0" cellpadding="0">
                                                    <tr>
                                                    
                                                    <td valign="top" bgcolor="#e2063a" alt="ExECS extras" height="25">
                                                        
                                                            <table width="100%" border="0" cellspacing="0" cellpadding="0">
                                                                <tr>
                                                                    <td width="10"></td>
                                                                    <td height="4"></td>
                                                                    <td height="4"></td>
                                                                </tr>
                                                                <tr>
                                                                    <td></td>
                                                                    <td>
                                                                        <p align="left" style="font-family: Arial, Helvetica, sans-serif; font-size: 13px; margin-top: 0px; margin-left: 10px; margin-bottom: 0px; padding: 0px; color: #ffffff; font-size: 16px; font-weight: bold;">ExECS extras</p>
                                                                    </td>
                                                                    
                                                                </tr>
                                                            </table>
                                                        </td>
                                                    </tr>
                                                </table>
                                            </td>
                                        </tr>
                                    </table>
                                    <table width="100%" border="0" cellspacing="0" cellpadding="0">
                                        <tr>
                                            <td width="20"></td>
                                            <td>
                                                <table class="toc" width="100%" border="0" cellpadding="12" cellspacing="0">
                                                    <tr>
                                                        <td width="204" valign="top" bgcolor="#ffffff">
                                                            <repeater>
                                                                <table width="100%" border="0" cellspacing="0" cellpadding="0">
                                                                    <tr>
                                                                        <td>
                                                                            <h3>
                                                                                <$title default='Enter title here'$>
                                                                            </h3>
                                                                            <$description default='<p>Enter description here</p>'$>
                                                                            <table width="100%" border="0" cellspacing="0" cellpadding="0">
                                                                                
                                                                            </table>
                                                                        </td>
                                                                    </tr>
                                                                </table>
                                                            </repeater>
                                                        </td>
                                                    </tr>
                                                </table>
                                            </td>
                                            <td width="19"></td>
                                        </tr>
                                    </table>
                                </td>
                            </tr>
                        </table>
                        <!--/section-->
                        
                        
                        
                        <!--break-->
                        <table width="100%" border="0" cellspacing="0" cellpadding="0">
                            <tr>
                                <td height="20"></td>
                            </tr>
                        </table>
                        <!--/break-->  
                        
                        
                            
                        <!--forwardtoafriend-->
                        <table width="100%" border="0" cellspacing="0" cellpadding="0">
                            <tr>
                                <td>
                                    <table width="100%" border="0" cellspacing="0" cellpadding="0">
                                        <tr>
                                            <td width="21"></td>
                                            <td>
                                                <table width="100%" border="0" cellpadding="0" cellspacing="0">
                                                    <tr>
                                                        <td height="10" width="204" valign="top" bgcolor="#ffffff"> </td>
                                                    </tr>
                                                </table>
                                            </td>
                                            <td width="19"></td>
                                        </tr>
                                    </table>
                                    <table width="100%" border="0" cellspacing="0" cellpadding="0">
                                        <tr>
                                            <td height="25" align="center">
                                                <table width="202" border="0" cellspacing="0" cellpadding="0">
                                                    <tr>
                                                        <td valign="top" bgcolor="#dd862f" alt="Forward to a friend" height="25">
                                                            <table width="100%" border="0" cellspacing="0" cellpadding="0">
                                                                <tr>
                                                                    <td width="10"></td>
                                                                    <td height="3"></td>
                                                                    <td height="4"></td>
                                                                </tr>
                                                                <tr>
                                                                    <td>&nbsp;</td>
                                                                    <td>
                                                                    
                                                                    
                                                                        <p align="left" style="font-family: Arial, Helvetica, sans-serif; font-size: 13px; margin-top: 0px;margin-left: 10px; margin-bottom: 0px; padding: 0px; color: #ffffff; font-size: 16px; font-weight: bold; ">Forward to a friend</p>
                                                                    </td>
                                                                    
                                                                </tr>
                                                            </table>
                                                        </td>
                                                    </tr>
                                                </table>
                                            </td>
                                        </tr>
                                    </table>
                                    <table width="100%" border="0" cellspacing="0" cellpadding="0">
                                        <tr>
                                            <td width="20">&nbsp;</td>
                                            <td>
                                                <table class="toc" width="100%" border="0" cellpadding="12" cellspacing="0">
                                                    <tr>
                                                        <td width="204" valign="top" bgcolor="#ffffff">
                                                            
                           <p>Share the ExECS love. To forward this email to a friend <forwardtoafriend style="font-family: Arial, Helvetica, sans-serif; font-size: 11px; color: #B72441;">click here</forwardtoafriend></p>
                                                        </td>
                                                    </tr>
                                                </table>
                                            </td>
                                            <td width="19"></td>
                                        </tr>
                                    </table>
                                </td>
                            </tr>
                        </table>
                        <!--/forwardtoafriend-->
                        
                        
                        
                         <!--break-->
                        <table width="100%" border="0" cellspacing="0" cellpadding="0">
                            <tr>
                                <td height="20"></td>
                            </tr>
                        </table>
                        <!--/break-->
                        
                        <!--socialmedia-->
                        <table width="100%" border="0" cellspacing="0" cellpadding="0">
                            <tr>
                                <td>
                                    <table width="100%" border="0" cellspacing="0" cellpadding="0">
                                        <tr>
                                            <td width="21"></td>
                                            <td>
                                                <table width="100%" border="0" cellpadding="0" cellspacing="0">
                                                    <tr>
                                                        <td height="10" width="204" valign="top" bgcolor="#ffffff"> </td>
                                                    </tr>
                                                </table>
                                            </td>
                                            <td width="19"></td>
                                        </tr>
                                    </table>
                                    <table width="100%" border="0" cellspacing="0" cellpadding="0">
                                        <tr>
                                            <td height="25" align="center">
                                                <table width="202" border="0" cellspacing="0" cellpadding="0">
                                                    <tr>
                                                        <td valign="top" bgcolor="#419d89" alt="Let's get social" height="25">
                                                            <table width="100%" border="0" cellspacing="0" cellpadding="0">
                                                                <tr>
                                                                    <td width="10"></td>
                                                                    <td height="4"></td>
                                                                    <td height="4"></td>
                                                                </tr>
                                                                <tr>
                                                                    <td>&nbsp;</td>
                                                                    <td>
                                                                        <p align="left" style="font-family: Arial, Helvetica, sans-serif; font-size: 13px; margin-top: 0px; margin-left: 10px; margin-bottom: 0px; padding: 0px; color: #ffffff; font-size: 16px; font-weight: bold;">Let's get social</p>
                                                                    </td>
                                                                    
                                                                </tr>
                                                            </table>
                                                        </td>
                                                    </tr>
                                                </table>
                                            </td>
                                        </tr>
                                    </table>
                                    <table width="100%" border="0" cellspacing="0" cellpadding="0">
                                        <tr>
                                            <td width="20">&nbsp;</td>
                                            <td>
                                                <table class="toc" width="100%" border="0" cellpadding="12" cellspacing="0">
                                                    <tr>
                                                        <td width="204" valign="top" bgcolor="#ffffff">
                                                        
                                                         <p>Stay in touch with all our latest news and info. Connect with ExECS on <a href="http://www.facebook.com/ExECS">Facebook</a>, <a href="http://www.twitter.com/elthamexecs"> Twitter</a> and <a href="http://http://www.linkedin.com/groups/ELTHAM-College-ExECS-Association-3929110?mostPopular&gid=3929110">LinkedIn</a>.</p>
                                                           
                                                          <a href="http://www.twitter.com/elthamexecs" border="0" alt="Follow us on Twitter" target="_blank"><img src="images/twitter.jpg"></a>
                                                          
                                                          <a href="http://www.facebook.com/ExECS" border="0" alt="Join our Facebook page" target="_blank"><img src="images/facebook.jpg"></a>
                                                          
                                                          <a href="http://http://www.linkedin.com/groups/ELTHAM-College-ExECS-Association-3929110?mostPopular&gid=3929110" border="0" alt="Join our Linkedin group" target="_blank"><img src="images/linkedin.jpg"></a>
                                                          
                                                        </td>
                                                    </tr>
                                                </table>
                                            </td>
                                            <td width="19"></td>
                                        </tr>
                                    </table>
                                </td>
                            </tr>
                        </table>
                        <!--/socialmedia-->

                        
                        
                        
                        
                        
                        
                        
                        <table width="100%" border="0" cellspacing="0" cellpadding="0">
                            <tr>
                                <td width="20"></td>
                                <td>
                                    <table width="100%" border="0" cellpadding="12" cellspacing="0">
                                        <tr>
                                            <td width="204" valign="top">
                                                <table width="100%" border="0" align="center" cellpadding="0" cellspacing="0">
                                                    
                                                <!--break-->
                                                <table width="100%" border="0" cellspacing="0" cellpadding="0">
                                                    <tr>
                                                        <td height="10"></td>
                                                    </tr>
                                                </table>
                                                <!--/break-->
              
                                            </td>
                                        </tr>
                                    </table>
                                </td>
                                
                                <td width="19"></td>
                            </tr>
                        </table>
                    </td>
                    <td width="350" valign="top">
                        <table width="100%" border="0" cellpadding="12" cellspacing="0">
                            <tr>
                                <td valign="top" bgcolor="#ffffff">
                                    <repeater toc='true'>
                                        <table width="100%" border="0" cellspacing="0" cellpadding="0">
                                            <tr>
                                                <td>
                                                    <h2>
                                                        <$title default='Enter title here'$>
                                                    </h2>
                                                    <$description default='<p>Enter description here</p>'$>
                                                    <img src="<$imagesrc link='true'$>" width="325" alt="Image">
                                                    <table width="100%" border="0" cellspacing="0" cellpadding="0">
                                                        <tr>
                                                            <td valign="middle" height="30"> <img src="images/line2.jpg" height="12" width="325" alt="line"></td>
                                                        </tr>
                                                    </table>
                                                </td>
                                            </tr>

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

 
        </td>
    </tr>
</table>
<!--/100% body table-->

<!--footer-->
<tr height="20" bgcolor="#23AFDD"></tr>
<table class="footer" bgcolor="#23AFDD" width="578" border="0" align="center" cellpadding="0" cellspacing="0">
                           <tr>

                               <td valign="top" align="center" height="70" bgcolor="#23AFDD">
                                   <table align="center" border="0" cellspacing="0" cellpadding="0" bgcolor="#23AFDD">
                                       <tr>
                                           <td height="20"></td>
                                       </tr>
                                   </table>
                                   <p>You are receiving the ExECS Xpress because you are a member of the ExECS Association.<br>
                                   Don't want to receive the ExECS Xpress? <unsubscribe>Unsubscribe Instantly.</unsubscribe><br>
                                   The ExECS Association Inc | Ph 03 9433 9959 | 1660 Main Road Research, PO Box 40 Eltham, Victoria 3095</p>
                               </td>
                              </table>
           <!--/footer-->
</body>
</html>
roshodgekiss roshodgekiss, 5 years ago

Hi bigdreamagency, from a quick look at your code, I've noticed that there's quite a bit of invalid HTML/CSS. In the footer, there are unclosed <td> and <tr> which are most probably causing the rendering issues in Gmail in Hotmail. A few things to look out for:

- typos/encoding issues, eg. < ... style=� table-layout:fixed� ... >
- invalid attributes, eg. <img src="images/header.jpg" bgcolor="#23afdd" ...>, <td valign="top" alt="Upcoming events" ... >
- unclosed tags (as mentioned above)

You'll be glad to know that there's a new HTML email validator called Fractal, which you can use to debug issues like these. Once these wrinkles are ironed out, I'm pretty certain that most of these rendering issues will disappear :)


Get in touch with us on Twitter: http://twitter.com/campaignmonitor
We're also on Facebook: http://facebook.com/campaignmonitor

Join 200,000 companies around the world that use Campaign Monitor to run email marketing campaigns that deliver results for their business.

Get started for free
1-888-533-8098