<tr id="section-6465178" class="section loyalty">
<table cellspacing="0" cellpadding="0" border="0" width="100%" role="presentation">
<!-- Button : BEGIN -->
<header style="padding: 30px;
text-align: center; font-size: 35px;"> <span style="color: #8c734b; font-size: 20px; font-family: Lora;">More on the friends of Bynd(FOB) Loyalty Programme</span></header>
<section class="col-1-2">
<th class="earn points" style="mso-line-height-rule: exactly; border-radius: 1px; padding-top: 50px;
padding-bottom: 20px;
padding-left: 30px;
padding-right: 200px;"><img src="https://cdn.abc.com/files/Earn_Points_v2.png?v=1661306144" style="width: 50px; height: 50px ;" />
<p>Earn Points</p>
<p> Collect 1 point for every S$1 spent online</p>
</section>
</th>
<th class="get rewarded" style="mso-line-height-rule: exactly; border-radius: 1px; padding-top: 50px;
padding-bottom: 20px;
padding-left: 30px;
padding-right: 200px;"><img src="https://cdn.abc.com/files/Get_Rewards.png?v=1661306273" style="width: 50px; height: 50px ;" />
<p>Get Rewarded</p>
<p> Enjoy special rewards by redeeming your accumulated FOB points</p>
</th>
<section class="col-1-2">
<th class="early access" style="mso-line-height-rule: exactly; border-radius: 1px; padding-left: 300px; padding-right: 0px;"><img src="https://cdn.abc.com/files/Early_Access_v2.png?v=1661306185" style="width: 50px; height: 50px ;" />
<p>Early Access</p>
<p>Get early access to new product launches and sales promotions.</p>
</th>
</section>
<section class="col-1-2">
<th class="tier benefits" style="mso-line-height-rule: exactly; border-radius: 1px; padding-left: 300px; padding-right: 0px;"><img src="https://cdn.abc.com/files/Exclusive_Benefits_v2.png?v=1661306185" style="width: 50px; height: 50px ;" />
<p>Tier Benefits</p>
<p>Advance to next tier for more benefits and discounts.</p>
</th>
</section>
</table>
</th>
</tr>
I wanted to make it 2 rows 2 columns but seems like it has a conflict. Previously, I've tried div tags but couldn't work too.
result:
You can stack the components by adding two table rows <tr> - so there are two table head (th) elements inside each new row.
The inline CSS seems to be causing some problems too. I didn't have time to clean it all up but just moved the important parts over to a separate CSS. Still needs more styling in order to get the font sizes right and import the Lora font correctly. Of course you could get good results with just positioned divs too instead of tables, maybe someone will post that solution.
tr, th {
margin: 0 auto;
text-align: center;
}
table {
margin: 0 auto;
text-align: center;
}
header {
padding: 30px;
text-align: center;
font-size: 35px;
color: #8c734b;
}
header.span {
font-size: 20px;
font-family: Lora;
}
th {
mso-line-height-rule: exactly;
border-radius: 1px;
padding-top: 50px;
padding-bottom: 20px;
/* padding-left: 30px;
padding-right: 200px; */
}
<tr id="section-6465178" class="section loyalty">
<table cellspacing="0" cellpadding="0" border="0" width="100%" role="presentation">
<!-- Button : BEGIN -->
<header class="span"><span class="span">More on the friends of Bynd(FOB) Loyalty Programme</span></header>
<section class="col-1-2">
<tr>
<th class="earn points"><img src="https://cdn.abc.com/files/Earn_Points_v2.png?v=1661306144" style="width: 50px; height: 50px ;" />
<p>Earn Points</p>
<p> Collect 1 point for every S$1 spent online</p>
</th>
</section>
<th class="get rewarded"><img src="https://cdn.abc.com/files/Get_Rewards.png?v=1661306273" style="width: 50px; height: 50px ;" />
<p>Get Rewarded</p>
<p> Enjoy special rewards by redeeming your accumulated FOB points</p>
</th>
</tr>
<section class="col-1-2">
<tr>
<th class="early access"><img src="https://cdn.abc.com/files/Early_Access_v2.png?v=1661306185" style="width: 50px; height: 50px ;" />
<p>Early Access</p>
<p>Get early access to new product launches and sales promotions.</p>
</th>
</section>
<section class="col-1-2">
<th class="tier benefits"><img src="https://cdn.abc.com/files/Exclusive_Benefits_v2.png?v=1661306185" style="width: 50px; height: 50px ;" />
<p>Tier Benefits</p>
<p>Advance to next tier for more benefits and discounts.</p>
</th>
</tr>
</section>
</table>
</th>
</tr>
I found some errors on the structuring of the table. If you wonna create a table with 2 rows and 2 columns, here is a simple example:
<table>
<tr>
<td>Company</td>
<td>Contact</td>
</tr>
<tr>
<td>Alfreds Futterkiste</td>
<td>Maria Anders</td>
</tr>
</table>
Here some mistake:
The <tr></tr> should be inside the table. Probably the <tr></tr> was passed cause of is outside the table.
You probably forgot a <section></section> tag (not sure if it was wanted)
You have used only one <tr></tr> tag instead two.
Here is the solution code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<table cellspacing="0" cellpadding="0" border="0" width="100%" role="presentation">
<!-- Button : BEGIN -->
<header style="padding: 30px;
text-align: center; font-size: 35px;"> <span style="color: #8c734b; font-size: 20px; font-family: Lora;">More on the friends of Bynd(FOB) Loyalty Programme</span></header>
<tr id="section-6465178" class="section loyalty">
<section class="col-1-2">
<th class="earn points" style="mso-line-height-rule: exactly; border-radius: 1px; padding-top: 50px;
padding-bottom: 20px;
padding-left: 30px;
padding-right: 200px;"><img src="https://cdn.abc.com/files/Earn_Points_v2.png?v=1661306144" style="width: 50px; height: 50px ;" />
<p>Earn Points</p>
<p> Collect 1 point for every S$1 spent online</p>
</th>
</section>
<section class="col-1-2">
<th class="get rewarded" style="mso-line-height-rule: exactly; border-radius: 1px; padding-top: 50px;
padding-bottom: 20px;
padding-left: 30px;
padding-right: 200px;"><img src="https://cdn.abc.com/files/Get_Rewards.png?v=1661306273" style="width: 50px; height: 50px ;" />
<p>Get Rewarded</p>
<p> Enjoy special rewards by redeeming your accumulated FOB points</p>
</th>
</section>
</tr>
<tr>
<section class="col-1-2">
<th class="early access" style="mso-line-height-rule: exactly; border-radius: 1px; padding-left: 300px; padding-right: 0px;"><img src="https://cdn.abc.com/files/Early_Access_v2.png?v=1661306185" style="width: 50px; height: 50px ;" />
<p>Early Access</p>
<p>Get early access to new product launches and sales promotions.</p>
</th>
</section>
<section class="col-1-2">
<th class="tier benefits" style="mso-line-height-rule: exactly; border-radius: 1px; padding-left: 300px; padding-right: 0px;"><img src="https://cdn.abc.com/files/Exclusive_Benefits_v2.png?v=1661306185" style="width: 50px; height: 50px ;" />
<p>Tier Benefits</p>
<p>Advance to next tier for more benefits and discounts.</p>
</th>
</section>
</tr>
</table>
</body>
</html>
If it keeps getting messy then the problem is in your css file. I hope it helped you :)
I've built a responsive email however, on IOS8 (in Apple mail client and in phones browser) the media queries are being ignored. Note: this is across all the IOS 8 iPhones
I've not provided a JSFIDDLE as it doesn't really work for emails since the code is all in one place.
Email can be found here
http://news.yfish.co.uk/e/9F640D904C5C4FC1AAD220AFAE5C37B3/4/preview/
<!DOCTYPE HTML>
<html>
<head>
<title>Rugby World Cup 2015</title>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<meta content="width=device-width, initial-scale=1" name="viewport" />
<style type="text/css">
#outlook a { padding: 0; }
.ReadMsgBody { width: 100%; } .ExternalClass { width:100%; }
.ExternalClass, .ExternalClass p, .ExternalClass span, .ExternalClass font, .ExternalClass td, .ExternalClass div { line-height: 100%; }
body, table, td, a { -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; }
table, td { mso-table-lspace: 0pt; mso-table-rspace: 0pt; }
img { -ms-interpolation-mode: bicubic; }
body { margin: 0; padding: 0; }
img { border: 0; height: auto; line-height: 100%; outline: none; text-decoration: none; }
table { border-collapse: collapse!important; }
body { height: 100%!important; margin: 0; padding: 0; width: 100%!important; background-color: #e6e6e7; }
a:visited { color: #ffffff; }
#media screen {
#font-face {
font-family: 'humanst';
src: url(http://news.yfish.co.uk/repository/news.yfish.co.uk/34/14553/HUM521N-webfont.eot);
src: url(http://news.yfish.co.uk/repository/news.yfish.co.uk/34/14553/HUM521N-webfont.eot?#iefix) format('embedded-opentype'),
url(http://news.yfish.co.uk/repository/news.yfish.co.uk/34/14553/HUM521N-webfont.woff2) format('woff2'),
url(http://news.yfish.co.uk/repository/news.yfish.co.uk/34/14553/HUM521N-webfont.woff) format('woff'),
url(http://news.yfish.co.uk/repository/news.yfish.co.uk/34/14553/HUM521N-webfont.ttf) format('truetype'),
url(http://news.yfish.co.uk/repository/news.yfish.co.uk/34/14553/HUM521N-webfont.svg#humanst521_btroman) format('svg');
font-weight: normal;
font-style: normal;
}
}
#fade {
-webkit-animation: fadeIn 1.5s forwards;
-moz-animation: fadeIn 1.5s forwards;
-o-animation: fadeIn 1.5s forwards;
animation: fadeIn 1.5s forwards;
}
#-webkit-keyframes fadeIn {
0% {opacity: 0; }
70% {opacity: 0; }
100% {opacity: 1; }
}
#-moz-keyframes fadeIn {
0% {opacity: 0; }
70% {opacity: 0; }
100% {opacity: 1; }
}
#-o-keyframes fadeIn {
0% {opacity: 0; }
70% {opacity: 0; }
100% {opacity: 1; }
}
#keyframes fadeIn {
0% {opacity: 0; }
70% {opacity: 0; }
100% {opacity: 1; }
}
#fadeUp {
-webkit-animation: imagefadeInUp 2s 0.8s forwards;
-moz-animation: imagefadeInUp 2s 0.8s forwards;
-o-animation: imagefadeInUp 2s 0.8s forwards;
animation: imagefadeInUp 2s 0.8s forwards;
visibility: hidden!important;
}
#-webkit-keyframes imagefadeInUp {
0% {opacity: 0; -webkit-transform: translateY(50px);}
50% {opacity: 0; -webkit-transform: translateY(50px); visibility: visible; }
100% {opacity: 1; -webkit-transform: translateX(0); visibility: visible;}
}
#-moz-keyframes imagefadeInUp {
0% {opacity: 0; -moz-transform: translateY(50px);}
50% {opacity: 0; -moz-transform: translateY(50px); visibility: visible;}
100% {opacity: 1; -moz-transform: translateX(0); visibility: visible;}
}
#-o-keyframes imagefadeInUp {
0% {opacity: 0; -o-transform: translateY(50px);}
50% {opacity: 0; -o-transform: translateY(50px); visibility: visible;}
100% {opacity: 1; -o-transform: translateX(0); visibility: visible;}
}
#keyframes imagefadeInUp {
0% {opacity: 0; transform: translateY(50px);}
50% {opacity: 0; transform: translateY(50px); visibility: visible;}
100% {opacity: 1; transform: translateX(0); visibility: visible;}
}
#media screen and (max-width: 600px), and screen (max-device-width: 600px) {
body { width: auto!important; }
table[class="fullWidth"] { width: 100%!important; }
table[class="contentWidth"] { width: 90%!important; }
td[class="center"] { text-align: center!important; }
table[class="centerTable"] { display: block!important; float: none!important; margin: 0 auto!important; }
td[class="fullCell"] { display: block!important; float: none!important; width: 100%!important; }
td[id="padding"] { padding-bottom: 20px!important; }
}
#media screen and (max-width: 520px), and screen (max-device-width: 520px) {
table[class="mainTitle"] { width: 95%!important; }
img[class="imgScale"] { width: 100%!important; height: auto!important; }
}
#media screen and (max-width: 480px), and screen (max-device-width: 480px) {
td[class="mobileCell"] { display: block!important; float: left!important; width: 100%!important; padding: 0!important; }
td[class="mobileHide"] { display: none!important; }
table[class="logoCenter"] { display: block!important; float: none!important; margin: 0 auto!important; margin-bottom: 20px!important; }
table[class="gifScale"] { width: 95%!important; }
}
#media screen and (max-width: 370px), and screen (max-device-width: 370px) {
table[class="mobileTitle"] { width: 90%!important; }
}
</style>
</head>
<body bottommargin="0" leftmargin="0" marginheight="0" marginwidth="0" rightmargin="0" topmargin="0" bgcolor="#e6e6e7">
<table width="100%" cellpadding="0" cellspacing="0" border="0" align="center" bgcolor="#e6e6e7" style="background-color: #e6e6e7;"><!-- wrapper -->
<tr>
<td bgcolor="#e6e6e7">
<table width="100%" cellpadding="0" cellspacing="0" border="0">
<tr>
<td valign="top" bgcolor="#595959">
<table width="99%" cellpadding="0" cellspacing="0" border="0" align="left" bgcolor="#595959"><!-- header -->
<tr>
<td height="25">
</td>
</tr>
<tr>
<td width="33%" style="padding-left: 20px;" class="mobileCell">
<table width="105" cellpadding="0" cellspacing="0" border="0" align="left" class="logoCenter">
<tr>
<td>
<img src="http://news.yfish.co.uk/repository/news.yfish.co.uk/34/14553/logo.png" width="105" height="36" alt="THINK OUTSIDE THE TANK" border="0" style="display: block; border: 0;" class="img-scale">
</td>
</tr>
</table>
</td>
<td width="33%" align="center" class="mobileCell">
<table width="91" cellpadding="0" cellspacing="0" border="0" align="center"><!-- social -->
<tr>
<td>
<img src="http://news.yfish.co.uk/repository/news.yfish.co.uk/34/14553/facebook.png" width="13" height="21" alt="Like us on Facebook" border="0" style="display: block; border: 0;">
</td>
<td width="20">
</td>
<td>
<img src="http://news.yfish.co.uk/repository/news.yfish.co.uk/34/14553/twitter.png" width="22" height="15" alt="Follow us Twitter" border="0" style="display: block; border: 0;">
</td>
<td width="20">
</td>
<td>
<img src="http://news.yfish.co.uk/repository/news.yfish.co.uk/34/14553/mail.png" width="16" height="11" alt="Contact us!" border="0" style="display: block; border: 0;">
</td>
</tr>
</table><!-- end social -->
</td>
<td width="33%" style="font-family: 'humanst', arial, helvetica, sans-serif; font-size: 11px; color: #ffffff; line-height: 15px; text-align: right; vertical-align: middle; padding-right: 20px;" valign="middle" class="mobileHide">
It's a crime, not to view online
</td>
</tr>
<tr class="block">
<td height="25">
</td>
</tr>
</table><!-- end header -->
</td>
</tr>
<tr>
<td bgcolor="#ffc216">
<table width="100%" cellpadding="0" cellspacing="0" border="0" align="center" bgcolor="#ffc216">
<tr>
<td height="50">
</td>
</tr>
<tr>
<td align="center">
<table width="680" cellpadding="0" cellspacing="0" border="0" align="center" class="contentWidth">
<tr>
<td align="center">
<table width="505" cellpadding="0" cellspacing="0" border="0" align="center" class="mainTitle">
<tr>
<td>
<img src="http://news.yfish.co.uk/repository/news.yfish.co.uk/34/14553/title.png" width="505" height="61" alt="Rugby World Cup" style="display: block; border: 0;" class="imgScale" id="fade">
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td height="25">
</td>
</tr>
<tr>
<td align="center">
<table width="437" cellpadding="0" cellspacing="0" border="0" align="center" class="gifScale">
<tr>
<td>
<img src="http://news.yfish.co.uk/repository/news.yfish.co.uk/34/14553/flag.gif" width="437" height="233" alt="Rugby" style="display: block; border: 0;" class="imgScale" id="fadeUp">
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td height="30">
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td height="25">
</td>
</tr>
<tr>
<td align="center">
<table width="680" cellpadding="0" cellspacing="0" border="0" align="center" bgcolor="#ffffff" class="fullWidth">
<tr>
<td height="50" bgcolor="#ffffff">
</td>
</tr>
<tr>
<td bgcolor="#ffffff">
<table width="356" cellpadding="0" cellspacing="0" border="0" align="center" class="mobileTitle">
<tr>
<td>
<img src="http://news.yfish.co.uk/repository/news.yfish.co.uk/34/14553/titletwo.png" width="356" height="52" alt="Join us on the 19th September" style="display: block; border: 0;" class="imgScale">
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td height="25" bgcolor="#ffffff">
</td>
</tr>
<tr>
<td style="font-family: georgia, verdana, sans-serif; font-size: 18px; line-height: 22px; color: #424242; text-align: center; font-style: italic;" bgcolor="#ffffff">
Your V.I.P invitation
</td>
</tr>
<tr>
<td height="25" bgcolor="#ffffff">
</td>
</tr>
<tr>
<td bgcolor="#ffffff">
<table width="520" cellpadding="0" cellspacing="0" border="0" align="center" class="contentWidth">
<tr>
<td style="font-family: 'humanst', arial, helvetica, sans-serif; font-size: 13px; line-height: 17px; color: #424242; text-align: left;" class="center">
Previewer I’d love if you could join me at our Yellow Fish table for an afternoon and night of hospitality, Yellow Fish style!<br><br>
Aside of full hospitality and category A seats at the fabulous AMEX stadium, I’d like to invite you to stay overnight in Brighton, provide you with transfers to/from the match, enjoy a bit of Brighton nightlife and then brunch on Sunday before you head off. All you have to do is get to Brighton!<br><br>
Kick off is at 16:45 so I’d plan for being in to Brighton around lunch time and once I have more information I’ll firm up details.
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td height="25" bgcolor="#ffffff">
</td>
</tr>
<tr>
<td align="center" bgcolor="#ffffff">
<table width="520" cellpadding="0" cellspacing="0" border="0" align="center" class="contentWidth">
<tr>
<td width="50%" valign="top" class="fullCell" id="padding">
<table width="248" cellpadding="0" cellspacing="0" border="0" align="left" class="centerTable">
<tr>
<td>
<img src="http://news.yfish.co.uk/repository/news.yfish.co.uk/34/14553/attending.png" width="248" height="45" alt="I can attend" style="display: block; border: 0;">
</td>
</tr>
</table>
</td>
<td width="50%" valign="top" class="fullCell">
<table width="248" cellpadding="0" cellspacing="0" border="0" align="right" class="centerTable">
<tr>
<td>
<img src="http://news.yfish.co.uk/repository/news.yfish.co.uk/34/14553/unable.png" width="248" height="45" alt="I'm unable to attend" style="display: block; border: 0;">
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td height="25" bgcolor="#ffffff">
</td>
</tr>
<tr>
<td bgcolor="#ffffff">
<table width="520" cellpadding="0" cellspacing="0" border="0" align="center" class="contentWidth">
<tr>
<td style="font-family: 'humanst', arial, helvetica, sans-serif; font-size: 13px; line-height: 17px; color: #424242; text-align: left;" class="center">
It should be great fun, a great game watching the Bokkers in Brighton and I really hope you can join me.<br><br>
Best
</td>
</tr>
<tr>
<td>
</td>
</tr>
<tr>
<td>
<table width="112" cellpadding="0" cellspacing="0" border="0" align="left" class="centerTable">
<tr>
<td>
<img src="http://news.yfish.co.uk/repository/news.yfish.co.uk/34/14553/maria.png" width="112" height="33" alt="Maria" style="display: block; border: 0;">
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td height="100" bgcolor="#ffffff">
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td height="25">
</td>
</tr>
<tr>
<td bgcolor="#595959">
<table width="680" cellpadding="0" cellspacing="0" border="0" align="center" bgcolor="#595959" class="fullWidth"><!-- footer -->
<tr>
<td height="25">
</td>
</tr>
<tr>
<td align="center">
<table width="105" cellpadding="0" cellspacing="0" border="0" align="center">
<tr>
<td>
<img src="http://news.yfish.co.uk/repository/news.yfish.co.uk/34/14553/logo.png" width="105" height="36" alt="THINK OUTSIDE THE TANK" border="0" style="display: block; border: 0;">
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td height="25">
</td>
</tr>
<tr>
<td style="font-family: arial, helvetica, sans-serif; font-size: 11px; line-height: 15px; color: #ffffff; text-align: center;">
Tel +44 (0) 1273 223 500 | Fax +44 (0) 1273 323 257 | contact#yfish.co.uk<br><br>
Copyright © 2014 Yellow Fish
</td>
</tr>
<tr>
<td height="25">
</td>
</tr>
</table><!-- end footer -->
</td>
</tr>
</table>
</td>
</tr>
</table><!-- end wrapper -->
</body>
</html>
I've tried removing all other queries and also tried altering Query widths. No luck!
Thanks in advance
Unfortunately, nobody has been able to provide me with a solution.
Fortunately, I have figrued it out. IOS 8 DOES NOT like commas in media queries.
When removing the comma:
#media screen and (max-width: 480px), and screen (max-device-width: 480px) {}
to
#media screen and (max-width: 480px) and screen (max-device-width: 480px) {}
This fixes everything. However, the comma did not cause issues on IOS 7
The default iOS 7 (iOS 7.1.1) mail app won't render this table correctly. Chrome, Firefox, and Safari (most recent versions) all render the desktop view and the mobile view perfectly. Internet Explorer renders the desktop view correctly but not the mobile view (which is fine). iOS Safari renders the mobile view perfectly. Here is a JSFiddle which shows it working properly when you resize it. Here is a screenshot of how it renders in iOS Mail.
HTML
<div id="responsive-table">
<table class="body-copy" style="font-size:14px; color:#666666; font-weight:normal; font-family: HelveticaNeue, sans-serif; line-height: 130%;">
<thead>
<tr>
<th>Item #</th>
<th>Description</th>
<th>Qty</th>
<th>Price</th>
<th>Total</th>
</tr>
</thead>
<tbody>
<tr>
<td>#####1</td>
<td>Item Description goes here I</td>
<td>1</td>
<td>$9.49</td>
<td>$9.49</td>
</tr>
<tr>
<td>#####2</td>
<td>Item Description goes here II</td>
<td>2</td>
<td>$9.99</td>
<td>$19.98</td>
</tr>
<tr>
<td>#####3</td>
<td>Item Description goes here III</td>
<td>4</td>
<td>$3.79</td>
<td>$15.16</td>
</tr>
<tr>
<td>#####4</td>
<td>Item Description goes here IV</td>
<td>1</td>
<td>$17.94</td>
<td>$17.94</td>
</tr>
<tr>
<td>#####5</td>
<td>Item Description goes here V</td>
<td>3</td>
<td>$4.99</td>
<td>$14.97</td>
</tr>
</tbody>
</table>
</div>
CSS
#media screen and (max-width: 480px) {
/* Force table to not be like tables anymore */
#responsive-table table, thead, tbody, th, td, tr {
display: block;
}
/* Hide table headers (but not display: none;, for accessibility) */
#responsive-table thead tr {
position: absolute;
top: -9999px;
left: -9999px;
}
#responsive-table tr {
border: 1px solid #ccc;
margin-bottom: 25px;
}
#responsive-table td {
/* Behave like a "row" */
border: none;
border-bottom: 1px solid #eee;
position: relative;
padding-left: 42% !important;
}
#responsive-table td:before {
position: absolute;
/* Top/left values mimic padding */
top: 6px;
left: 6px;
width: 45%;
padding-right: 10px;
}
#responsive-table td:nth-of-type(1):before {
content:"Item #";
}
#responsive-table td:nth-of-type(2):before {
content:"Description";
}
#responsive-table td:nth-of-type(3):before {
content:"Quantity";
}
#responsive-table td:nth-of-type(4):before {
content:"Price";
}
#responsive-table td:nth-of-type(5):before {
content:"Total";
}
}
#responsive-table{margin:0 0 20px 0;}
#responsive-table table{width:100%;border-collapse:collapse;}
#responsive-table th{background:#43904B;font-weight:bold;color:#FFFFFF;}
#responsive-table td,th{padding:7px 16px;text-align:left;border:0;border-style:solid;border-bottom:thin solid #E6E6E6;}
Some things I have tried:
Sending the email through Apple iCloud mail to the same iPhone. Result: No change.
Viewing the email in the Gmail iOS app. Result: Renders perfectly.
Removed all comments (you never know). Result: No change.
Changed <meta name="viewport" content="width=320, target-densitydpi=device-dpi"> to <meta name="viewport" content="width=device-width, initial-scale=1.0"> Result: No change.
Misc.
If it's any help, this is what useragentstring.com tells me the user agent is for the mail app (I sent myself an email with it in an iframe. No clue if this is correct procedure.).
Mozilla/5.0 (iPhone; CPU iPhone OS 7_1_1 like Mac OS X) AppleWebKit/537.51.2 (KHTML, like Gecko) Mobile/11D201
Which is missing the bit about Safari at the end when you use the browser to view the page.
Mozilla/5.0 (iPhone; CPU iPhone OS 7_1_1 like Mac OS X) AppleWebKit/537.51.2 (KHTML, like Gecko) Version/7.0 Mobile/11D201 Safari/9537.53
For the curious, I started with this.
Updates
Added word-wrap: normal !important; to #responsive-table td {} which fixes the vertical text glitch.
Changing position: relative; to position: absolute; results in the following screenshot. This is not what I want, but the Mail app does render it the same way the browser does. It shows that the Mail app does not like position: relative;.
The reason your having trouble is because your using a lot of code which is just plain not supported in email clients. It's easy to make something look good in a browser, when you code for email you've gotta remember to simplify your code to the extreme. No fancy stuff.
Without getting too much into the subject.. you shouldn't use any code that didn't exist when XHTML1 was the standard because most email clients are based on XHTML1 doctype. And you should also try to do as much as humanly possible in HTML rather than CSS because CSS in email sucks.
Things I changed to make your code work:
Styling is defined on each cell because inherence in email is not reliable.
Border styling was removed in favor of the HTML table attributes rules=rows frame=box which produce the same affect
Line-height was converted to a pixel value rather than a percentage because you'll find percentage values are buggy in email sometimes, expecially line-height (which won't work in outlook)
All the advanced CSS you were using was removed because it's totally unsupported in email and just plain wasn't necessary anyway.
CSS positioning properties are not supported (top, right, bottom,left,absolute,relative,etc..)
Here's your complete code. I didn't spend the time matching your content exactly, you'll have to do that yourself. I just duplicated the same section three times to prove the example for you.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<style type="text/css">
html,body {width:100% !important;-webkit-text-size-adjust:none;margin:0;}
body, td{-webkit-text-size-adjust:none;}
.ReadMsgBody, .ExternalClass {width: 100% !important;background-color:#ffffff;}
.ExternalClass * {line-height: 100%}
table { border-collapse:collapse;mso-table-lspace:0pt;mso-table-rspace:0pt;}
table td {border-collapse: collapse;}
table.responsive {width:600px;}
#media screen and (max-device-width: 600px), screen and (max-width: 600px) {
table[class="responsive"]{width:100%;}
}
</style>
</head>
<body bgcolor="#ffffff" border="0" style="min-width:100%;margin-top:0;margin-bottom:0;margin-left:0;margin-right:0;padding-top:0;padding-bottom:0;padding-left:0;padding-right:0;color:#666666;font-family:Arial,sans-serif;">
<center>
<table width="100%" bgcolor="#ffffff" border="0" cellpadding="0" cellspacing="0">
<tr>
<td align="center" valign="top">
<table border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td>
<table align="center" class="responsive" rules=rows frame=box style="font-size:14px; color:#666666; font-weight:normal; font-family: HelveticaNeue, sans-serif; line-height: 130%;">
<tr>
<td width="90" style="font-family:'HelveticaNeue',Arial,sans-serif;color:#666666;font-size:14px;line-height:23px;"><b>Item #</b></th>
<td style="font-family:'HelveticaNeue',Arial,sans-serif;color:#666666;font-size:14px;line-height:23px;">#####1</td>
</tr>
<tr>
<td width="90" style="font-family:'HelveticaNeue',Arial,sans-serif;color:#666666;font-size:14px;line-height:23px;"><b>Description</b></td>
<td style="font-family:'HelveticaNeue',Arial,sans-serif;color:#666666;font-size:14px;line-height:23px;">Item Description goes here</td>
</tr>
<tr>
<td width="90" style="font-family:'HelveticaNeue',Arial,sans-serif;color:#666666;font-size:14px;line-height:23px;"><b>Qty</b></td>
<td style="font-family:'HelveticaNeue',Arial,sans-serif;color:#666666;font-size:14px;line-height:23px;">1</td>
</tr>
<tr>
<td width="90" style="font-family:'HelveticaNeue',Arial,sans-serif;color:#666666;font-size:14px;line-height:23px;"><b>Price</b></td>
<td style="font-family:'HelveticaNeue',Arial,sans-serif;color:#666666;font-size:14px;line-height:23px;">$9.49</td>
</tr>
<tr>
<td width="90" style="font-family:'HelveticaNeue',Arial,sans-serif;color:#666666;font-size:14px;line-height:23px;"><b>Total</b></td>
<td style="font-family:'HelveticaNeue',Arial,sans-serif;color:#666666;font-size:14px;line-height:23px;">$9.49</td>
</tr>
</table>
<table border="0" cellpadding="5" cellspacing="0"><tr><td height="5"><table border="0" cellpadding="0" cellspacing="0"><tr><td></td></tr></table></td></tr></table>
<table rules=rows frame=box width="100%" style="max-width:600px;font-size:14px; color:#666666; font-weight:normal; font-family: HelveticaNeue, sans-serif; line-height: 130%;">
<tr>
<td width="90" style="font-family:'HelveticaNeue',Arial,sans-serif;color:#666666;font-size:14px;line-height:23px;"><b>Item #</b></th>
<td style="font-family:'HelveticaNeue',Arial,sans-serif;color:#666666;font-size:14px;line-height:23px;">#####1</td>
</tr>
<tr>
<td width="90" style="font-family:'HelveticaNeue',Arial,sans-serif;color:#666666;font-size:14px;line-height:23px;"><b>Description</b></td>
<td style="font-family:'HelveticaNeue',Arial,sans-serif;color:#666666;font-size:14px;line-height:23px;">Item Description goes here</td>
</tr>
<tr>
<td width="90" style="font-family:'HelveticaNeue',Arial,sans-serif;color:#666666;font-size:14px;line-height:23px;"><b>Qty</b></td>
<td style="font-family:'HelveticaNeue',Arial,sans-serif;color:#666666;font-size:14px;line-height:23px;">1</td>
</tr>
<tr>
<td width="90" style="font-family:'HelveticaNeue',Arial,sans-serif;color:#666666;font-size:14px;line-height:23px;"><b>Price</b></td>
<td style="font-family:'HelveticaNeue',Arial,sans-serif;color:#666666;font-size:14px;line-height:23px;">$9.49</td>
</tr>
<tr>
<td width="90" style="font-family:'HelveticaNeue',Arial,sans-serif;color:#666666;font-size:14px;line-height:23px;"><b>Total</b></td>
<td style="font-family:'HelveticaNeue',Arial,sans-serif;color:#666666;font-size:14px;line-height:23px;">$9.49</td>
</tr>
</table>
<table border="0" cellpadding="5" cellspacing="0"><tr><td height="5"><table border="0" cellpadding="0" cellspacing="0"><tr><td></td></tr></table></td></tr></table>
<table rules=rows frame=box width="100%" style="max-width:600px;font-size:14px; color:#666666; font-weight:normal; font-family: HelveticaNeue, sans-serif; line-height: 130%;">
<tr>
<td width="90" style="font-family:'HelveticaNeue',Arial,sans-serif;color:#666666;font-size:14px;line-height:23px;"><b>Item #</b></th>
<td style="font-family:'HelveticaNeue',Arial,sans-serif;color:#666666;font-size:14px;line-height:23px;">#####1</td>
</tr>
<tr>
<td width="90" style="font-family:'HelveticaNeue',Arial,sans-serif;color:#666666;font-size:14px;line-height:23px;"><b>Description</b></td>
<td style="font-family:'HelveticaNeue',Arial,sans-serif;color:#666666;font-size:14px;line-height:23px;">Item Description goes here</td>
</tr>
<tr>
<td width="90" style="font-family:'HelveticaNeue',Arial,sans-serif;color:#666666;font-size:14px;line-height:23px;"><b>Qty</b></td>
<td style="font-family:'HelveticaNeue',Arial,sans-serif;color:#666666;font-size:14px;line-height:23px;">1</td>
</tr>
<tr>
<td width="90" style="font-family:'HelveticaNeue',Arial,sans-serif;color:#666666;font-size:14px;line-height:23px;"><b>Price</b></td>
<td style="font-family:'HelveticaNeue',Arial,sans-serif;color:#666666;font-size:14px;line-height:23px;">$9.49</td>
</tr>
<tr>
<td width="90" style="font-family:'HelveticaNeue',Arial,sans-serif;color:#666666;font-size:14px;line-height:23px;"><b>Total</b></td>
<td style="font-family:'HelveticaNeue',Arial,sans-serif;color:#666666;font-size:14px;line-height:23px;">$9.49</td>
</tr>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</table>
</center>
</body>
</html>
Test Results
iOS Mail
Gmail
AOL
Yahoo
Try max-device-width instead of max-width in your media query. Start with a generous number like 10000 to see if you can get the media query to trigger at all. If it never triggers under any circumstance, there may be something preventing media queries working on your device.
CSS Position, top, left and content won't work in most clients either. Mac has the most generous support however as they use webkit to render emails.
UPDATE:
Here is a basic example of one way to do a list responsively in html email. The trick is to toggle width:100%; display:block; on your <td> elements. This is tested and it looks great in Litmus on all major clients that support media queries.
<!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></title>
<style type="text/css">
/* Client-specific Styles */
#outlook a {padding:0;}
body{width:100% !important; -webkit-text-size-adjust:100%; -ms-text-size-adjust:100%; margin:0; padding:0;} /* force default font sizes */
.ExternalClass {width:100%;} .ExternalClass, .ExternalClass p, .ExternalClass span, .ExternalClass font, .ExternalClass td, .ExternalClass div {line-height: 100%;} /* Hotmail */
a:active, a:visited, a[href^="tel"], a[href^="sms"] { text-decoration: none; color: #005288 !important; pointer-events: auto; cursor: default;}
table td {border-collapse: collapse;}
#media only screen and (max-width: 600px), screen and (max-device-width: 600px){
table[class="main"] {
width:100% !important;
}
td[class="switch"], td[class="switchA"], td[class="switchB"] {
width:92% !important; /* width needs to be smaller that 100% because of borders */
display:block !important;
}
td[class="switchA"] {
border-top:1px solid #CCCCCC !important;
}
td[class="switchB"] {
border-left:1px solid #CCCCCC !important;
border-top:0;
}
tr[class="spacer"] {
display:block !important;
}
}
</style>
</head>
<body style="margin: 0px; padding: 0px; -webkit-text-size-adjust:none; -ms-text-size-adjust:none;" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" bgcolor="#FFFFFF"><table bgcolor="#252525" width="100%" border="0" align="center" cellpadding="0" cellspacing="0"><tr><td valign="top" align="center" style="padding-top:30px; padding-bottom:30px;">
<table width="600" class="main" border="0" cellpadding="0" cellspacing="0" bgcolor="#FFFFFF">
<tr>
<td width="5%" align="center" bgcolor="#FFFFFF">
</td>
<td width="90%">
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td bgcolor="#FFFFFF" align="left" style="font-family: Arial, Helvetica, sans-serif; font-size: 14px; color: #000000; padding-top:40px; padding-bottom:40px;">
Some Content Here...
</td>
</tr>
<tr>
<td bgcolor="#FFFFFF">
<table width="100%" border="0" cellpadding="0" cellspacing="0" bgcolor="#FAFAFA">
<tr>
<td width="68" class="switch" style="padding:10px; border:1px solid #CCCCCC;" bgcolor="#EEEEEE">
Item #
</td>
<td width="149" class="switchB" style="padding:10px; border:1px solid #CCCCCC; border-left:0;" bgcolor="#FAFAFA">
Description
</td>
<td width="99" style="padding:10px; border:1px solid #CCCCCC; border-left:0;" class="switchB" bgcolor="#EEEEEE">
Quantity
</td>
<td width="99" class="switchB" style="padding:10px; border:1px solid #CCCCCC; border-left:0;" bgcolor="#FAFAFA">
Price
</td>
<td width="119" style="padding:10px; border:1px solid #CCCCCC; border-left:0;" class="switchB" bgcolor="#EEEEEE">
Total
</td>
</tr>
<tr class="spacer" style="display:none;">
<td height="30" bgcolor="#FFFFFF">
</td>
</tr>
<tr>
<td width="68" class="switchA" style="padding:10px; border:1px solid #CCCCCC; border-top:0;" bgcolor="#EEEEEE">
Item #
</td>
<td width="149" class="switchB" style="padding:10px; border:1px solid #CCCCCC; border-top:0; border-left:0;" bgcolor="#FAFAFA">
Description
</td>
<td width="99" style="padding:10px; border:1px solid #CCCCCC; border-top:0; border-left:0;" class="switchB" bgcolor="#EEEEEE">
Quantity
</td>
<td width="99" class="switchB" style="padding:10px; border:1px solid #CCCCCC; border-top:0; border-left:0;" bgcolor="#FAFAFA">
Price
</td>
<td width="119" style="padding:10px; border:1px solid #CCCCCC; border-top:0; border-left:0;" class="switchB" bgcolor="#EEEEEE">
Total
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td bgcolor="#FFFFFF" align="left" style="font-family: Arial, Helvetica, sans-serif; font-size: 14px; color: #000000; padding-top:40px; padding-bottom:40px;">
More Content Here...
</td>
</tr>
</table>
</td>
<td width="5%" align="center" bgcolor="#FFFFFF">
</td>
</tr>
</table>
</td></tr></table></body></html>
LITMUS RESULTS:
Outlook 2000:
iPhone 5:
Android 4.2:
I figured it out! Here is a JSFiddle (with a little extra stuff from my full email).
Works in:
Gmail web view
OS X Mavericks
Chrome
Firefox
Safari
Microsoft Outlook 2011
Internet Explorer (Windows 7 virtual machine. Responsive code does not work)
iOS 7
Chrome
Safari
Mail
Mailbox (Loads spacer images with mobile width, renders rest as desktop view)
Windows XP
Microsoft Outlook 2007 (Really close to working. I haven't had time to tweak it for this yet, but it looks like it is just a few pixels too wide.)
HTML
<!-- COLUMN TITLES -->
<table id="background-table" border="0" cellpadding="0" cellspacing="0" width="100%" style="mso-table-lspace:0;mso-table-rspace:0">
<tr>
<td align="center" bgcolor="#fbfbf8">
<table class="w640" border="0" cellpadding="0" cellspacing="0" width="640" style="mso-table-lspace:0;mso-table-rspace:0">
<tr>
<td class="w640 hide" align="left" width="640" bgcolor="#FFFFFF">
<table class="w280" width="600" border="0" cellpadding="0" cellspacing="0" align="center" style="mso-table-lspace:0;mso-table-rspace:0">
<tr>
<td>
<table width="77" border="0" align="left" cellpadding="0" cellspacing="0" class="w80" style="font-family:Arial, Helvetica, sans-serif; font-size:14px; color:#006600; float:left; mso-table-lspace:0;mso-table-rspace:0;">
<tr>
<td><span class="label" style="margin:5px 0;"></span><span class="content" style="font-family:HelveticaNeue, sans-serif; font-size:14px; font-weight:bold; font-style:normal; text-align:center; color:#006600; margin:5px 5px 5px 5px; line-height:18px; padding:0;">Item #</span>
</td>
</tr>
</table>
<table width="312" border="0" align="left" cellpadding="0" cellspacing="0" class="w80" style="font-family:Arial, Helvetica, sans-serif; font-size:14px; color:#006600; float:left; mso-table-lspace:0;mso-table-rspace:0;">
<tr>
<td width="203"><span class="label" style="margin:5px 0;"></span><span class="content" style="font-family:HelveticaNeue, sans-serif; font-size:14px; font-weight:bold; font-style:normal; text-align:center; color:#006600; margin:5px 5px 5px 5px; line-height:18px; padding:0;">Description</span>
</td>
</tr>
</table>
<table width="44" border="0" align="left" cellpadding="0" cellspacing="0" class="w80" style="font-family:Arial, Helvetica, sans-serif; font-size:14px; color:#006600; float:left; mso-table-lspace:0;mso-table-rspace:0;">
<tr>
<td width="86"><span class="label" style="margin:5px 0;"></span><span class="content" style="font-family:HelveticaNeue, sans-serif; font-size:14px; font-weight:bold; font-style:normal; text-align:center; color:#006600; margin:5px 5px 5px 5px; line-height:18px; padding:0;">Qty</span>
</td>
</tr>
</table>
<table width="92" border="0" align="left" cellpadding="0" cellspacing="0" class="w80" style="font-family:Arial, Helvetica, sans-serif; font-size:14px; color:#006600; float:left; mso-table-lspace:0;mso-table-rspace:0;">
<tr>
<td><span class="label" style="margin:5px 0;"></span><span class="content" style="font-family:HelveticaNeue, sans-serif; font-size:14px; font-weight:bold; font-style:normal; text-align:center; color:#006600; margin:5px 5px 5px 5px; line-height:18px; padding:0;">Price</span>
</td>
</tr>
</table>
<table width="70" border="0" align="left" cellpadding="0" cellspacing="0" class="w80" style="font-family:Arial, Helvetica, sans-serif; font-size:14px; color:#006600; float:left; mso-table-lspace:0;mso-table-rspace:0;">
<tr>
<td><span class="label" style="margin:5px 0;"></span><span class="content" style="font-family:HelveticaNeue, sans-serif; font-size:14px; font-weight:bold; font-style:normal; text-align:center; color:#006600; margin:5px 5px 5px 5px; line-height:18px; padding:0;">Total</span>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td class="hide" width="640" bgcolor="#FFFFFF">
<table class="w640" width="640" align="center" border="0" cellpadding="0" cellspacing="0" style="mso-table-lspace:0;mso-table-rspace:0">
<tr>
<td>
<div align="center" style="display:inline-block; margin:6px 0 6px 0;">
<img src="https://i.imgur.com/z0nMImo.jpg" style="display:inline" alt="#" align="top" border="0">
</div>
</td>
</tr>
</table>
</td>
</tr>
<!-- END COLUMN TITLES -->
<!--START PRODUCTS-->
<tr class="product">
<td class="w640" align="left" width="640" bgcolor="#FFFFFF">
<table class="w280" width="600" border="0" cellpadding="0" cellspacing="0" align="center" style="mso-table-lspace:0;mso-table-rspace:0">
<tr>
<td>
<table width="77" border="0" align="left" cellpadding="0" cellspacing="0" class="w80" style="font-family:Arial, Helvetica, sans-serif; font-size:14px; color:#666666; float:left; mso-table-lspace:0;mso-table-rspace:0;">
<tr>
<td class="addItemlabel"><span class="label" style="margin:5px 0;"></span><span class="content" style="font-family:HelveticaNeue, sans-serif; font-size:14px; color:#666666; font-style:normal; text-align:center; margin:5px 5px 5px 5px; line-height:18px; padding:0;">#####1</span>
</td>
</tr>
</table>
<table width="312" border="0" align="left" cellpadding="0" cellspacing="0" class="w80" style="font-family:Arial, Helvetica, sans-serif; font-size:14px; float:left; mso-table-lspace:0;mso-table-rspace:0;">
<tr>
<td width="203" class="addDesclabel"><span class="label" style="margin:5px 0; font-size:14px; color:#666666;"></span><span class="content" style="font-family:HelveticaNeue, sans-serif; font-size:14px; color:#666666; font-weight:bold; font-style:normal; text-align:center; color:#006600; margin:5px 5px 5px 5px; line-height:18px; padding:0;">Product Description 1</span>
</td>
</tr>
</table>
<table width="44" border="0" align="left" cellpadding="0" cellspacing="0" class="w80" style="font-family:Arial, Helvetica, sans-serif; font-size:14px; color:#666666; float:left; mso-table-lspace:0;mso-table-rspace:0;">
<tr>
<td width="86" class="addQtylabel"><span class="label" style="margin:5px 0; font-size:14px; color:#666666;"></span><span class="content" style="font-family:HelveticaNeue, sans-serif; font-size:14px; color:#666666; font-style:normal; text-align:center; margin:5px 5px 5px 5px; line-height:18px; padding:0;">12</span>
</td>
</tr>
</table>
<table width="92" border="0" align="left" cellpadding="0" cellspacing="0" class="w80" style="font-family:Arial, Helvetica, sans-serif; font-size:14px; color:#666666; float:left; mso-table-lspace:0;mso-table-rspace:0;">
<tr>
<td class="addSinglelabel"><span class="label" style="margin:5px 0; font-size:14px; color:#666666;"></span><span class="content" style="font-family:HelveticaNeue, sans-serif; font-size:14px; color:#666666; font-style:normal; text-align:center; margin:5px 5px 5px 5px; line-height:18px; padding:0;">$9.99</span>
</td>
</tr>
</table>
<table width="70" border="0" align="left" cellpadding="0" cellspacing="0" class="w80" style="font-family:Arial, Helvetica, sans-serif; font-size:14px; color:#666666; float:left; mso-table-lspace:0;mso-table-rspace:0;">
<tr>
<td class="addTotallabel"><span class="label" style="margin:5px 0; font-size:14px; color:#666666;"></span><span class="content" style="font-family:HelveticaNeue, sans-serif; font-size:14px; color:#666666; font-style:normal; text-align:center; margin:5px 5px 5px 5px; line-height:18px; padding:0;">$119.88</span>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td class="hide" width="640" bgcolor="#FFFFFF">
<table class="w640" width="640" align="center" border="0" cellpadding="0" cellspacing="0" style="mso-table-lspace:0;mso-table-rspace:0">
<tr>
<td>
<div align="center" style="display:inline-block; margin:6px 0 6px 0;">
<img src="https://i.imgur.com/z0nMImo.jpg" style="display:inline" alt="#" align="top" border="0">
</div>
</td>
</tr>
</table>
</td>
</tr>
<!--END ROW 1-->
<!--START ROW 2-->
<tr class="product">
<td class="w640" align="left" width="640" bgcolor="#FFFFFF">
<table class="w280" width="600" border="0" cellpadding="0" cellspacing="0" align="center" style="mso-table-lspace:0;mso-table-rspace:0">
<tr>
<td>
<table width="77" border="0" align="left" cellpadding="0" cellspacing="0" class="w80" style="font-family:Arial, Helvetica, sans-serif; font-size:14px; color:#666666; float:left; mso-table-lspace:0;mso-table-rspace:0;">
<tr>
<td class="addItemlabel"><span class="label" style="margin:5px 0;"></span><span class="content" style="font-family:HelveticaNeue, sans-serif; font-size:14px; color:#666666; font-style:normal; text-align:center; margin:5px 5px 5px 5px; line-height:18px; padding:0;">#####2</span>
</td>
</tr>
</table>
<table width="312" border="0" align="left" cellpadding="0" cellspacing="0" class="w80" style="font-family:Arial, Helvetica, sans-serif; font-size:14px; float:left; mso-table-lspace:0;mso-table-rspace:0;">
<tr>
<td width="203" class="addDesclabel"><span class="label" style="margin:5px 0; font-size:14px; color:#666666;"></span><span class="content" style="font-family:HelveticaNeue, sans-serif; font-size:14px; color:#666666; font-weight:bold; font-style:normal; text-align:center; color:#006600; margin:5px 5px 5px 5px; line-height:18px; padding:0;">Product Description 2</span>
</td>
</tr>
</table>
<table width="44" border="0" align="left" cellpadding="0" cellspacing="0" class="w80" style="font-family:Arial, Helvetica, sans-serif; font-size:14px; color:#666666; float:left; mso-table-lspace:0;mso-table-rspace:0;">
<tr>
<td width="86" class="addQtylabel"><span class="label" style="margin:5px 0; font-size:14px; color:#666666;"></span><span class="content" style="font-family:HelveticaNeue, sans-serif; font-size:14px; color:#666666; font-style:normal; text-align:center; margin:5px 5px 5px 5px; line-height:18px; padding:0;">1</span>
</td>
</tr>
</table>
<table width="92" border="0" align="left" cellpadding="0" cellspacing="0" class="w80" style="font-family:Arial, Helvetica, sans-serif; font-size:14px; color:#666666; float:left; mso-table-lspace:0;mso-table-rspace:0;">
<tr>
<td class="addSinglelabel"><span class="label" style="margin:5px 0; font-size:14px; color:#666666;"></span><span class="content" style="font-family:HelveticaNeue, sans-serif; font-size:14px; color:#666666; font-style:normal; text-align:center; margin:5px 5px 5px 5px; line-height:18px; padding:0;">$6.99</span>
</td>
</tr>
</table>
<table width="70" border="0" align="left" cellpadding="0" cellspacing="0" class="w80" style="font-family:Arial, Helvetica, sans-serif; font-size:14px; color:#666666; float:left; mso-table-lspace:0;mso-table-rspace:0;">
<tr>
<td class="addTotallabel"><span class="label" style="margin:5px 0; font-size:14px; color:#666666;"></span><span class="content" style="font-family:HelveticaNeue, sans-serif; font-size:14px; color:#666666; font-style:normal; text-align:center; margin:5px 5px 5px 5px; line-height:18px; padding:0;">$6.99</span>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td class="hide" width="640" bgcolor="#FFFFFF">
<table class="w640" width="640" align="center" border="0" cellpadding="0" cellspacing="0" style="mso-table-lspace:0;mso-table-rspace:0">
<tr>
<td>
<div align="center" style="display:inline-block; margin:6px 0 6px 0;">
<img src="https://i.imgur.com/z0nMImo.jpg" style="display:inline" alt="#" align="top" border="0">
</div>
</td>
</tr>
</table>
</td>
</tr>
<!--END ROW 2 -->
<!--START ROW 4-->
<tr class="product">
<td class="w640" align="left" width="640" bgcolor="#FFFFFF">
<table class="w280" width="600" border="0" cellpadding="0" cellspacing="0" align="center" style="mso-table-lspace:0;mso-table-rspace:0">
<tr>
<td>
<table width="77" border="0" align="left" cellpadding="0" cellspacing="0" class="w80" style="font-family:Arial, Helvetica, sans-serif; font-size:14px; color:#666666; float:left; mso-table-lspace:0;mso-table-rspace:0;">
<tr>
<td class="addItemlabel"><span class="label" style="margin:5px 0;"></span><span class="content" style="font-family:HelveticaNeue, sans-serif; font-size:14px; color:#666666; font-style:normal; text-align:center; margin:5px 5px 5px 5px; line-height:18px; padding:0;">#####4</span>
</td>
</tr>
</table>
<table width="312" border="0" align="left" cellpadding="0" cellspacing="0" class="w80" style="font-family:Arial, Helvetica, sans-serif; font-size:14px; float:left; mso-table-lspace:0;mso-table-rspace:0;">
<tr>
<td width="203" class="addDesclabel"><span class="label" style="margin:5px 0; font-size:14px; color:#666666;"></span><span class="content" style="font-family:HelveticaNeue, sans-serif; font-size:14px; color:#666666; font-weight:bold; font-style:normal; text-align:center; color:#006600; margin:5px 5px 5px 5px; line-height:18px; padding:0;">Product Description 4</span>
</td>
</tr>
</table>
<table width="44" border="0" align="left" cellpadding="0" cellspacing="0" class="w80" style="font-family:Arial, Helvetica, sans-serif; font-size:14px; color:#666666; float:left; mso-table-lspace:0;mso-table-rspace:0;">
<tr>
<td width="86" class="addQtylabel"><span class="label" style="margin:5px 0; font-size:14px; color:#666666;"></span><span class="content" style="font-family:HelveticaNeue, sans-serif; font-size:14px; color:#666666; font-style:normal; text-align:center; margin:5px 5px 5px 5px; line-height:18px; padding:0;">2</span>
</td>
</tr>
</table>
<table width="92" border="0" align="left" cellpadding="0" cellspacing="0" class="w80" style="font-family:Arial, Helvetica, sans-serif; font-size:14px; color:#666666; float:left; mso-table-lspace:0;mso-table-rspace:0;">
<tr>
<td class="addSinglelabel"><span class="label" style="margin:5px 0; font-size:14px; color:#666666;"></span><span class="content" style="font-family:HelveticaNeue, sans-serif; font-size:14px; color:#666666; font-style:normal; text-align:center; margin:5px 5px 5px 5px; line-height:18px; padding:0;">$9.99</span>
</td>
</tr>
</table>
<table width="70" border="0" align="left" cellpadding="0" cellspacing="0" class="w80" style="font-family:Arial, Helvetica, sans-serif; font-size:14px; color:#666666; float:left; mso-table-lspace:0;mso-table-rspace:0;">
<tr>
<td class="addTotallabel"><span class="label" style="margin:5px 0; font-size:14px; color:#666666;"></span><span class="content" style="font-family:HelveticaNeue, sans-serif; font-size:14px; color:#666666; font-style:normal; text-align:center; margin:5px 5px 5px 5px; line-height:18px; padding:0;">$19.98</span>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td class="hide" width="640" bgcolor="#FFFFFF">
<table class="w640" width="640" align="center" border="0" cellpadding="0" cellspacing="0" style="mso-table-lspace:0;mso-table-rspace:0">
<tr>
<td>
<div align="center" style="display:inline-block; margin:6px 0 6px 0;">
<img src="https://i.imgur.com/z0nMImo.jpg" style="display:inline" alt="#" align="top" border="0">
</div>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
CSS
#media screen and (max-width: 480px) {
table[class=w280], td[class=w280], img[class=w280] {
display: block !important;
width: 300px !important;
}
table[class=w640], td[class=w640], img[class=w640], .headercell {
width: 300px !important;
}
table[class*=hide], td[class*=hide], img[class*=hide], p[class*=hide], span[class*=hide] {
display: none !important;
}
img {
height: auto;
line-height: 100%;
}
table[class=w80] {
width:100% !important
}
table.w80 span.label {
text-align:left !important;
width:35%;
display:inline-block;
vertical-align:top
}
table.w80 span.content {
text-align:left !important;
display:inline-block;
width:60%;
}
table.w80 td.addItemlabel span.label:before {
content:"Item #:";
}
table.w80 td.addDesclabel span.label:before {
content:"Description:";
}
table.w80 td.addQtylabel span.label:before {
content:"Quantity:";
}
table.w80 td.addSinglelabel span.label:before {
content:"Price:";
}
table.w80 td.addTotallabel span.label:before {
content:"Total:";
}
.product {
border-bottom: solid #a7c2b1;
border-width:1px;
}
}
body {
margin: 0;
padding: 0;
width: 100% !important;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
}
body {
margin: 0;
padding: 0;
background-color: #ececec;
}
img {
display: block;
outline: none;
border: 0;
text-decoration: none;
}
table {
border-collapse: collapse;
mso-table-lspace: 0pt;
mso-table-rspace: 0pt;
}
table td, table tr {
border-collapse: collapse;
mso-table-lspace: 0pt;
mso-table-rspace: 0pt;
}
#background-table {
margin: 0;
padding: 0;
width: 100% !important;
background-color: #FFFFFF;
line-height: 100% !important;
}
body, td {
font-family:HelveticaNeue, sans-serif;
}
I have a Jenkins CI setup, and we are using Perforce as our SCM.
I have configured the Email-ext plugin to notify developers when a build breaks, and also when it is fixed.
At the moment the notification email body just uses the $DEFAULT_CONTENT, but I would really like to indicate the most recent Perforce changelist into the email content as this would be more helpful to the developers.
I'm thinking Changelist number, Changelist title and Committer.
Any ideas on how to do this?
Somewhere on the jenkins mailing list I found this template which I think does what you want.
Create a folder "email-templates" in your jenkins root directory, put the file in there and name it "p4htmlmail.jelly".
Then in your jenkins configuration put ${JELLY_SCRIPT,template="p4htmlmail"} in the DEFAULT_CONTENT field of the email-ext plugin configuration.
<j:jelly xmlns:j="jelly:core" xmlns:st="jelly:stapler" xmlns:d="jelly:define">
<link type="text/css" rel="stylesheet" href="${rooturl}static/e59dfe28/css/style.css"/>
<link type="text/css" rel="stylesheet" href="${rooturl}static/e59dfe28/css/color.css"/>
<STYLE>
a:link,a:visited {
text-decoration: underline;
<!--color: #3B5998;-->
color: #8B9DC3
}
a.success:link,a.success:visited {
text-decoration: underline;
color: #338033;
}
a.failure:link,a.failure:visited {
text-decoration: underline;
color: #900;
}
a.unstable:link,a.unstable:visited {
text-decoration: underline;
color: #F0C000;
}
<!--
body {
background-color: #DFE3EE;
}-->
.pane {
margin-top: 4px;
white-space: nowrap;
}
.pane TD {
padding: 4px 4px 3px 4px;
}
TABLE.pane {
width: 100%;
border: none;
}
TD.style1 {
color: #3B5998;
width: 10%;
}
TD.pane {
padding: 3px 4px 3px 4px;
vertical-align: middle;
}
TD.pane-header {
border-top: 1px #8B9DC3 solid;
border-bottom: 1px #8B9DC3 solid;
background-color: #DFE3EE;
font-weight: bold;
font-family: Verdana, Helvetica, sans serif;
font-size: 11px;
color: #8B9DC3;
padding-top: 10px;
padding-bottom: 10px;
}
TD.pane-header-success {
border-top: 1px #338033 solid;
border-bottom: 1px #338033 solid;
background-color: #E0FFE0;
font-weight: bold;
font-family: Verdana, Helvetica, sans serif;
font-size: 11px;
color: #338033;
padding-top: 10px;
padding-bottom: 10px;
}
TD.pane-header-failure {
border-top: 1px #900 solid;
border-bottom: 1px #900 solid;
background-color: #FCC;
font-weight: bold;
font-family: Verdana, Helvetica, sans serif;
font-size: 11px;
color: #900;
padding-top: 10px;
padding-bottom: 10px;
}
TD.pane-header-unstable {
border-top: 1px #F0C000 solid;
border-bottom: 1px #F0C000 solid;
background-color: #FFFFCE;
font-weight: bold;
font-family: Verdana, Helvetica, sans serif;
font-size: 11px;
color: #F0C000;
padding-top: 10px;
padding-bottom: 10px;
}
TH.pane {
font-weight: bold;
}
SPAN.style1 {
font-weight: bold;
color: #8B9DC3;
}
SPAN.success {
color: #338033;
}
SPAN.failure {
color: #900;
}
LI.style1 {
list-style: cirle outside;
}
LI.failure {
list-style: cirle outside;
color: #900;
}
</STYLE>
<BODY>
<j:set var="spc" value=" " />
<!-- GENERAL INFO -->
<TABLE class="pane">
<TBODY>
<TR>
<j:choose>
<j:when test="${build.result=='SUCCESS'}">
<TD colspan="2" class="pane-header-success">
<SPAN>Build Result Summary - <A class="success" href="${rooturl}${build.url}">See full build details</A></SPAN>
</TD>
</j:when>
<j:when test="${build.result=='FAILURE'}">
<TD colspan="2" class="pane-header-failure">
<SPAN>Build Result Summary - <A class="failure" href="${rooturl}${build.url}">See full build details</A></SPAN>
</TD>
</j:when>
<j:otherwise>
<TD colspan="2" class="pane-header-unstable">
<SPAN>Build Result Summary - <A class="unstable" href="${rooturl}${build.url}">See full build details</A></SPAN>
</TD>
</j:otherwise>
</j:choose>
</TR>
<TR>
<TD class="style1">Project:</TD>
<TD>${project.name}</TD>
</TR>
<TR>
<TD class="style1">Completion:</TD>
<TD>${it.timestampString}</TD>
</TR>
<TR>
<TD class="style1">Duration:</TD>
<TD>${build.durationString}</TD>
</TR>
<TR>
<TD class="style1">Status:</TD>
<TD>
<j:choose>
<j:when test="${build.result=='SUCCESS'}">
<IMG SRC="${rooturl}static/e59dfe28/images/16x16/blue.png"/>
</j:when>
<j:when test="${build.result=='FAILURE'}">
<IMG SRC="${rooturl}static/e59dfe28/images/16x16/red.png"/>
</j:when>
<j:otherwise>
<IMG SRC="${rooturl}static/e59dfe28/images/16x16/yellow.png"/>
</j:otherwise>
</j:choose>
${build.result}
</TD>
</TR>
<TR>
<TD class="style1">Help:</TD>
<TD>
Help text goes here.
</TD>
</TR>
</TBODY>
</TABLE>
<BR/>
<!-- CHANGE SET -->
<j:set var="changeSet" value="${build.changeSet}" />
<j:if test="${changeSet!=null}">
<j:set var="hadChanges" value="false" />
<TABLE class="pane">
<TBODY>
<TR>
<TD colspan="2" class="pane-header">
<SPAN>Code Changes - See full change details</SPAN>
</TD>
</TR>
<j:forEach var="cs" items="${changeSet}" varStatus="loop">
<j:set var="hadChanges" value="true" />
<j:set var="aUser" value="${cs.hudsonUser}"/>
<TR>
<TD colspan="2">
<SPAN class="style1">
Change <B>${cs.changeNumber}</B> by
<B>${aUser!=null?aUser.displayName:cs.author.displayName}: </B>
'${cs.msgAnnotated}'
</SPAN>
</TD>
</TR>
<j:forEach var="p" items="${cs.affectedFiles}">
<TR>
<TD width="2%">
<j:switch on="${p.editType.name}">
<j:case value="add">
<IMG SRC="${rooturl}plugin/perforce/icons/action-ADD.gif"/>
</j:case>
<j:case value="branch">
<IMG SRC="${rooturl}plugin/perforce/icons/action-BRANCH.gif"/>
</j:case>
<j:case value="delete">
<IMG SRC="${rooturl}plugin/perforce/icons/action-DELETE.gif"/>
</j:case>
<j:case value="edit">
<IMG SRC="${rooturl}plugin/perforce/icons/action-EDIT.gif"/>
</j:case>
<j:case value="import">
<IMG SRC="${rooturl}plugin/perforce/icons/action-IMPORT.gif"/>
</j:case>
<j:case value="integrate">
<IMG SRC="${rooturl}plugin/perforce/icons/action-INTEGRATE.gif"/>
</j:case>
<j:case value="move_add">
<IMG SRC="${rooturl}plugin/perforce/icons/action-MOVE_ADD.gif"/>
</j:case>
<j:case value="move_delete">
<IMG SRC="${rooturl}plugin/perforce/icons/action-MOVE_DELETE.gif"/>
</j:case>
<j:default>
${p.editType.name}
</j:default>
</j:switch>
</TD>
<TD><SPAN>${p.path}</SPAN></TD>
</TR>
</j:forEach>
</j:forEach>
<j:if test="${!hadChanges}">
<TR><TD colspan="2">No Changes</TD></TR>
</j:if>
</TBODY>
</TABLE>
<BR/>
</j:if>
<!-- JUNIT TEST OUTPUT -->
<j:set var="junitResultList" value="${it.JUnitTestResult}" />
<j:if test="${junitResultList.isEmpty()!=true}">
<TABLE class="pane">
<TBODY>
<TR>
<TD colspan="2" class="pane-header">
<SPAN>Unit Tests - See full test details</SPAN>
</TD>
</TR>
<j:forEach var="junitResult" items="${it.JUnitTestResult}">
<j:forEach var="packageResult" items="${junitResult.getChildren()}">
<TR>
<TD>
Name: ${packageResult.getName()}, Failed: <SPAN class="failure">${packageResult.getFailCount()}</SPAN> test(s), Passed: <SPAN class="success">${packageResult.getPassCount()}</SPAN> test(s), Skipped: ${packageResult.getSkipCount()} test(s), Total: ${packageResult.getPassCount()+packageResult.getFailCount()+packageResult.getSkipCount()} test(s)
</TD>
</TR>
<j:forEach var="failed_test" items="${packageResult.getFailedTests()}">
<TR>
<TD>
<UL>
<B>
<LI class="failure">Failed: ${failed_test.getFullName()}</LI>
</B>
</UL>
</TD>
</TR>
</j:forEach>
</j:forEach>
</j:forEach>
</TBODY>
</TABLE>
<BR/>
</j:if>
<!-- CONSOLE OUTPUT -->
<j:getStatic var="resultFailure" field="FAILURE" className="hudson.model.Result"/>
<j:if test="${build.result==resultFailure}">
<TABLE class="pane">
<TBODY>
<TR>
<TD colspan="2" class="pane-header">
<SPAN>Console Output - See full console details</SPAN>
</TD>
</TR>
<j:forEach var="line" items="${build.getLog(100)}">
<TR>
<TD>${line}</TD>
</TR>
</j:forEach>
</TBODY>
</TABLE>
<BR/>
</j:if>
</BODY>
</j:jelly>
ok so i have this address for a part of my website,
localhost:2001/?botid=Alice&template=alice
and i want to make it so what i put after that will be put into the input box on the page. So something like this,
localhost:2001/?botid=Alice&template=alice#Hello
how are you?
can anyone help out with a javascript or something?
heres the source 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">
<!--This is a simple example of an HTML chat template for Program D.-->
<head>
<!--The value associated with a bot predicate, such as
"name", is inserted wherever you use a bot element
with a name attribute that corresponds to a predicate name.-->
<title>
Dialogue with <bot name="name"/>
</title>
<!--This is a simple stylesheet to format the page.-->
<style type="text/css">
html
{
overflow: hidden;
}
p
{
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
margin-top: 10px;
margin-bottom: 5px;
margin-left: 0px;
margin-right: 10px;
text-align: left;
background: transparent;
}
.fieldlabel
{
font-weight: bold;
font-style: normal;
font-size: 14px;
color: #0000aa;
}
#userinput
{
font-weight: bold;
font-style: italic;
font-size: 14px;
color: #aa0000;
}
.botresponse
{
font-weight: bold;
font-style: italic;
font-size: 14px;
color: #00aa00;
}
.bottomtext
{
margin-top: 0px;
margin-bottom: 0px;
font-weight: normal;
font-style: italic;
font-size: 10px;
}
li p
{
margin-top: 0px;
margin-bottom: 0px;
margin-left: 20px;
margin-right: 0px;
}
ul
{
margin-top: 0px;
margin-bottom: 5px;
margin-left: 10px;
margin-right: 0px;
}
form
{
margin-top: 20px;
margin-bottom: 10px;
margin-left: 0px;
margin-right: 0px;
}
#audio
{
display: none;
}
</style>
<script type="text/javascript">
function playPause() {
var myVideo = document.getElementsByTagName('audio')[0];
if (myVideo.paused)
myVideo.play();
else
myVideo.play();
}
</script>
<script type="text/javascript">
document.getElementById('text')[0].value = window.location.hash.substring(1);
</script>
</head>
<!--The body element is set to automatically give focus to the
input field each time the document is loaded.-->
<body>
<table border="0" cellspacing="5" cellpadding="0" width="500">
<tr>
<td width="30%" valign="top">
<p class="fieldlabel">
You said:
</p>
</td>
<td width="70%" valign="top">
<p id="userinput">
<userinput/>
</p>
</td>
</tr>
<tr>
<td width="30%" valign="top">
<p class="fieldlabel">
<!--The name of the bot will be substituted here.-->
<bot name="name"/> said:
</p>
</td>
<td width="70%" valign="top">
<p class="botresponse">
<!--The bot's response will be substituted here.-->
<reply></reply><response/>
</p>
</td>
</tr>
<tr>
<td width="100%" colspan="2" valign="top">
<form method="post">
<input type="text" size="50" name="text" id="text" onkeydown="if (event.keyCode == 190) document.getElementById('go').click()" x-webkit-speech />
<input type="submit" id="go" value="Say" />
</form>
</td>
</tr>
<tr>
<td width="100%" colspan="2" valign="top">
<p class="bottomtext">
<!--Again we display the bot name, and also the hostname.-->
You are speaking with <bot name="name"/> from <hostname/>.
</p>
<p class="bottomtext">
<!--Here is an example of getting another bot predicate value (master).-->
<bot name="name"/>'s botmaster is <bot name="master"/>.
</p>
<p>
You can:
</p>
<ul>
<li>
<p>
<!--This link will request a login form.-->
log in.
</p>
</li>
<li>
<p>
<!--This link will request a new user registration form.-->
register a new username and password.
</p>
</li>
</ul>
</td>
</tr>
</table>
<audio id="audio" onended="document.forms[0].elements[0].focus();" controls="controls" autoplay="autoplay" src="http://translate.google.com/translate_tts?tl=en&q=><response/>" type="audio/mpeg"></audio>
</body>
</html>
With jQuery:
$('input').val(window.location.hash.substring(1));
Without jQuery:
document.getElementsByTagName('input')[0].value = window.location.hash.substring(1);
Either way, you have to make sure the DOM is loaded. If you want to unescape it, use decodeURIComponent E.g.:
window.addEventListener("load", function()
{
document.getElementsByTagName('input')[0].value = decodeURIComponent(window.location.hash.substring(1));
}, false);
window.location = window.location + '#' + document.getElementById('inputbox').text;