I'm trying to extract some values from an Excel. I'm using a bespoke software which converts the excel in to an html code set. I have to extract some details which actually change the location according to the layout of the document. Below is a small part of one type of a layout,
<td data-cell="D10">ORDER #</td>
<td data-cell="E10" colspan="9">SO-10415</td>
<td data-cell="N10"">DATE OF</td>
<td data-cell="O10"rowspan="2">18.01.2021</td>
And this is another layout type,
<td data-cell="A20" colspan="3">SO Number : SO0010810</td>
<td data-cell="D20" colspan="2"></td>
So I need to do a conditional check like,
if(contains(.,'ORDER #'))
then following-sibling::td[1]
else contains(.,'SO Number')/#storedvalue
Above is not correct I'm just trying to give you guys an idea what I've trying to do. I tried many ways mentioned in SO and in other sites. Below are few code lines I tried but none of them worked.
1. //tr/td[if(contains(.,'ORDER #')) then following-sibiling::td[1] else contains(.,'SO Number')]
2. //tr/td[concat(substring('ORDER', 1, number(text()='ORDER ') * string-length('ORDER')) substring('SO Number', 1, number(not(text()='ORDER') )* string-length('So Number')))]
3. //tr/td[concat(substring('ORDER #', 1, number(text()='ORDER #') * string-length('ORDER #'))]
4. (//tr/td[text()='ORDER #']/following-sibling::td[1] )| (//tr/td[not(text()='ORDER #')/#storedvalue])
Actual part of the generated code after excel run through the document mapper.
Layout type 1
<tr style="height:22px;">
<td style="padding:0 2px;text-align:center;border:1px solid #000;vertical-align:bottom;">10</td>
<td data-cell="A10" style="border-color:#000;border-top:medium solid #000000;border-left:medium solid #000000;font-family:Calibri Light;font-size:11px;font-weight:700;padding-left:2px;padding-right:2px;">BILL TO:</td>
<td data-cell="B10" style="border-color:#000;border-top:medium solid #000000;font-family:Calibri Light;font-size:11px;padding-left:2px;padding-right:2px;"></td>
<td data-cell="D10" style="border-color:#000;border-top:medium solid #000000;border-bottom:medium solid #000000;border-left:medium solid #000000;border-right:medium solid #000000;font-family:Calibri Light;font-size:11px;font-weight:700;padding-left:2px;padding-right:2px;">ORDER #</td>
<td data-cell="E10" style="border-color:#000;border-top:medium solid #000000;border-bottom:medium solid #000000;border-left:medium solid #000000;border-right:medium solid #000000;font-family:Calibri Light;font-size:16px;font-weight:700;text-align:center;padding-left:2px;padding-right:2px;" colspan="9">SO-10415</td>
<td data-cell="N10" style="border-color:#000;border-top:medium solid #000000;border-left:medium solid #000000;border-right:medium solid #000000;font-family:Calibri Light;font-size:11px;font-weight:700;padding-left:2px;padding-right:2px;">DATE OF</td>
<td data-cell="O10" style="mso-number-format:'M/D/YY';border-color:#000;border-top:medium solid #000000;border-bottom:medium solid #000000;border-left:medium solid #000000;border-right:medium solid #000000;font-family:Calibri Light;font-size:11px;font-weight:700;text-align:center;vertical-align:middle;padding-left:2px;padding-right:2px;" rowspan="2">18.01.2021</td>
</tr>
<tr style="height:21px;">
<td style="padding:0 2px;text-align:center;border:1px solid #000;vertical-align:bottom;">11</td>
<td data-cell="A11" style="border-color:#000;border-left:medium solid #000000;padding-left:2px;padding-right:2px;">MSFT MCIO Limited</td>
<td data-cell="B11" style="border-color:#000;font-family:Calibri Light;font-size:11px;padding-left:2px;padding-right:2px;"></td>
<td data-cell="D11" style="border-color:#000;border-top:medium solid #000000;border-bottom:medium solid #000000;border-left:medium solid #000000;font-family:Calibri Light;font-size:11px;padding-left:2px;padding-right:2px;"></td>
<td data-cell="E11" style="border-color:#000;border-top:medium solid #000000;border-bottom:medium solid #000000;font-family:Calibri Light;font-size:11px;padding-left:2px;padding-right:2px;"></td>
<td data-cell="F11" style="border-color:#000;border-top:medium solid #000000;border-bottom:medium solid #000000;font-family:Calibri Light;font-size:11px;padding-left:2px;padding-right:2px;"></td>
<td data-cell="G11" style="border-color:#000;border-top:medium solid #000000;border-bottom:medium solid #000000;font-family:Calibri Light;font-size:11px;padding-left:2px;padding-right:2px;"></td>
<td data-cell="H11" style="border-color:#000;border-top:medium solid #000000;border-bottom:medium solid #000000;font-family:Calibri Light;font-size:11px;padding-left:2px;padding-right:2px;"></td>
<td data-cell="I11" style="border-color:#000;border-top:medium solid #000000;border-bottom:medium solid #000000;font-family:Calibri Light;font-size:11px;padding-left:2px;padding-right:2px;"></td>
<td data-cell="J11" style="border-color:#000;border-top:medium solid #000000;border-bottom:medium solid #000000;font-family:Calibri Light;font-size:11px;padding-left:2px;padding-right:2px;"></td>
<td data-cell="K11" style="border-color:#000;border-top:medium solid #000000;border-bottom:medium solid #000000;padding-left:2px;padding-right:2px;"></td>
<td data-cell="L11" style="border-color:#000;border-top:medium solid #000000;border-bottom:medium solid #000000;padding-left:2px;padding-right:2px;"></td>
<td data-cell="M11" style="border-color:#000;border-top:medium solid #000000;border-bottom:medium solid #000000;border-right:medium solid #000000;padding-left:2px;padding-right:2px;"></td>
<td data-cell="N11" style="border-color:#000;border-bottom:medium solid #000000;border-left:medium solid #000000;border-right:medium solid #000000;font-family:Calibri Light;font-size:11px;font-weight:700;padding-left:2px;padding-right:2px;">NOTE:</td>
</tr>
Layout type 2
<tr style="height:29px;">
<td style="padding:0 2px;text-align:center;border:1px solid #000;vertical-align:bottom;">19</td>
<td data-cell="A19" style="border-color:#000;border-bottom:medium solid #000000;border-left:medium solid #000000;padding-left:2px;padding-right:2px;" colspan="3">Moss Lane Manchester, M45 8FJ</td>
<td data-cell="D19" style="border-color:#000;border-bottom:medium solid #000000;padding-left:2px;padding-right:2px;"></td>
<td data-cell="E19" style="border-color:#000;border-bottom:medium solid #000000;padding-left:2px;padding-right:2px;"></td><td data-cell="F19" style="border-color:#000;border-bottom:medium solid #000000;border-right:medium solid #000000;padding-left:2px;padding-right:2px;"></td>
<td data-cell="G19" style="border-color:#000;border-bottom:medium solid #000000;border-left:medium solid #000000;padding-left:2px;padding-right:2px;">LON22</td>
<td data-cell="H19" style="border-color:#000;border-bottom:medium solid #000000;padding-left:2px;padding-right:2px;"></td>
<td data-cell="I19" style="border-color:#000;border-bottom:medium solid #000000;padding-left:2px;padding-right:2px;"></td>
<td data-cell="J19" style="border-color:#000;border-bottom:medium solid #000000;padding-left:2px;padding-right:2px;"></td>
<td data-cell="K19" style="border-color:#000;border-bottom:medium solid #000000;padding-left:2px;padding-right:2px;"></td>
<td data-cell="L19" style="border-color:#000;border-bottom:medium solid #000000;border-right:medium solid #000000;padding-left:2px;padding-right:2px;"></td>
</tr>
<tr style="height:21px;"><td style="padding:0 2px;text-align:center;border:1px solid #000;vertical-align:bottom;">20</td>
<td data-cell="A20" style="border-color:#000;border-top:medium solid #000000;border-bottom:medium solid #000000;border-left:medium solid #000000;background-color:#000000;color:#FFFFFF;font-weight:700;padding-left:2px;padding-right:2px;" colspan="3">SO Number : SO0010810</td>
<td data-cell="D20" style="border-color:#000;border-top:medium solid #000000;border-bottom:medium solid #000000;border-right:medium solid #000000;background-color:#000000;color:#FFFFFF;font-weight:700;padding-left:2px;padding-right:2px;" colspan="2"></td>
<td data-cell="F20" style="border-color:#000;border-top:medium solid #000000;border-bottom:medium solid #000000;border-left:medium solid #000000;background-color:#000000;color:#FFFFFF;font-weight:700;padding-left:2px;padding-right:2px;" colspan="2">MSPO# 80272185</td>
<td data-cell="H20" style="border-color:#000;border-top:medium solid #000000;border-bottom:medium solid #000000;border-left:medium solid #000000;background-color:#000000;color:#FFFFFF;font-weight:700;padding-left:2px;padding-right:2px;" colspan="2">Incoterms : DDP</td>
<td data-cell="J20" style="border-color:#000;border-top:medium solid #000000;border-bottom:medium solid #000000;border-right:medium solid #000000;background-color:#000000;color:#FFFFFF;font-weight:700;padding-left:2px;padding-right:2px;" colspan="3">Mode of Transport : Air Freight</td></tr><tr style="height:22px;"><td style="padding:0 2px;text-align:center;border:1px solid #000;vertical-align:bottom;">21</td>
<td data-cell="A21" style="border-color:#000;border-top:medium solid #000000;border-bottom:medium solid #000000;border-left:medium solid #000000;background-color:#000000;color:#FFFFFF;font-weight:700;padding-left:2px;padding-right:2px;" colspan="3">Ship Date : 23/02/2021</td>
<td data-cell="D21" style="border-color:#000;border-top:medium solid #000000;border-bottom:medium solid #000000;background-color:#000000;color:#FFFFFF;font-weight:700;padding-left:2px;padding-right:2px;" colspan="4">Sales Contact : NIAMH CULLEN</td>
<td data-cell="H21" style="border-color:#000;border-top:medium solid #000000;border-bottom:medium solid #000000;background-color:#000000;color:#FFFFFF;font-weight:700;padding-left:2px;padding-right:2px;" colspan="3">Inbound I.D<span style="font-size:16px;"> </span></td>
<td data-cell="K21" style="border-color:#000;border-top:medium solid #000000;border-bottom:medium solid #000000;border-right:medium solid #000000;background-color:#000000;color:#FFFFFF;font-weight:700;padding-left:2px;padding-right:2px;" colspan="2">Currency : GBP £</td>
</tr>
<tr style="height:21px;"><td style="padding:0 2px;text-align:center;border:1px solid #000;vertical-align:bottom;">22</td>
<td data-cell="A22" style="border-color:#000;border-top:medium solid #000000;border-bottom:medium solid #000000;border-left:medium solid #000000;border-right:medium solid #000000;background-color:#000000;color:#FFFFFF;font-weight:700;padding-left:2px;padding-right:2px;">Line Item </td>
<td data-cell="B22" style="border-color:#000;border-top:medium solid #000000;border-bottom:medium solid #000000;border-left:medium solid #000000;background-color:#000000;color:#FFFFFF;font-weight:700;text-align:center;padding-left:2px;padding-right:2px;" colspan="2">Part Number</td>
<td data-cell="D22" style="border-color:#000;border-top:medium solid #000000;border-bottom:medium solid #000000;background-color:#000000;color:#FFFFFF;font-weight:700;text-align:center;padding-left:2px;padding-right:2px;" colspan="4">Description </td>
<td data-cell="H22" style="border-color:#000;border-top:medium solid #000000;border-bottom:medium solid #000000;background-color:#000000;color:#FFFFFF;font-weight:700;text-align:center;padding-left:2px;padding-right:2px;">COO</td>
<td data-cell="I22" style="border-color:#000;border-top:medium solid #000000;border-bottom:medium solid #000000;background-color:#000000;color:#FFFFFF;font-weight:700;text-align:center;padding-left:2px;padding-right:2px;">HTS Code</td>
<td data-cell="J22" style="border-color:#000;border-top:medium solid #000000;border-bottom:medium solid #000000;background-color:#000000;color:#FFFFFF;font-weight:700;text-align:center;padding-left:2px;padding-right:2px;">Quantity</td>
<td data-cell="K22" style="border-color:#000;border-top:medium solid #000000;border-bottom:medium solid #000000;background-color:#000000;color:#FFFFFF;font-weight:700;text-align:center;padding-left:2px;padding-right:2px;">Unit Price</td>
<td data-cell="L22" style="border-color:#000;border-top:medium solid #000000;border-bottom:medium solid #000000;border-right:medium solid #000000;background-color:#000000;color:#FFFFFF;font-weight:700;text-align:center;padding-left:2px;padding-right:2px;">Total</td>
</tr>
Desired output
So desired out is to get the values of where it contains "ORDER #" or "SO Number". If the word is "ORDER #" then I want to get the values of the next cell, which is "SO-10415". Else get the values of the cell which contains "SO Number" and in current case it would be "SO Number : SO0010810". So it should be like below.
If word contain (or equal) "ORDER #" output should be SO-10415.
If word contain (or equal) "SO Number" output should be SO Number : SO0010810.
And I think the software is using xpath v 1.0 not 2.0. But I do prefer to have a solution that would fit both versions, if possible but either would be accepted. I tried to build a solution after reading more posts here but still have no success.
Related
My company is using Adobe dreamweaver to generate HTML emails, and oftentimes it doesnt work or provide the features desired. So I have to step in and make the HTML-Emails work at least in our Office365 environment...
However, to the point: Above some text, a green line/border shall be displayed. So I went into the sourcecode, looked up the containing element and added a span tag around the word supposed to have a green top-border. Then I added
style="border-top: 5px solid green"
And when I insert the HTML Code into an email, I get the display of a word being completely surrounded by green borders, not just a green top border.
The span tag resides within b tags, and the b tages are inside a td and so on. Nothing special in my opinion.
i already tried working around this by using other elements that span, but it didnt work. Oftentimes it seems as if Outlook doesnt even recognize the tags.
display: inline
also didnt have any effect on div element, which I had high hopes for since at least there, the border-top activated only the top border, not all borders around it. But unfortunately, its not inline...^^
Any experienced HTML-Email designers out there who would have some advice or two?
EDIT:
Part of the markup
<td height="100" bgcolor="#EFEFEF" class="inner" style="border-left-color: #000000:; border-left: thin; padding-top:15px; padding-right:15px; padding-bottom:15px; padding-left:30px; font-family:'Segoe UI', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size:18px; line-height:100%; color:#000000; font-weight:normal;">
<table width="547" bgcolor="#ffffff">
<tr>
<td width="539" height="40" bgcolor="#ffffff" class="inner" style="padding-top:15px; padding-right:15px; padding-bottom:15px; padding-left:30px; font-family:'Segoe UI', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size:18px; line-height:100%; color:#000000; font-weight:normal;"> <b><span style="border-top: 5px solid green;">TEST</span> - blablabla</b>
</tr>
</table>
</td>
I wouldn't use a Span tag to do this. You need a block element to add a border to (e.g. div / td).
I would suggest utilizing tables and table cells. It'll be your best way to add the border in a way that is supported everywhere and keep everything looking nice, no matter the email client quirks.
See my edits below:
<table width="100%" border="0" cellspacing="0" cellpadding="0" style="width:100%;">
<tr>
<td height="100" bgcolor="#EFEFEF" class="inner" style="border-left-color: #000000:; border-left: thin; padding-top:15px; padding-right:15px; padding-bottom:15px; padding-left:30px; font-family:'Segoe UI', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size:18px; line-height:100%; color:#000000; font-weight:normal;">
<table width="547" border="0" cellspacing="0" cellpadding="0">
<tr>
<td bgcolor="#ffffff" class="inner" style="padding-top:15px; padding-right:15px; padding-bottom:15px; padding-left:30px;">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td>
<table align="left" border="0" cellspacing="0" cellpadding="0" style="width:auto;">
<tr>
<td style="font-family:'Segoe UI', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size:18px; line-height:100%; color:#000000; font-weight:normal; border-top: 5px solid green; padding-top:3px;">
<b>TEST</b>
</td>
</tr>
</table>
<table align="left" border="0" cellspacing="0" cellpadding="0" style="width:auto;">
<tr>
<td style="font-family:'Segoe UI', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size:18px; line-height:100%; color:#000000; font-weight:normal; border-top: 5px solid #ffffff; padding-top:3px;">
<b>- blablabla</b>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
I have a web version that's displaying fine. When I send a test email, it shows unwanted spacing between the images. I tried changing the the padding and margin , but nothing's working. Why is it doing that?
https://jsfiddle.net/tantalizea/r49oqbjj/
CSS:
a,
body,
div,
img,
span,
table,
td,
tr {
margin: 0;
padding: 0;
border: 0;
}
a {
color: #231F20;
font-weight: bold;
text-decoration: none
}
a[href^="x-apple-data-detectors:"] {
color: inherit;
text-decoration: inherit;
}
area {
outline: none
}
body {
font: normal 100% Arial, Helvetica, sans-serif;
background: #FFF;
color: #231F20
}
img {
border: none;
width: 100%;
height: auto
}
.container {
width: 600px;
margin: 0 auto;
max-width: 600px
}
#preheader {
display: none !important;
visibility: hidden;
opacity: 0;
color: #FFFFFF;
color: transparent;
height: 0;
width: 0;
font-size: 0px
}
.desktop {
display: table !important;
margin: 0 auto !important;
}
tr.desktop {
display: table-row !important
}
td.desktop {
display: table-cell !important
}
img.desktop {
display: inline !important
}
.mobile {
display: none !important
}
.break {
display: inline !important
}
#media screen and (max-width: 600px) {
.container {
width: 97.5%
}
.desktop,
tr.desktop,
td.desktop,
img.desktop {
display: none !important
}
.mobile {
display: table !important
}
tr.mobile {
display: table-row !important
}
td.mobile2 {
display: table !important;
width: 100%;
text-align: center !important
}
td.mobile {
display: table-cell !important
}
.break {
display: none !important
}
.hidden {
display: none !important
}
.no-border {
border: none !important
}
.smaller {
font-size: 200% !important
}
.smaller2 {
font-size: 100% !important
}
.center {
text-align: center !important
}
.margin {
margin: 0 auto
}
.image {
width: 100px !important
}
.width-100 {
width: 100% !important
}
}
HTML:
<body style="background:#FFF; color:#858585">
<div id="preheader" style="display:none; visibility:hidden; opacity:0; color:#878787; color:transparent; height:0; width:0; font-size:0px;">Tuesday, March 7, 2017 | 9840 International Drive, Orlando, Florida | Booth #613</div>
<!-- /div#preheader -->
<div class="container" style="margin:0 auto; max-width:600px">
<table cellpadding="0" cellspacing="0" border="0" align="center" class="container" style="margin:0 auto; max-width:600px">
<tr class="bronto">
<td height="20"></td>
</tr>
<tr class="bronto">
<td align="center"><span style="font:normal 68.75% Helvetica, Arial, sans-serif; color:#858585">Is this email not displaying correctly? Try the web version.</span></td>
</tr>
<tr>
<td>
<table cellpadding="0" cellspacing="0" align="center" border="0" width="100%">
<tr>
<td height="20"></td>
</tr>
<tr>
<td>
<table cellpadding="0" cellspacing="0" align="center" border="0" width="100%">
<tr>
<td width="35" class="desktop"> </td>
<td align="center">
<table cellpadding="0" cellspacing="0" align="center" border="0" width="100%">
<tr>
<td align="left" valign="bottom" width="76%"><span style="font:normal 300% Times, 'Times New Roman', serif; color:#56565a; line-height:100%" class="smaller"><strong><em>You're Invited!</em></strong></span></td>
<td style="text-align:right" width="24%"><img src="http://www.kravetcontract.com/email_blasts/tipin.png" alt="KK" style="max-width:144px; width:100%" /></td>
</tr>
</table>
</td>
<td width="35" class="desktop"> </td>
</tr>
<!--<tr class="mobile">
<td class="mobile">
<table cellpadding="0" cellspacing="0" align="center" border="0" width="100%" class="mobile">
<tr class="mobile">
<td height="20" class="mobile"></td>
</tr>
<tr class="mobile">
<td align="center" class="mobile"><span style="font:normal 200% Times, 'Times New Roman', serif; color:#57565b;" class="mobile"><strong><em>You're Invited!</em></strong></span></td>
</tr>
</table>
</td>
</tr>-->
</table>
</td>
</tr>
<tr>
<td height="20"></td>
</tr>
</table>
</td>
</tr>
<tr>
<td align="center" valign="top"><img src="http://www.kravetcontract.com/email_blasts/newh-2017/top.jpg" alt="Top" style="max-width:600px" /></td>
</tr>
<tr>
<td>
<table cellpadding="0" cellspacing="0" align="center" border="0" width="100%">
<tr>
<td align="left" valign="middle" class="desktop" width="78"><img src="http://www.kravetcontract.com/email_blasts/newh-2017/left.jpg" alt="Left" style="max-width:78px" /></td>
<td align="center" valign="middle" bgcolor="#FFFFFF">
<table cellpadding="0" cellspacing="20" align="center" border="0" width="100%">
<tr>
<td align="center"><span style="font:normal 100% Gotham, 'Helvetica Neue', Helvetica, Arial, sans-serif; color:#101011; letter-spacing:1px">PLEASE JOIN</span></td>
</tr>
<tr>
<td align="center"><img src="http://www.kravetcontract.com/email_blasts/BDNY2016/logo.png" alt="kravetcontract" style="max-width:280px" /></td>
</tr>
<tr>
<td align="center"><span style="font:normal 100% Gotham, 'Helvetica Neue', Helvetica, Arial, sans-serif; color:#101011; letter-spacing:1.5px">AT THIS YEAR'S</span></td>
</tr>
<tr>
<td align="center"><img src="http://www.kravetcontract.com/email_blasts/newh-2017/newh_logo_2.png" alt="NEWH" style="max-width:192px" /></td>
</tr>
<tr>
<td align="center" valign="middle"><span style="font:normal 100% Gotham, 'Helvetica Neue', Helvetica, Arial, sans-serif; color:#101011;letter-spacing:1.5px">MARCH 7, 2017 AT 12PM-6PM<br />
BOOTH #613</span></td>
</tr>
<tr>
<td align="center" valign="middle"><span style="font:normal 81.25% Gotham, 'Helvetica Neue', Helvetica, Arial, sans-serif; color:#101011; letter-spacing:1.5px">9840 International Drive<br />
Orlando, Florida</span></td>
</tr>
<tr>
<td align="center"><span style="font:normal 100% Gotham, 'Helvetica Neue', Helvetica, Arial, sans-serif; color:#101011; line-height:21px; letter-spacing:1.5px">We look forward to seeing you.</span></td>
</tr>
</table>
</td>
<td align="right" valign="middle" class="desktop" width="78"><img src="http://www.kravetcontract.com/email_blasts/newh-2017/right.jpg" alt="Right" style="max-width:78px" /></td>
</tr>
</table>
</td>
</tr>
<tr>
<td align="center" valign="top"><img src="http://www.kravetcontract.com/email_blasts/newh-2017/bottom.jpg" alt="Bottom" style="max-width:600px" /></td>
</tr>
<tr>
<td align="center" valign="middle" bgcolor="#56565a">
<table cellpadding="0" cellspacing="5" align="center" border="0">
<tr>
<td bgcolor="#56565a">GET DIRECTIONS <strong style="font-family:Arial, sans-serif;">►</strong></td>
</tr>
</table>
</td>
</tr>
<tr>
<td height="20"></td>
</tr>
<tr>
<td><img src="http://www.kravet.com/style-spotlight/one-family.gif" alt="One Family. Ninety-Eight Years." border="0" style="border:none; width:100%" /></td>
</tr>
<tr>
<td height="10"></td>
</tr>
<tr>
<td align="center"><span style="font:normal 150% Helvetica, Arial, sans-serif; color:#858585"><span style="font:normal 87.5%/4mm Helvetica, Arial, sans-serif; color:#858585">#</span>kravetinc</span>
</td>
</tr>
<tr>
<td height="10"></td>
</tr>
<tr>
<td align="center">
<table cellpadding="0" cellspacing="0" align="center" border="0">
<tr>
<td>
<img src="http://www.kravet.com/style-spotlight/instagram.gif" alt="Instagram" border="0" style="border:none; width:100%; max-width:50px" />
</td>
<td width="10"> </td>
<td>
<img src="http://www.kravet.com/style-spotlight/facebook.gif" alt="Facebook" border="0" style="border:none; width:100%; max-width:50px" />
</td>
<td width="10"> </td>
<td>
<img src="http://www.kravet.com/style-spotlight/pinterest.gif" alt="Pinterest" border="0" style="border:none; width:100%; max-width:50px" />
</td>
<td width="10"> </td>
<td>
<img src="http://www.kravet.com/style-spotlight/twitter.gif" alt="Twitter" border="0" style="border:none; width:100%; max-width:50px" />
</td>
<td width="10"> </td>
<td>
<img src="http://www.kravet.com/style-spotlight/houzz.gif" alt="Houzz" border="0" style="border:none; width:100%; max-width:50px" />
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td height="10"></td>
</tr>
<tr>
<td align="center">e-designtrade.com</td>
</tr>
<tr>
<td height="40"></td>
</tr>
<tr>
<td align="center"><span style="font:normal 75% Helvetica, Arial, sans-serif; color:#858585">KRAVET® INC | CONTACT US | PRIVACY POLICY</span></td>
</tr>
<tr>
<td align="center"><span style="font:bold 75% Helvetica, Arial, sans-serif; color:#858585">Exclusively Available Through Interior Designers</span></td>
</tr>
<tr>
<td height="40"></td>
</tr>
<tr class="bronto">
<td align="center"><span style="font: normal 68.75% Helvetica, Arial, sans-serif; color: #858585;" xml="lang">This email was sent to %%!contact_email%% by %%!account_organization%%</span></td>
</tr>
<tr class="bronto">
<td align="center"><span style="font: normal 68.75% Helvetica, Arial, sans-serif; color: #858585;" xml="lang">%%!account_address1%% | %%!account_city%%, %%!account_state%% %%!account_zip%%</span></td>
</tr>
<tr class="bronto">
<td align="center"><span style="font:normal 68.75% Helvetica, Arial, sans-serif; color:#858585">Forward to a friend | Manage Preferences | Unsubscribe</span></td>
</tr>
<tr>
<td height="40"></td>
</tr>
</table>
<!-- /table.container -->
</div>
<!-- /div.container -->
</body>
Try using display block on all images.
style="display:block;"
This is a must have on all images.
Cheers
To be quite honest, I actually love the way it looks haha.
But I believe your issue is the img. It's based on the width. The aspect ratio makes the height smaller then the size of the table row. This is probably not the best way to fix it, but after going through a bunch of css changes I couldn't get it to work any other way:
On the specific images. Set the img style to be moved 4 px down:
transform: translateY(4px);
Bottom image, 4 px up:
transform: translateY(-4px);
Ex:
Bottom:
<img src="http://www.kravetcontract.com/email_blasts/newh-2017/bottom.jpg" alt="Bottom" style="max-width:600px;transform: translateY(-4px);">
Should look like this:
I have an anchor link with padding:
Discover your 3D
But outlook doesn't respect this padding, it's just removed, what's the best solution to not mess up the design in other clients.
Outlook's support for the box model is... sketchy. Try this code:
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td>
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td bgcolor="#137191" style="padding: 16px; border-radius:4px">
Discover your 3D
</td>
</tr>
</table>
</td>
</tr>
</table>
This will solve your collapsing padding issue in Outlook. Outlook will still display squared-off corners instead of border-radius, but at least you'll get a padded button that is clickable.
(I added/edited a few other properties to help cross-client display)
There are a few way to achieve bulletproof buttons in email if you prefer another method.
For some reason padding on the a-tag in Outlook only works when you combine with a 1px border and display inline-block. Then you need the td to share the same background-color and width as the button to fill out the clickable area.
<table align="center">
<tbody>
<tr>
<td style="background-color: #0079c8;" width="140px">Log in ></td>
</tr>
</tbody>
</table>
I got button code example from microsoft template:
<tr>
<td style="padding: 0px 0px 40px;">
<table align="center" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td align="center" style="padding-bottom: 0px !important; margin-bottom: 0px !important;" cellspacing="0" border="0" cellpadding="0">
<a class="fixLinkWhite" style='text-align: center; color: rgb(255, 255, 255); line-height: 19px; font-family: "Segoe UI Semibold", wf_segoe-ui_semibold, "Segoe UI", "Segoe WP", Tahoma, Arial, sans-serif; font-size: 16px; font-weight: 500; display: inline-block;' href="https://emea01.safelinks.protection.outlook.com/?url=https%3A%2F%2Fclick.mail.onedrive.com%2F%3Fqs%3D66fc70d9e5f1a53dc4a2197021906f0dbfd56c5f6063855eacb5b2236fdb95cce118e2452e0763745ec595025acd785afd06ff9ac40a30e8&data=04%7C01%7C%7C1da4d1818b194c2ce45508d9b586e09f%7C84df9e7fe9f640afb435aaaaaaaaaaaa%7C1%7C0%7C637740413170283041%7CUnknown%7CTWFpbGZsb3d8eyJWIjoiMC4wLjAwMDAiLCJQIjoiV2luMzIiLCJBTiI6Ik1haWwiLCJXVCI6Mn0%3D%7C3000&sdata=P48lMVNNmii3puOCtHjGAGqjBauzZvUfKua%2F0hsS2Z0%3D&reserved=0" target="_blank" shash="lVj7xGxKkteyQkNqUIWVOtfqS5bLgunSFQJWPeQ+a+jLeZJ0lydeWcm1fiSFwJLd6OvwJNV2YVATqaHA5r9xyo2q+4/ssBdAEfVO93OqZLe1Ol46wxjFEMaqebYBsJUqECxQiHgCvIo9cZ9OSacRvZS6y6UiyPLq3xDoiAJGDzc=" originalsrc="https://click.mail.onedrive.com/?qs=66fc70d9e5f1a53dc4a2197021906f0dbfd56c5f6063855eacb5b2236fdb95cce118e2452e0763745ec595025acd785afd06ff9ac40a30e8">
<p class="fixLinkWhite" style="padding: 10px 0px; border: 1px solid rgb(0, 120, 215); border-image: none; color: rgb(255, 255, 255); line-height: 19px; font-size: 16px; font-weight: 500; display: inline-block; background-color: rgb(0, 120, 215);"> Перейти в ваш OneDrive </p>
</a>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
Email isn’t scaling to screen size in outlook. Testing with email on acid and it’s working for other clients, can anyone give me advice?
Code is below. Would appreciate some advice on what needs fixing as this is my first attempt to code an email.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>See what our customers say</title>
<style type="text/css">
</style>
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:v="urn:schemas-microsoft-com:vml"
xmlns:o="urn:schemas-microsoft-com:office:office">
<head>
<!--[if gte mso 9]><xml>
<o:OfficeDocumentSettings>
<o:AllowPNG/>
<o:PixelsPerInch>96</o:PixelsPerInch>
</o:OfficeDocumentSettings>
</xml><![endif]-->
</head>
</head>
<body bgcolor="#ebebeb" style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; height: 100% !important; width: 100% !important;">
<table border="0" cellpadding="0" cellspacing="0" width="100%" style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; height: 100% !important; width: 100% !important; border-collapse: collapse !important; margin: 0; mso-table-lspace: 0pt; mso-table-rspace: 0pt; padding: 0;">
<tbody>
<tr>
<td width="640">
<table align="center" border="0" cass="container" cellpadding="0" cellspacing="0" width="640">
<tbody>
<tr>
<td bgcolor="#ffffff" border="0" class="logo" valign="top" width="100%" height="auto" align="center" style="width: 100%; background-color: rgb(255, 255, 255); background-position: initial initial; background-repeat: initial initial;" pardot-data=""><img alt="Pay4Later" border="0" src="http://go.pardot.com/l/73452/2015-08-18/23htmw/73452/32364/testimonials.jpg" style="display: block; width: 100%;" width="100%"></td>
</tr>
<tr>
<td align="center" bgcolor="#f9f6f2" class="headline" style="padding: 15px 20px 5px 30px; border: 0; font-family: Arial, Helvetica, sans-serif; font-size: 16px; line-height: 22px; width: 100%;" valign="top">
<h1 style="margin: 0px 0px 15px 0px; font-weight: normal; font-size: 32px; line-height: 32px; color: #414141;">DON'T JUST TAKE<br>
OUR WORD FOR IT</h1>
<p><i>See what our customers say</i></p>
</td>
</tr>
<tr>
<td align="left" bgcolor="#f9f6f2" class="content" style="padding: 0px 60px; border: 0px; font-family: Arial, Helvetica, sans-serif; font-size: 16px; line-height: 22px; color: rgb(65, 65, 65); width: 100%; background-color: rgb(249, 246, 242); background-position: initial initial; background-repeat: initial initial;" valign="top" pardot-data="">There’s no doubt that offering finance to your customers is a guaranteed way to dramatically increase your sales. Pay4Later takes digital lending further by giving you market leading acceptance rates and maximising order values, but don’t just take our word for it. See what our customers say...</td>
</tr>
<tr>
<td align="center" bgcolor="#f9f6f2" pardot-data="" style="padding: 20px 0px; background-color: rgb(249, 246, 242); background-position: initial initial; background-repeat: initial initial; width: 100%;" width="100%" class=""><img src="http://go.pardot.com/l/73452/2015-08-27/25s4sf/73452/34320/line_half.png"></td>
</tr>
<tr>
<td>
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody>
<tr>
<td align="center" bgcolor="#f9f6f2" height="130" style="padding: 0 40px;" width="130" class=""><img height="130" src="http://go.pardot.com/l/73452/2015-08-27/25s4y5/73452/34330/cotswold.png" style="width: 130px; height: 130px;" width="130"></td>
<td bgcolor="#f9f6f2" class="content" style="border: 0; font-family:Arial, Helvetica, sans-serif; font-size: 16px; line-height:22px; color: #414141; padding-right: 50px;">“We trust Pay4Later with our customers, as Pay4Later’s performance with them reflects on our brand, too. We find that customers get great care from the company when needed, and we couldn’t be happier."</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td align="center" bgcolor="#f9f6f2" style="padding: 20px 0;" width="100%" class=""><img src="http://go.pardot.com/l/73452/2015-08-27/25s4sf/73452/34320/line_half.png"></td>
</tr>
<tr>
<td>
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody>
<tr>
<td bgcolor="#f9f6f2" class="content" style="border: 0; font-family:Arial, Helvetica, sans-serif; font-size: 16px; line-height:22px; color: #414141; padding-left: 50px;">“We trust Pay4Later with our customers, as Pay4Later’s performance with them reflects on our brand, too. We find that customers get great care from the company when needed, and we couldn’t be happier."</td>
<td align="center" bgcolor="#f9f6f2" height="130" style="padding: 0 40px;" width="130" class=""><img height="130" src="http://go.pardot.com/l/73452/2015-09-02/26hr5h/73452/35206/mango.png" style="width: 130px; height: 130px;" width="130"></td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td align="center" bgcolor="#f9f6f2" style="padding: 20px 0;" width="100%" class=""><img src="http://go.pardot.com/l/73452/2015-08-27/25s4sf/73452/34320/line_half.png"></td>
</tr>
<tr>
<td>
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody>
<tr>
<td align="center" bgcolor="#f9f6f2" height="130" style="padding: 0 40px;" width="130" class=""><img height="130" src="http://go.pardot.com/l/73452/2015-08-27/25s4yt/73452/34340/oak_furniture.png" style="width: 130px; height: 130px;" width="130"></td>
<td bgcolor="#f9f6f2" class="content" style="border: 0; font-family:Arial, Helvetica, sans-serif; font-size: 16px; line-height:22px; color: #414141; padding-right: 50px;">“We trust Pay4Later with our customers, as Pay4Later’s performance with them reflects on our brand, too. We find that customers get great care from the company when needed, and we couldn’t be happier."</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td align="center" bgcolor="#f9f6f2" style="padding: 20px 0;" width="100%" class=""><img src="http://go.pardot.com/l/73452/2015-08-27/25s4sf/73452/34320/line_half.png"></td>
</tr>
<tr>
<td>
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody>
<tr>
<td bgcolor="#f9f6f2" class="content" style="border: 0; font-family:Arial, Helvetica, sans-serif; font-size: 16px; line-height:22px; color: #414141; padding-left: 50px;">“We trust Pay4Later with our customers, as Pay4Later’s performance with them reflects on our brand, too. We find that customers get great care from the company when needed, and we couldn’t be happier."</td>
<td align="center" bgcolor="#f9f6f2" height="130" style="padding: 0 40px;" width="130" class=""><img height="130" src="http://go.pardot.com/l/73452/2015-08-27/25s4yf/73452/34336/gymkit_uk.jpg" style="width: 130px; height: 130px;" width="130"></td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td align="center" bgcolor="#f9f6f2" style="padding: 20px 0;" width="100%" class=""><img height="3" src="http://go.pardot.com/l/73452/2015-08-27/25s4sf/73452/34320/line_half.png" style="width: 544px; height: 3px;" width="544"></td>
</tr>
<tr>
<td>
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody>
<tr>
<td align="center" bgcolor="#f9f6f2" height="130" style="padding: 0 40px;" width="130" class=""><img height="130" src="http://go.pardot.com/l/73452/2015-08-27/25s4yp/73452/34338/wongs.png" style="width: 130px; height: 130px;" width="130"></td>
<td bgcolor="#f9f6f2" class="content" style="border: 0; font-family:Arial, Helvetica, sans-serif; font-size: 16px; line-height:22px; color: #414141; padding-right: 50px;">“We trust Pay4Later with our customers, as Pay4Later’s performance with them reflects on our brand, too. We find that customers get great care from the company when needed, and we couldn’t be happier."</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td align="center" bgcolor="#f9f6f2" style="padding: 20px 0;" width="100%" class=""><img src="http://go.pardot.com/l/73452/2015-08-27/25s4sf/73452/34320/line_half.png"></td>
</tr>
<tr>
<td>
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody>
<tr>
<td bgcolor="#f9f6f2" class="content" style="border: 0; font-family:Arial, Helvetica, sans-serif; font-size: 16px; line-height:22px; color: #414141; padding-left: 50px;">“We trust Pay4Later with our customers, as Pay4Later’s performance with them reflects on our brand, too. We find that customers get great care from the company when needed, and we couldn’t be happier."</td>
<td align="center" bgcolor="#f9f6f2" height="130" style="padding: 0 40px;" width="130" class=""><img height="130" src="http://go.pardot.com/l/73452/2015-09-07/26x153/73452/35954/home_leisure.png" style="width: 130px; height: 130px;" width="130"></td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td align="center" bgcolor="#f9f6f2" style="padding: 20px 0;" width="100%" class=""><img src="http://go.pardot.com/l/73452/2015-08-27/25s4sf/73452/34320/line_half.png"></td>
</tr>
<tr>
<td align="center" bgcolor="#f9f6f2" style="padding-top: 30px;" width="640">
<table align="center" bgcolor="#f9f6f2" style="border:2px solid #000000;" width="200">
<tbody>
<tr>
<td align="center" style="padding:10px 6px;" class=""><span style="font-family: 'Roboto', Helvetica, Arial, sans-serif !important;">SIGNUP NOW</span> </td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td align="left" bgcolor="#f9f6f2" class="content" style="padding: 50px 100px 0px 100px; border: 0; font-family:Arial, Helvetica, sans-serif; font-size: 16px; line-height:22px; color: #414141;" valign="top">To learn more about how your business can benefit from Pay4Later’s finance solutions you can reply to this email or call us on 0800 021 7150.</td>
</tr>
<tr>
<td align="left" bgcolor="#f9f6f2" class="content" style="padding: 50px 100px 0px 100px; border: 0; font-family:Arial, Helvetica, sans-serif; font-size: 16px; line-height:8px; color: #414141;" valign="top">
<p><span>Kind Regards,</span></p>
<p><span>The Pay4Later Team</span></p>
<p><span>0800 021 7150</span></p>
</td>
</tr>
<tr>
<td width="640">
<table align="center" bgcolor="#0092ce" border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody>
<tr>
<td align="left" bgcolor="#0092ce" class="content" style="padding: 30px 100px 10px 100px; border: 0; font-family:Arial, Helvetica, sans-serif; font-size: 16px; line-height:8px; color: #ffffff;" valign="top" width="100%">
<p><span>Pay4Later Ltd</span></p>
<p><span>33 St Mary Axe</span></p>
<p><span>London, EC3A 8AG</span></p>
</td>
<td class=""><img alt="Twitter" border="0" height="30" src="http://go.pardot.com/l/73452/2015-09-02/26hq9t/73452/35156/twitter.png" style="width: 30px; height: 30px; border-width: 0px; border-style: solid;" title="Twitter" width="30"> </td>
<td class=""><img alt="Google" border="0" height="30" src="http://go.pardot.com/l/73452/2015-09-02/26hqr7/73452/35184/linkedIn.png" style="width: 30px; height: 30px; padding-left: 15px; border-width: 0px; border-style: solid;" title="Google" width="30"> </td>
<td class=""><img alt="RSS" border="0" height="30" src="http://go.pardot.com/l/73452/2015-09-02/26hqrp/73452/35186/mail.png" style="width: 30px; height: 30px; padding-left: 15px; padding-top: 7px; padding-right: 20px; border-width: 0px; border-style: solid;" title="RSS" width="30"> </td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td align="center" bgcolor="#ebebeb" class="content" style="padding: 10px 100px 0px 100px; border: 0; font-family:Arial, Helvetica, sans-serif; font-size: 14px; line-height:22px; color: #414141;" valign="top">If you don't want to receive more mails, just click here</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<div style="display:none; white-space:nowrap; font:15px courier; color:#ffffff;">
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
</div>
</body>
</html>
If by "scale to screen" you mean that the image is so much larger in all Outlook, this is because Outlook tends to size images based on the actual size of the hosted image, not your declarations - especially when used as percentages. Your best bet is to resize the hosted image to 640px wide and Outlook should behave properly.
There are many different theories on getting around this, but the only definitive way I have found is to make Outlook behave is to resize the images to the scale you want them to be.
HTML attributes (as in, width="640") can be used to resize images in Outlook. If width is defined, height will be rescaled accordingly. This works in all Outlook versions. However, the image will not be fluid (100% width) with this fix in place. It doesn't look like that's an issue for your email, as it doesn't contain any responsive code. If you use media queries, a style with !important should be able to overwrite this width.
Here is a test showing how this will look: https://www.emailonacid.com/app/acidtest/display/summary/r9Sdqkr0J2kICtkrwc0RUkioQ0uX2yID1BEMvfLUEUczL/shared
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>See what our customers say</title>
<style type="text/css">
</style>
<!--[if gte mso 9]><xml>
<o:OfficeDocumentSettings>
<o:AllowPNG/>
<o:PixelsPerInch>96</o:PixelsPerInch>
</o:OfficeDocumentSettings>
</xml><![endif]-->
</head>
<body bgcolor="#ebebeb" style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; height: 100% !important; width: 100% !important;">
<table border="0" cellpadding="0" cellspacing="0" width="100%" style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; height: 100% !important; width: 100% !important; border-collapse: collapse !important; margin: 0; mso-table-lspace: 0pt; mso-table-rspace: 0pt; padding: 0;">
<tbody>
<tr>
<td width="640">
<table align="center" border="0" class="container" cellpadding="0" cellspacing="0" width="640">
<tbody>
<tr>
<td bgcolor="#ffffff" border="0" class="logo" valign="top" width="100%" height="auto" align="center" style="width: 100%; background-color: rgb(255, 255, 255); background-position: initial initial; background-repeat: initial initial;" pardot-data=""><a href="#">
<img alt="Pay4Later" border="0" src="http://go.pardot.com/l/73452/2015-08-18/23htmw/73452/32364/testimonials.jpg" style="display: block; width: 640px;" width="640">
</a></td>
</tr>
<tr>
<td align="center" bgcolor="#f9f6f2" class="headline" style="padding: 15px 20px 5px 30px; border: 0; font-family: Arial, Helvetica, sans-serif; font-size: 16px; line-height: 22px; width: 100%;" valign="top">
<h1 style="margin: 0px 0px 15px 0px; font-weight: normal; font-size: 32px; line-height: 32px; color: #414141;">DON'T JUST TAKE<br>
OUR WORD FOR IT</h1>
<p><i>See what our customers say</i></p>
</td>
</tr>
<tr>
<td align="left" bgcolor="#f9f6f2" class="content" style="padding: 0px 60px; border: 0px; font-family: Arial, Helvetica, sans-serif; font-size: 16px; line-height: 22px; color: rgb(65, 65, 65); width: 100%; background-color: rgb(249, 246, 242); background-position: initial initial; background-repeat: initial initial;" valign="top" pardot-data="">There’s no doubt that offering finance to your customers is a guaranteed way to dramatically increase your sales. Pay4Later takes digital lending further by giving you market leading acceptance rates and maximising order values, but don’t just take our word for it. See what our customers say...</td>
</tr>
<tr>
<td align="center" bgcolor="#f9f6f2" pardot-data="" style="padding: 20px 0px; background-color: rgb(249, 246, 242); background-position: initial initial; background-repeat: initial initial; width: 100%;" width="100%" class=""><img src="http://go.pardot.com/l/73452/2015-08-27/25s4sf/73452/34320/line_half.png"></td>
</tr>
<tr>
<td>
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody>
<tr>
<td align="center" bgcolor="#f9f6f2" height="130" style="padding: 0 40px;" width="130" class=""><img height="130" src="http://go.pardot.com/l/73452/2015-08-27/25s4y5/73452/34330/cotswold.png" style="width: 130px; height: 130px;" width="130"></td>
<td bgcolor="#f9f6f2" class="content" style="border: 0; font-family:Arial, Helvetica, sans-serif; font-size: 16px; line-height:22px; color: #414141; padding-right: 50px;">“We trust Pay4Later with our customers, as Pay4Later’s performance with them reflects on our brand, too. We find that customers get great care from the company when needed, and we couldn’t be happier."</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td align="center" bgcolor="#f9f6f2" style="padding: 20px 0;" width="100%" class=""><img src="http://go.pardot.com/l/73452/2015-08-27/25s4sf/73452/34320/line_half.png"></td>
</tr>
<tr>
<td>
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody>
<tr>
<td bgcolor="#f9f6f2" class="content" style="border: 0; font-family:Arial, Helvetica, sans-serif; font-size: 16px; line-height:22px; color: #414141; padding-left: 50px;">“We trust Pay4Later with our customers, as Pay4Later’s performance with them reflects on our brand, too. We find that customers get great care from the company when needed, and we couldn’t be happier."</td>
<td align="center" bgcolor="#f9f6f2" height="130" style="padding: 0 40px;" width="130" class=""><img height="130" src="http://go.pardot.com/l/73452/2015-09-02/26hr5h/73452/35206/mango.png" style="width: 130px; height: 130px;" width="130"></td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td align="center" bgcolor="#f9f6f2" style="padding: 20px 0;" width="100%" class=""><img src="http://go.pardot.com/l/73452/2015-08-27/25s4sf/73452/34320/line_half.png"></td>
</tr>
<tr>
<td>
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody>
<tr>
<td align="center" bgcolor="#f9f6f2" height="130" style="padding: 0 40px;" width="130" class=""><img height="130" src="http://go.pardot.com/l/73452/2015-08-27/25s4yt/73452/34340/oak_furniture.png" style="width: 130px; height: 130px;" width="130"></td>
<td bgcolor="#f9f6f2" class="content" style="border: 0; font-family:Arial, Helvetica, sans-serif; font-size: 16px; line-height:22px; color: #414141; padding-right: 50px;">“We trust Pay4Later with our customers, as Pay4Later’s performance with them reflects on our brand, too. We find that customers get great care from the company when needed, and we couldn’t be happier."</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td align="center" bgcolor="#f9f6f2" style="padding: 20px 0;" width="100%" class=""><img src="http://go.pardot.com/l/73452/2015-08-27/25s4sf/73452/34320/line_half.png"></td>
</tr>
<tr>
<td>
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody>
<tr>
<td bgcolor="#f9f6f2" class="content" style="border: 0; font-family:Arial, Helvetica, sans-serif; font-size: 16px; line-height:22px; color: #414141; padding-left: 50px;">“We trust Pay4Later with our customers, as Pay4Later’s performance with them reflects on our brand, too. We find that customers get great care from the company when needed, and we couldn’t be happier."</td>
<td align="center" bgcolor="#f9f6f2" height="130" style="padding: 0 40px;" width="130" class=""><img height="130" src="http://go.pardot.com/l/73452/2015-08-27/25s4yf/73452/34336/gymkit_uk.jpg" style="width: 130px; height: 130px;" width="130"></td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td align="center" bgcolor="#f9f6f2" style="padding: 20px 0;" width="100%" class=""><img height="3" src="http://go.pardot.com/l/73452/2015-08-27/25s4sf/73452/34320/line_half.png" style="width: 544px; height: 3px;" width="544"></td>
</tr>
<tr>
<td>
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody>
<tr>
<td align="center" bgcolor="#f9f6f2" height="130" style="padding: 0 40px;" width="130" class=""><img height="130" src="http://go.pardot.com/l/73452/2015-08-27/25s4yp/73452/34338/wongs.png" style="width: 130px; height: 130px;" width="130"></td>
<td bgcolor="#f9f6f2" class="content" style="border: 0; font-family:Arial, Helvetica, sans-serif; font-size: 16px; line-height:22px; color: #414141; padding-right: 50px;">“We trust Pay4Later with our customers, as Pay4Later’s performance with them reflects on our brand, too. We find that customers get great care from the company when needed, and we couldn’t be happier."</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td align="center" bgcolor="#f9f6f2" style="padding: 20px 0;" width="100%" class=""><img src="http://go.pardot.com/l/73452/2015-08-27/25s4sf/73452/34320/line_half.png"></td>
</tr>
<tr>
<td>
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody>
<tr>
<td bgcolor="#f9f6f2" class="content" style="border: 0; font-family:Arial, Helvetica, sans-serif; font-size: 16px; line-height:22px; color: #414141; padding-left: 50px;">“We trust Pay4Later with our customers, as Pay4Later’s performance with them reflects on our brand, too. We find that customers get great care from the company when needed, and we couldn’t be happier."</td>
<td align="center" bgcolor="#f9f6f2" height="130" style="padding: 0 40px;" width="130" class=""><img height="130" src="http://go.pardot.com/l/73452/2015-09-07/26x153/73452/35954/home_leisure.png" style="width: 130px; height: 130px;" width="130"></td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td align="center" bgcolor="#f9f6f2" style="padding: 20px 0;" width="100%" class=""><img src="http://go.pardot.com/l/73452/2015-08-27/25s4sf/73452/34320/line_half.png"></td>
</tr>
<tr>
<td align="center" bgcolor="#f9f6f2" style="padding-top: 30px;" width="640">
<table align="center" bgcolor="#f9f6f2" style="border:2px solid #000000;" width="200">
<tbody>
<tr>
<td align="center" style="padding:10px 6px;" class=""><span style="font-family: 'Roboto', Helvetica, Arial, sans-serif !important;">SIGNUP NOW</span> </td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td align="left" bgcolor="#f9f6f2" class="content" style="padding: 50px 100px 0px 100px; border: 0; font-family:Arial, Helvetica, sans-serif; font-size: 16px; line-height:22px; color: #414141;" valign="top">To learn more about how your business can benefit from Pay4Later’s finance solutions you can reply to this email or call us on 0800 021 7150.</td>
</tr>
<tr>
<td align="left" bgcolor="#f9f6f2" class="content" style="padding: 50px 100px 0px 100px; border: 0; font-family:Arial, Helvetica, sans-serif; font-size: 16px; line-height:8px; color: #414141;" valign="top">
<p><span>Kind Regards,</span></p>
<p><span>The Pay4Later Team</span></p>
<p><span>0800 021 7150</span></p>
</td>
</tr>
<tr>
<td width="640">
<table align="center" bgcolor="#0092ce" border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody>
<tr>
<td align="left" bgcolor="#0092ce" class="content" style="padding: 30px 100px 10px 100px; border: 0; font-family:Arial, Helvetica, sans-serif; font-size: 16px; line-height:8px; color: #ffffff;" valign="top" width="100%">
<p><span>Pay4Later Ltd</span></p>
<p><span>33 St Mary Axe</span></p>
<p><span>London, EC3A 8AG</span></p>
</td>
<td class=""><img alt="Twitter" border="0" height="30" src="http://go.pardot.com/l/73452/2015-09-02/26hq9t/73452/35156/twitter.png" style="width: 30px; height: 30px; border-width: 0px; border-style: solid;" title="Twitter" width="30"> </td>
<td class=""><img alt="Google" border="0" height="30" src="http://go.pardot.com/l/73452/2015-09-02/26hqr7/73452/35184/linkedIn.png" style="width: 30px; height: 30px; padding-left: 15px; border-width: 0px; border-style: solid;" title="Google" width="30"> </td>
<td class=""><img alt="RSS" border="0" height="30" src="http://go.pardot.com/l/73452/2015-09-02/26hqrp/73452/35186/mail.png" style="width: 30px; height: 30px; padding-left: 15px; padding-top: 7px; padding-right: 20px; border-width: 0px; border-style: solid;" title="RSS" width="30"> </td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td align="center" bgcolor="#ebebeb" class="content" style="padding: 10px 100px 0px 100px; border: 0; font-family:Arial, Helvetica, sans-serif; font-size: 14px; line-height:22px; color: #414141;" valign="top">If you don't want to receive more mails, just click here</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<div style="display:none; white-space:nowrap; font:15px courier; color:#ffffff;">
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
</div>
</body>
</html>
As far as I know there really isn't any kind of scaling for emails in outlook, they take a fixed size and then keep it that way. As has been mentioned you can specify widths in attributes, and this will force that content to the size you specify.
One fairly popular way is starting with a fixed size and then setting elements of the email to have a % max width; this means that outlook will be happy with the fixed widths, and clients which support % widths will also be able to display yor content in a responsive way.
I'm trying to create table with three equal columns
Table width is set to 100%
When I'm trying to set width: 33% on TABLE TD element dompdf generates 1+ blank page(s) before generates the table. The table generates as expected only those blank pages are present in pdf document.
PDF FILE with width: 33%: http://www.docdroid.net/b5cf/with-width.pdf.html
I need to have equal columns on this table and cant achive it with width="33%" or style="table-layout: fixed" without geting the blank pages befor the table.
The HTML looks like this
<table class="outer_tab">
<tbody>
<tr class="outer_tr">
<td valign="top" class="outer_td">
<table class="inner_tab">
<tbody>
<tr>
<th valign="top" colspan="2">I.</th>
</tr>
<tr>
<td valign="top" class="inner_td">
<span class="separator">Morfologia ogólna</span>
</td>
</tr>
<tr>
<td valign="top" class="inner_td">
<span class="lp">1.
<span style="font-weight: bold;"> HCT </span> - <span class="inner_td_text">Hematokryt</span>
</span>
</td>
</tr>
</tbody>
</table>
</td>
<td valign="top" class="outer_td">
<table class="inner_tab">
<tbody>
<tr>
<th valign="top" colspan="2">II.</th>
</tr>
<tr>
<td valign="top" class="inner_td">
<span class="separator">Morfologia ogólna</span>
</td>
</tr>
<tr>
<td valign="top" class="inner_td">
<span class="lp">1.
<span style="font-weight: bold;"> HCT </span> - <span class="inner_td_text">Hematokryt</span>
</span>
</td>
</tr>
</tbody>
</table>
</td>
<td valign="top" class="outer_td">
<table class="inner_tab">
<tbody>
<tr>
<th valign="top" colspan="2">III.</th>
</tr>
<tr>
<td valign="top" class="inner_td">
<span class="separator">Morfologia ogólna</span>
</td>
</tr>
<tr>
<td valign="top" class="inner_td">
<span class="lp">1.
<span style="font-weight: bold;"> HCT </span> - <span class="inner_td_text">Hematokryt</span>
</span>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
CSS looks like this:
<style type="text/css">
#page { margin: 1cm; }
body {
background-image: url('<?php echo 'module/Application/assets/pdf/images/faktury-tlo-small.png'; ?>');
background-repeat: no-repeat;
background-size: 20%;
background-position: center center;
}
table.outer_tab, table.inner_tab { border-spacing: 0; width: 100% }
table.inner_tab th { text-align: center; background: #BDC0BF; font-size: 15px; font-weight: bold; padding: 2px 0; }
td.outer_td { border-top: 1px solid #BDC0BF; border-left: 1px solid #BDC0BF; /*width: 33%;*/ border-bottom: 1px solid #BDC0BF; }
td.outer_td:last-of-type { border-right: 1px solid #BDC0BF; }
tr.outer_tr:last-of-type td.outer_td { border-bottom: 1px solid #BDC0BF; }
span.lp { padding-left: 10px; display: block; }
span.inner_td_text { /*padding-right: 10px;*/ }
span.separator { font-weight: bold; text-align: center; font-size: 15px; padding-bottom: 10px; display: block; }
.footer { position: fixed; bottom: 0px; width: 100%; font-size: 11px; }
</style>
The line cosing problems is:
td.outer_td { border-top: 1px solid #BDC0BF; border-left: 1px solid #BDC0BF; /*width: 33%;*/ border-bottom: 1px solid #BDC0BF; }
If in this td.outer_td has width: 33% the PDF has blank pages before the table
Anyone has any idea why this is happening?
Any solutions to this problem?