html email margin/padding problem on iphone

Discussion in 'Web Design and Development' started by SailorTom, May 24, 2011.

  1. SailorTom macrumors regular

    Joined:
    May 15, 2008
    #1
    Hi,

    I've got a problem getting my html email to render properly on my iPhone. Basically a white strip ~20px wide appears on the right hand side of the display. In the rendering process, it appears once the logo image is downloaded, however it remains when I turn the images off, so it's likely to be something else.

    This is the HTML I'm currently using, which is embedded in a multipart email.
    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" style="margin: 0px; padding: 0px;">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <style>
    @media only screen and (max-device-width: 480px) {
    	#bgtable {
    	 	padding: 0px 10px;
    	}
    	#logo {
    		width: 110px !important;
    	}
    	#logo img {
    	 	width: 100px !important;
    		height: 100px !important;
    	}
    }
    </style>
    </head>
    <body style="margin-left: 0px; padding-left: 0px; margin-right: 0px; padding-right: 0px; margin-top: 0px; padding-top: 0px; margin-bottom: 0px; padding-bottom: 0px; word-wrap: break-word;">
    <table id="bgtable" width="100%" cellspacing="0" cellpadding="0" border="0" bgcolor="#637998" style="font-family: 'Trebuchet MS', 'Lucida Grande', Helvetica, Arial, sans-serif;"><tbody><tr>
    	 <td style="padding-left: 0px; padding-right; 0px; padding-top: 10px; padding-bottom: 20px;">
    
    <table cellspacing="0" cellpadding="0" border="0" align="center" style="max-width: 700px;"><tbody><tr><td>
    
    <table id="page" width="95%" cellspacing="0" cellpadding="0" border="0" align="center" bgcolor="white" style="font-family: 'Trebuchet MS', 'Lucida Grande', Helvetica, Arial, sans-serif; border-radius: 10px; -webkit-box-shadow: 0px 3px 10px #604B4B; -moz-box-shadow: 0px 3px 10px #604B4B; box-shadow: 0px 3px 10px #604B4B;">
    <tbody>
    
    <tr><!--header-->
    	<td bgcolor="white" style="font-size: 20px; font-family: 'Trebuchet MS', 'Lucida Grande', Helvetica, Arial, sans-serif; padding-top: 10px; padding-left: 10px; border-top-left-radius: 10px;">
    	iphone 10px padding bg table not td
    	</td>
    	<td id="logo" width="150" bgcolor="white" align="right" style="padding-top: 10px; padding-right: 10px; border-top-right-radius: 10px;">
    		<img width="120" height="120" src="http://tsc.endoftheinternet.org/images/email/logo.jpg" alt="Trimpley Sailing Club" style="margin: 0px;" />
    	</td>
    </tr>
    
    <tr><!--content-->
    	<td bgcolor="white" colspan="2" style="font-size: 14px;  font-family: 'Trebuchet MS', 'Lucida Grande', Helvetica, Arial, sans-serif; padding-top: 1em; padding-bottom: 1em; padding-left: 10px; padding-right: 10px;">
    	%content% : will be replaced by the message content.<br />
    NOTE: The content tag is required, WP Better Emails will be automatically desactivated if no content tag is found.<br />
    http://tsc.endoftheinternet.org/tsc-wp : will be replaced by your blog URL.<br />
    Trimpley Sailing Club : will be replaced by your blog name.<br />
     : will be replaced by your blog description.<br />
    webmaster@trimpleysailingclub.co.uk : will be replaced by admin email.<br />
    Tuesday, 24 May 2011 : will be replaced by current date, as formatted in general options.<br />
    12:08 : will be replaced by current time, as formatted in general options.
    	</td>
    </tr>
    
    <tr><!--footer-->
    	<td bgcolor="white" colspan="2" style="font-size: 12px; font-family: 'Trebuchet MS', 'Lucida Grande', Helvetica, Arial, sans-serif; padding-top: 1em; padding-left: 10px; padding-right: 10px; padding-bottom: 10px; border-top-color: #B3B3B3; border-top-style: solid; border-top-width: 1px; border-bottom-left-radius: 10px; border-bottom-right-radius: 10px;">
    	<p>Trimpley Sailing Club, Eymore Wood, Bewdley, Worcs, DY12 1PJ<br />
    	Web: <a href="http://tsc.endoftheinternet.org/" target="_blank">www.trimpleysailingclub.co.uk</a><br />
    	Email: <a href="mailto:info@trimpleysailingclub.co.uk">info@trimpleysailingclub.co.uk</a></p>
    	</td>
    </tr>
    
    </tbody>
    </table>
    
    </td></tr></tbody></table>
    </td></tr></tbody></table>
    </body>
    </html>
    
    I also have this code which does display properly i.e. background colour extends across full width, no right hand margin, but this don't not render properly in other email clients (Outlook, Windows Mail, etc) so I really need to use tables to wrap (as above) rather than divs
    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" style="margin: 0px; padding: 0px;">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <style>
    @media only screen and (max-device-width: 480px) {
    	table {
    	 	padding: 7px !important;
    	 	border-radius: 5px !important;	
    	}
    	#logo {
    		width: 120px !important;
    	}
    	#logo img {
    	 	width: 100px !important;
    		height: 100px !important;
    	}
    }
    </style>
    </head>
    <body style="margin-left: 0px; padding-left: 0px; margin-right: 0px; padding-right: 0px; margin-top: 0px; padding-top: 0px; margin-bottom: 0px; padding-bottom: 0px; word-wrap: break-word;">
    <div id="wrap" style="background-color: #637998; font-family: 'Trebuchet MS', 'Lucida Grande', Helvetica, Arial, sans-serif; margin-left: 0px; padding-left: 10px; margin-right: 0px; padding-right: 10px; margin-top: 0px; padding-top: 10px; margin-bottom: 0px; padding-bottom: 20px;">
    <div style="max-width: 700px; margin-top: 0px; margin-bottom: 0px; margin-left: auto; margin-right: auto;">
    <table width="95%" cellspacing="0" cellpadding="0" border="0" align="center" bgcolor="white" style="font-family: 'Trebuchet MS', 'Lucida Grande', Helvetica, Arial, sans-serif; table-layout: fixed; padding-top: 10px; padding-right: 10px; padding-bottom: 10px; padding-left: 10px; border-radius: 10px; -webkit-box-shadow: 0px 3px 10px #604B4B; -moz-box-shadow: 0px 3px 10px #604B4B; box-shadow: 0px 3px 10px #604B4B;">
    <tbody>
    
    <tr><!--header-->
    	<td bgcolor="white" style="font-size: 20px; font-family: 'Trebuchet MS', 'Lucida Grande', Helvetica, Arial, sans-serif;">
    	test yahoo mail
    	</td>
    	<td id="logo" width="122" bgcolor="white" align="right" style="overflow: hidden;">
    		<img width="120" height="120" src="http://tsc.endoftheinternet.org/images/email/logo.jpg" alt="Trimpley Sailing Club" style="overflow: hidden;" />
    	</td>
    </tr>
    
    <tr><!--content-->
    	<td bgcolor="white" colspan="2" style="font-size: 14px;  font-family: 'Trebuchet MS', 'Lucida Grande', Helvetica, Arial, sans-serif; padding-top: 1em; padding-bottom: 1em;">
    	Lorem ipsum dolor sit amet, neque est eu elit consectetuer, et ac risus pede aliquam, mauris ut eros. Donec ridiculus vivamus erat lectus a faucibus, elit pede parturient mauris lectus ut. Eleifend tempor eget magna malesuada consectetuer malesuada. Ligula dictum sapien rhoncus, scelerisque mauris libero lacus lobortis nibh, at pellentesque mauris, vestibulum est ut fermentum mauris, etiam sit lacus interdum vehicula purus. Ligula lacus cum lorem, scelerisque curae sapien quis viverra ut dolor, nec pede suspendisse mi amet ipsum, pede eu habitasse nec, enim urna urna. Ac in. Feugiat curabitur nam euismod at, dui lacinia mattis in, pulvinar justo sed. Sit vivamus, semper duis adipiscing duis accumsan mauris vitae, suspendisse nullam ut congue tempor, neque sem massa proin voluptas, in diam platea tortor.
    	</td>
    </tr>
    
    <tr><!--footer-->
    	<td bgcolor="white" colspan="2" style="font-size: 12px; font-family: 'Trebuchet MS', 'Lucida Grande', Helvetica, Arial, sans-serif; padding-top: 1em; border-top-color: #B3B3B3; border-top-style: solid; border-top-width: 1px;">
    	<p>Trimpley Sailing Club, Eymore Wood, Bewdley, Worcs, DY12 1PJ<br />
    	Web: <a href="http://tsc.endoftheinternet.org/" target="_blank">www.trimpleysailingclub.co.uk</a><br />
    	Email: <a href="mailto:info@trimpleysailingclub.co.uk">info@trimpleysailingclub.co.uk</a></p>
    	</td>
    </tr>
    
    </tbody>
    </table>
    
    </div>
    </div>
    </body>
    </html>
    
    I should point out that the main thing the mobile stylesheet does is to resize the logo from 120px to 100px. The rest of the styling is the same for both mobile, web and desktop.

    I find it strange that iPhone Mail doesn't render this as expected, seeing as it runs on webkit and is one of the best clients for rendering html in email according to web standards. I don't have any problem with rendering in desktop mail.

    If anyone has any ideas, it'd be great to hear them!

    Thanks, Tom
     
  2. dlp4130 macrumors newbie

    Joined:
    Jan 9, 2012
    #2
    Possible Fix

    Hi, I ran into a similar problem, and giving the body a min-width of 100% in the mobile styles seemed to fix.
     
  3. kemo macrumors 6502a

    kemo

    Joined:
    Oct 29, 2008
    Location:
    /Users/kemo
    #3
    Try to put align="center" and style="text-align:center" onto the first table and then put style="text-align:left" onto the second one if necessary.
     

Share This Page