HTML email in outlook table width issue - content is wider than the specified table width
123,182
I guess problem is in width attributes in table and td remove 'px' for example
<table border="0" cellpadding="0" cellspacing="0" width="580px" style="background-color: #0290ba;">
Should be
<table border="0" cellpadding="0" cellspacing="0" width="580" style="background-color: #0290ba;">
Author by
Adrian Brown
Updated on March 10, 2020Comments
-
Adrian Brown about 4 years
My HTML email template is displaying correctly without major problems in Gmail, Apple Mail and iOS Mail. Outlook however is a horrifying mess and I can't for the life of me figure out what I've done wrong???
My email template is not using any overly crazy css and uses tables for the layout, I have fixed pixel widths for everything.
The problem is every table in my layout stretches to 100% despite me setting it to 580px for the container and 450px for the inner content.
THE CODE:
<!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> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <!-- Facebook sharing information tags --> <meta property="og:title" content="*|MC:SUBJECT|*" /><title>*|MC:SUBJECT|*</title> <style type="text/css"> /* Client-specific Styles */ #outlook a{padding:0;} /* Force Outlook to provide a "view in browser" button. */ body{width:100% !important;} /* Force Hotmail to display emails at full width */ body{-webkit-text-size-adjust:none;} /* Prevent Webkit platforms from changing default text sizes. */ /* Reset Styles */ body{margin:0; padding:0;} img{border:none; font-size:14px; font-weight:bold; height:auto; line-height:100%; outline:none; text-decoration:none; text-transform:capitalize;} </style> </head> <body bgcolor="#444444"> <center> <table border="0" cellpadding="0" cellspacing="0" width="580px" style="background-color: #0290ba;"> <tr> <td align="center" valign="top"> <img alt="" src="http://dev.adrian-brown.com/hicks-ads/images/header.png" width="580px" /> </td> </tr> <tr> <td align="center" valign="top"> <table border="0" cellpadding="0" cellspacing="0" width="450px"> <tr> <td align="center" valign="top" width="450px"> <br /> <img alt="" src="http://dev.adrian-brown.com/hicks-ads/images/hello_header.png" width="450px" /> </td> </tr> </table> <table border="0" cellpadding="0" cellspacing="0" width="450px"> <tr> <td align="center" valign="top" width="214px"> <br /> <div style="color:#004c63; font-family: Georgia, serif; font-size: 17px; line-height:100%; text-align:left; font-style: italic;"> We consider ourselves partners in your business with the specific purpose of making your profit grow. </div> </td> <td width="236px"></td> </tr> </table> <table border="0" cellpadding="0" cellspacing="0" width="450px"> <tr> <td align="center" valign="top" width="214px"> <p style="line-height: 150%; color: #FFFFFF; text-align: justify; font-size: 10px;"> We have been pretty busy for the last 2 1/2 years getting our business up and running, busy doing day to day and long term projects for our clients. But it's come to our attention not everyone is aware of all the cool (and not so cool but just as important) things we do. So we're going to show off a bit, tell you a bit more about what we do so you can benefit from our wide range of skills, services and experiences. This email is the start of that process: we're going to show you a small (we don't want to annoy you with too much stuff) but diverse selection of projects each <!-- month to hopefully inspire you. Then if you want any information or ideas on how we could do something similar for you just let us know - we'd love to help! We are also in the process of building ourselves a new web site (finally) - we'll let you know when its live but check out our temporary page in the mean time - here. --> </p> </td> <td width="236px"> <p style="line-height: 150%; color: #FFFFFF; text-align: justify; font-size: 10px;"> <img alt="" src="http://dev.adrian-brown.com/hicks-ads/images/world-icon-image.png" width="110%" style="margin-left: 20px;" /> </p> <br /> </td> </tr> </table> </td> </tr> <tr style="background-color: #d82445;"> <td align="center" valign="top"> <img alt="" src="http://dev.adrian-brown.com/hicks-ads/images/divider_showcase.png" width="580px" /> </td> </tr> <tr style="background-color: #d82445;"> <td align="center" valign="top"> <table border="0" cellpadding="0" cellspacing="0" width="450px"> <tr> <td> </td> </tr> <tr> <td valign="top" width="124px"> <img alt="" src="http://dev.adrian-brown.com/hicks-ads/images/showcase_image1.png" width="124px" /> </td> <td width="10px"></td> <td> <table border="0" cellpadding="0" cellspacing="0" width="316px"> <tr> <td valign="top"> <div style="color:#6c1e2c; font-family: Georgia, serif; font-size: 17px; line-height:100%; text-align:left; font-style: italic; font-weight: 500;"> Title Goes Here </div> </td> </tr> <tr> <td valign="top" width="150px"> <p style="line-height: 150%; color: #FFFFFF; text-align: justify; font-size: 10px;"> Sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem . </p> </td> <td width="10px"></td> <td valign="top" width="160px"> <p style="margin-top: 20px;"> <a href="#"><img alt="" src="http://dev.adrian-brown.com/hicks-ads/images/button_showcase_forward.png" style="margin-top: -10px;" /></a> <br /> <br /> <a href="#"><img alt="" src="http://dev.adrian-brown.com/hicks-ads/images/button_showcase_moreinfo.png" /></a> </p> </td> </tr> </table> </td> </tr> <tr> <td> </td> </tr> <tr> <td valign="top" width="124px"> <img alt="" src="http://dev.adrian-brown.com/hicks-ads/images/showcase_image1.png" width="124px" /> </td> <td width="10px"></td> <td> <table border="0" cellpadding="0" cellspacing="0" width="316px"> <tr> <td valign="top"> <div style="color:#6c1e2c; font-family: Georgia, serif; font-size: 17px; line-height:100%; text-align:left; font-style: italic; font-weight: 500;"> Title Goes Here </div> </td> </tr> <tr> <td valign="top" width="150px"> <p style="line-height: 150%; color: #FFFFFF; text-align: justify; font-size: 10px;"> Sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem . </p> </td> <td width="10px"></td> <td valign="top" width="160px"> <p style="margin-top: 20px;"> <a href="#"><img alt="" src="http://dev.adrian-brown.com/hicks-ads/images/button_showcase_forward.png" style="margin-top: -10px;" /></a> <br /> <br /> <a href="#"><img alt="" src="http://dev.adrian-brown.com/hicks-ads/images/button_showcase_moreinfo.png" /></a> </p> </td> </tr> </table> </td> </tr> <tr> <td> </td> </tr> <tr> <td valign="top" width="124px"> <img alt="" src="http://dev.adrian-brown.com/hicks-ads/images/showcase_image1.png" width="124px" /> </td> <td width="10px"></td> <td> <table border="0" cellpadding="0" cellspacing="0" width="316px"> <tr> <td valign="top"> <div style="color:#6c1e2c; font-family: Georgia, serif; font-size: 17px; line-height:100%; text-align:left; font-style: italic; font-weight: 500;"> Title Goes Here </div> </td> </tr> <tr> <td valign="top" width="150px"> <p style="line-height: 150%; color: #FFFFFF; text-align: justify; font-size: 10px;"> Sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem . </p> </td> <td width="10px"></td> <td valign="top" width="160px"> <p style="margin-top: 20px;"> <a href="#"><img alt="" src="http://dev.adrian-brown.com/hicks-ads/images/button_showcase_forward.png" style="margin-top: -10px;" /></a> <br /> <br /> <a href="#"><img alt="" src="http://dev.adrian-brown.com/hicks-ads/images/button_showcase_moreinfo.png" /></a> </p> </td> </tr> </table> </td> </tr> <tr> <td> </td> </tr> </table> <br /> </td> </tr> <tr style="background-color: #fdac57;"> <td align="center" valign="top"> <img alt="" src="http://dev.adrian-brown.com/hicks-ads/images/divider_footer.png" width="580px" /> </td> </tr> <tr style="background-color: #fdac57;"> <td align="center" valign="top"> <table width="450px" align="center" cellspacing="0" cellpadding="0" border="0"> <tr> <td> <table> <tr> <td> </td> </tr> <tr> <td valign="top" width="215px"> <div style="color:#6c1e2c; font-family: Georgia, serif; font-size: 17px; line-height:100%; text-align:left; font-style: italic; font-weight: 500;"> Drop us a line, <br /> visit our website, or <br /> forward this to a friend. </div> </td> <td valign="top" width="40px"> </td> <td valign="top" width="195px"> <div style="color:#6c1e2c; font-family: Georgia, serif; font-size: 17px; line-height:100%; text-align:left; font-style: italic; font-weight: 500;"> Get in touch <br /> today - You’ll <br /> love working with us </div> </td> </tr> <tr> <td valign="top" width="215px"> <p style="line-height: 150%; color: #FFFFFF; text-align: justify; font-size: 10px;"> Don’t worry if it's an odd hour, leave a message and we will get back to you at your convenience. </p> </td> <td valign="top" width="40px"> </td> <td valign="top" width="195px"> <p style="line-height: 150%; color: #FFFFFF; text-align: justify; font-size: 10px;"> 163 Bateau Bay Rd, Bateau Bay, <br /> NSW 2261, <br /> Australia </p> </td> </tr> <tr> <td valign="bottom" width="215px"> <p style="line-height: 150%; color: #FFFFFF; text-align: justify; font-size: 10px;"> <a href="#"><img alt="" src="http://dev.adrian-brown.com/hicks-ads/images/icons/twitter.png" style="padding:0; padding-right: 5px; margin: 0;" /></a> <a href="#"><img alt="" src="http://dev.adrian-brown.com/hicks-ads/images/icons/facebook.png" style="padding:0; padding-right: 5px; margin: 0;" /></a> <a href="#"><img alt="" src="http://dev.adrian-brown.com/hicks-ads/images/icons/vimeo.png" style="padding:0; padding-right: 5px; margin: 0;" /></a> <a href="#"><img alt="" src="http://dev.adrian-brown.com/hicks-ads/images/icons/instagram.png" style="padding:0; padding-right: 5px; margin: 0;" /></a> </p> </td> <td valign="top" width="40px"> </td> <td valign="top" width="195px"> <p style="line-height: 150%; color: #FFFFFF; text-align: justify; font-size: 10px;"> -- --- ----, ------ --- --- ---- <br /> +-- - ---- ---- <br /> [email protected] <br /> --------.com <br /> </p> </td> </tr> </table> <br /> <table width="450px"> <tr> <td width="144px" align="center"> <a href="#"><img alt="" src="http://dev.adrian-brown.com/hicks-ads/images/button_footer_forward.png" /></a> </td> <td width="6px"> </td> <td width="144px" align="center"> <a href="#"><img alt="" src="http://dev.adrian-brown.com/hicks-ads/images/button_footer_visit.png" /></a> </td> <td width="6px"> </td> <td width="144px" align="center"> <a href="#"><img alt="" src="http://dev.adrian-brown.com/hicks-ads/images/button_footer_getintouch.png" /></a> </td> </tr> </table> <br /> </td> </tr> </table> </td> </tr> <tr style="background-color: #FDFDFD;"> <td align="center" valign="top"> <br /> <img alt="" src="http://dev.adrian-brown.com/hicks-ads/images/logo.png" /> <br /> <p style="line-height: 150%; color: #000000; text-align: center; font-size: 10px;">© Copyright 2013 HicksAds - Sent With love :)</p> </td> </tr> </table> </center> </body> </html>Any help is greatly appreciated, like unbelievably appreciated..
-
Adrian Brown about 11 yearsThank you so much for your help! I can't believe it was that simple. This is something I've taken up for my first freelancing job, at least my first job isn't an absolute wreck now. I can't thank you enough
-
jamesnotjim about 11 yearsThis solved my problem with table margins being ignored. Thanks!
-
Adrian Brown about 11 yearsI recommend email on acid, it helped me so much with other issues. It does an acid test showing the output of your email on all email clients, if you just use the free version, you get gmail and outlook, which personally I see as the most important to get it right in (hotmail is moving to outlook web app), most other email clients are probably going to output correctly as they conform to web standards. It also suggests improvements and validates your HTML. Hope you find it as helpful as I did! Email on Acid
-
John Magnolia over 10 yearsNote that
width="100%"is valid -
showdev over 8 yearsDoes anyone know why removing "px" helps? Why does Outlook remove pixel values and why do pixel-less values remain intact?
-
jpschroeder over 8 years@showdev the
pxshould actually be left off for width attributes (its not css). The only allowable values are a width or a percentage. Granted this is a really old spec, and most modern browsers are ok with you specifying the px value; outlook isn't a modern browser though
