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.
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
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
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