I would like to know who can I retrieve the date from a file.
This is how I open my file:
Set fs=Server.CreateObject("Scripting.FileSystemObject")
Set f=fs.OpenTextFile(Server.MapPath("checkno_2211.html"), 1)
'Need something here to find the first date MM/DD/YYYY in the file
f.Close
Set f=Nothing
Set fs=Nothing
The code above will open the .html file now I would like to find the first date that is in that file but I don't know how to do it. :-(
The .html file will have multiple dates in it, but I only need to grab the first one.
The html and format of the date is like this:
<TD class="auto-style32" style="height: 31px">
Date:
10/7/2011</TD>
The source code of the .html file is
<HTML>
<HEAD>
<script SRC="include/general.js" language="javascript" type="text/javascript"></script>
<style type="text/css">
textarea {
font-size: 14px;
font-weight: bold;
font-family: Arial;
}
.style1 {
text-align: center;
}
.style2 {
border-style: solid;
border-width: 1px;
}
.style3 {
color: #FFFFFF;
background-color: #000000;
}
.style4 {
background-color: #000000;
}
.style5 {
color: #FFFFFF;
}
.style7 {
vertical-align: text-bottom;
}
.style8 {
font-family: Arial, Helvetica, sans-serif;
}
.style9 {
background-color: #C0C0C0;
}
.style10 {
vertical-align: middle;
}
.auto-style30 {
text-align: center;
margin-left: 0px;
}
.auto-style32 {
text-align: left;
border-bottom-style: solid;
border-bottom-width: 1px;
}
.auto-style35 {
background-color: #000000;
}
.auto-style36 {
border-top-style: solid;
border-top-width: 1px;
}
</style>
<script language="javascript" type="text/javascript">
function GetURL_Alpha(){
document.getElementById("currentURL").value= location.href;
}
</script>
<script SRC="include/general.js" language="javascript" type="text/javascript"></script>
</HEAD>
<BODY onload="printIt();GetURL_Alpha();" style="margin: 0 5">
<input name="currentURL" ID="currentURL" type="hidden" style="width: 1528px">
<CENTER>
<head>
<style type="text/css">
.auto-style36 {
text-align: center;
}
</style>
</head>
<TABLE border=0 style="width: 100%">
<TR>
<TD class="auto-style36">
<font face="Century Gothic">
<img src="logopro2.jpg"><BR>
</font>
<strong>
<font face="Century Gothic" size="1">111 Test Main St Los Angeles,
CA 12345 </font></strong><font face="Century Gothic" size="1">
<strong><BR>
</strong>
</font> <STRONG><FONT face="Century Gothic" size=1>PHONE: (888) 111-2222 FAX: (877)
111-2233</FONT></STRONG>
<br><br>
</TD>
</TR>
</TABLE>
</CENTER>
<table style="width: 100%">
<tr>
<td style="width: 408px"><font face="Arial">
<strong>
<h3 class="auto-style30" style="width: 492px">
FULL NAME<BR>
123 Test Ave<BR>
MIAMI, FL<BR>
</h3>
</strong>
</font>
</td>
<td>
</td>
<td>
</td>
</tr>
</table>
<P align = center>
<FONT face="Comic Sans MS" size=5><span class="style8">
<HR>
<P align=center>
<TABLE border=0 style="width: 100%" cellspacing="0">
<tr>
<FONT face="Comic Sans MS" size=5><span class="style8">
<TD class="auto-style32" style="height: 31px">
Date:
10/7/2011</TD>
<td style="height: 31px">Name: Someone</td>
<td class="style1" colspan="2" style="height: 31px">
<FONT face="Comic Sans MS" size=5><span class="style8">
<strong>STATEMENT</strong></td>
<TD colspan=3 align=right style="height: 31px">
Check #: 11008
</TD>
</span></font>
</tr>
<TR>
<TD colspan=7 align=center class="auto-style35">
<span class="style5"></span>
<STRONG><FONT face="Arial" size=2 color="white">
<img src="more_images/ContainerRed.png" class="style10">
MORE INFORMATION</FONT></STRONG>
</TD>
</TR>
As always,
Thanks for any help...
You could try something like this -
Dim ParseDate, NextLineIsDate
NextLineIsDate = False
Set fso = Server.CreateObject("Scripting.FileSystemObject")
set fs = fso.OpenTextFile(Server.MapPath("Saved\checkno_2211.html"), 1, true)
Do Until fs.AtEndOfStream
If NextLineIsDate Then
ParseDate = Replace(Replace(fs.ReadLine," ",""),"</TD>","")
Exit Do
End If
If Instr(fs.ReadLine,"Date:") > 0 Then NextLineIsDate = True
Loop
Response.Write ParseDate
fs.close: set fs = nothing
The code above should output the date you're searching for to the screen.
This will work providing the text Date: only appears directly above dates in your text file. If it doesn't you might need some thing more complicated but it's hard to tell without seeing all the contents of your file.
Related
I have had some help from here and a few places to build out a wonderful email signature generator. Currently any filled in info goes into the live preview. What I am trying to do now is fill out the live preview via dropdown.
In this example I am trying to allow a user to choose "fax" or "mobile" for a phone type. The goal being that it simply fills in the "f:" or "m:" in the live preview. I broke the code down just to this key element so you can see. The dropdown is the only thing I am trying to solve.
Hoping someone can guide me to where to at least look for a solution. I have experimented quite a bit with no luck.
// We wrap our segment in an anonymous wrapper function to mitigate potential conflicts with any potential third party stuff.
(function() {
// Loading animation
window.onload = function() {
setTimeout(function() {
document.querySelector('.loading-screen').style.display = 'none';
}, 1000);
}
// Adding the error validation
const inputs = document.querySelectorAll('input,select'),
submitBtn = document.getElementById('generateButton'),
signatureForm = document.getElementById('signatureForm'),
mobileselectPhoneInput = document.getElementById('mobileselect_phone'),
mobilePhoneInput = document.getElementById('mobile_phone'),
mobileBlock = document.getElementById('mobile_phone_block'),
faxPhoneInput = document.getElementById('fax_phone'),
faxBlock = document.getElementById('fax_phone_block'),
inputFields = document.querySelectorAll('[data-field]'),
socialFields = document.querySelectorAll('[data-social]'),
awardFields = document.querySelectorAll('[data-award]'),
outputBox = document.getElementById('output-code-box'),
previewBox = document.getElementById('signature-block'),
getColumn = (id) => document.querySelector(`[data-column="${id}"]`);;
for (let i = 0, x = inputs.length; i < x; i++) {
inputs[i].addEventListener('blur', function(ev) {
if (!this.classList.contains('blurred')) {
this.classList.add('blurred');
}
mobileBlock.style.display = mobilePhoneInput.value !== '' ? 'inline' : 'none';
faxBlock.style.display = faxPhoneInput.value !== '' ? 'inline' : 'none';
socialFields.forEach(social => {
getColumn(social.id).style.display = social.value !== '' ? 'inline-block' : 'none';
})
}, false);
}
inputFields.forEach(field =>
field.addEventListener('keyup', (ev) => {
mobileBlock.style.display = ev.target.id === 'mobile_phone' || mobilePhoneInput.value !== '' ? 'inline' : 'none';
getColumn(ev.target.id).innerText = ev.target.value;
faxBlock.style.display = ev.target.id === 'fax_phone' || faxPhoneInput.value !== '' ? 'inline' : 'none';
getColumn(ev.target.id).innerText = ev.target.value;
switch (ev.target.id) {
case 'email':
getColumn(ev.target.id).href = `mailto:${ev.target.value}`;
break;
case 'office_address':
getColumn(ev.target.id).href = `https://maps.google.com/maps?q=${ev.target.value}`;
break;
case 'web_address':
getColumn(ev.target.id).href = `https://${ev.target.value}`;
break;
case 'office_phone':
getColumn(ev.target.id).href = `tel:${ev.target.value}`;
break;
case 'mobile_phone':
getColumn(ev.target.id).href = `tel:${ev.target.value}`;
break;
case 'fax_phone':
getColumn(ev.target.id).href = `tel:${ev.target.value}`;
break;
}
}, false)
);
handleForm = (ev) => {
if (signatureForm.checkValidity()) {
// minify the html to tidy up and present it for user.
outputBox.value = previewBox.innerHTML.replace(/>\s+|\s+</g, function(m) {
return m.trim();
});
document.getElementById('output-code').style.display = 'block';
} else {
// Todo - do something less obnoxious to hold their hand and tell them something is wrong maybe disable the button until valid.
alert('Missing required fields in the form.')
console.log('Missing required fields, no soup for you.')
}
};
copyCode = () => {
outputBox.select();
document.execCommand('copy');
}
})();
<!DOCTYPE html>
<html lang="en-us" dir="ltr">
<head>
</head>
<body>
<main role="main">
<section class="expository" role="region" aria-label="expository">
<section id="generator-container" role="group">
<div style="background-color: #F2F2F2; padding: 20px; margin-right: 60px;">
<h2>1. Enter as much of the below information as you can for your email signature.</h2>
<form method="POST" action="." enctype="application/x-www-form-urlencoded" role="form" id="signatureForm">
<p id="formErrorContainer"></p>
<span class="required-mark">Name</span>
<label for="name">
<input data-field type="text" id="name" name="name" title="Enter name" placeholder="e.g. John Doe" pattern="^([^0-9]*)$" autofocus required>
<span>Enter valid name</span> <span class="success-validation-check"></span>
</label>
<span class="required-mark">Job Title</span>
<label for="position">
<input data-field type="text" id="position" name="position" title="Enter position" placeholder="e.g. Care Planner" pattern="^([^0-9]*)$" required>
<span>Enter valid title</span> <span class="success-validation-check"></span>
</label>
<span role="presentation" class="required-mark">Office Phone Number</span>
<br><br>
<p style="text-align: left; color: #373737; font-size: 12px;"></p>
<br>
<label for="office_phone">
<input data-field type="tel" id="office_phone" name="office_phone" title="Enter office phone number" placeholder="e.g. 1.855.983.4663">
<span>Enter valid phone number</span> <span class="success-validation-check"></span>
</label>
<span style="font-weight: bold">Phone type</span>
<label for="mobileselect_phone">
<select data-field type="text" id="mobileselect_phone" name="mobileselect_phone" title="Mobile/fax">
<option value="None" selected>None</option>
<option value="m:">mobile</option>
<option value="f:">fax</option></select>
<span>mobile or fax?</span> <span class="success-validation-check"></span>
</label>
<label for="mobile_phone">
<input data-field type="tel" id="mobile_phone" name="mobile_phone" title="Enter phone number" placeholder="e.g. 555.123.4567">
<span>Enter valid phone number</span> <span class="success-validation-check"></span>
</label>
<div id="generator-output">
<h2>2. Live Signature Preview</h2>
<br>
<br>
<hr style="height:0;border:0;border-bottom: #ddd 1px solid"><br>
<aside id="generator-output-window">
<figure id="signature-block">
<table width="525" style="width: 525px; color: #063852; font-size: 10pt;" cellspacing=0 cellpadding=0 border=0>
<tbody>
<tr>
<td style="width: 200px;" align="center" valign=middle width="200">
<img width="200" height="79" border=0 src="assets/logo.gif"><br>
<br>
</td>
<td style="width: 325px; padding-left: 20px; border-left: #888a8d 1px solid" valign=top>
<table cellspacing=0 cellpadding=0 border=0>
<tbody>
<tr>
<td height="25" style="font-size: 14pt; font-weight: 600; font-family: georgia; color: #063852" data-column="name"></td>
</tr>
<tr>
<td style="color: #063852; font-size: 10pt !important; font: Gotham, 'Helvetica Neue', Helvetica, Arial, 'sans-serif'; font-weight: 600;" data-column="position">
</td>
</tr>
</tbody>
</table>
<br>
<table cellspacing=0 cellpadding=0 border=0>
<tbody>
<tr style="vertical-align: middle;">
<td>
<a data-column="email" style="font-size: 10pt !important; font: Gotham, 'Helvetica Neue', Helvetica, Arial, 'sans-serif'; text-decoration:none !important; color: #063852 !important;"></a>
</td>
</tr>
<tr height="23" style="vertical-align: middle;">
<td>
<span style="font-size: 10pt !important; font-weight: 600;">t:</span>
<a style="color: #063852 !important; font-size: 10pt !important; font: Gotham, 'Helvetica Neue', Helvetica, Arial, 'sans-serif'; text-decoration:none !important;" data-column="office_phone"></a>
<span id="mobile_phone_block" style="display: none">
| <span style="font-size: 10pt !important; font-weight: 600;" data-column="mobileselect_phone"></span>
<a style="color: #063852 !important; font-size: 10pt !important; font: Gotham, 'Helvetica Neue', Helvetica, Arial, 'sans-serif'; text-decoration:none !important;" data-column="mobile_phone"></a>
</span>
<span id="fax_phone_block" style="display: none">
<br><span style="font-size: 10pt !important; font-weight: 600;">f: </span>
<a style="color: #063852 !important; font-size: 10pt !important; font: Gotham, 'Helvetica Neue', Helvetica, Arial, 'sans-serif'; text-decoration:none !important;" data-column="fax_phone"></a>
</span>
</td>
</tr>
</tbody>
</table>
<br>
<table cellspacing=0 cellpadding=0 border=0>
<tbody>
<tr style="text-align: left; vertical-align: middle;">
<td style="font-weight: 600; font-size: 10pt !important; font: Gotham, 'Helvetica Neue', Helvetica, Arial, 'sans-serif'; color: #063852 !important;" data-column="office_name">
<font size="2">
</td>
</tr>
<tr height="23" style="vertical-align: middle;">
<td>
<a style="text-decoration:none !important; color: #063852 !important; font-size: 10pt !important; font: Gotham, 'Helvetica Neue', Helvetica, Arial, 'sans-serif';" data-column="office_address"></a>
</td>
</tr>
<tr style="vertical-align: middle;">
<td>
<a style="text-decoration: none !important; color: #063852 !important; font-size: 10pt !important; font: Gotham, 'Helvetica Neue', Helvetica, Arial, 'sans-serif';" data-column="web_address"></a>
</td>
</tr>
</tbody>
</table>
<br>
</td>
</tr>
<tr>
<td colspan="2" style="padding-top: 20px">
<table cellspacing=0 cellpadding=0 border=0>
<tbody>
<tr>
<td width="525" data-column="corporate" style="display:none; width: 525px; margin-bottom: 20px;"><img src="./assets/images/Awards_Corporate.gif" alt="Franchisees Choice 2020" width=525 style="width: 525px;"></td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr style="vertical-align: bottom;">
<td style="padding-left: 10px; padding-right: 0px;" colspan="2">
<p><span style="text-decoration:none !important; color: #063852 !important; font-size: 10pt; font: Gotham, 'Helvetica Neue', Helvetica, Arial, 'sans-serif'; padding-bottom: 80px;" colspan="2" data-column="extra_legal"></span></p>
<br>
</td>
</tr>
</tbody>
</table>
</figure>
<!-- <button type="button" onclick="handleForm()" style="width:100%;max-width:100%" id="generateButton">Generate Email Signature</button> -->
<div id="output-code" style="margin-top: 2rem;display:none">
<label style="text-align:left">Copy and paste the code into your email signature:</label>
<button type="button" form="signatureForm" onclick="copyCode()" style="width:100%;max-width:100%">Copy The Code</button>
<textarea id="output-code-box" name="output-code" rows="8" style="width: 100%">
</textarea>
</div>
</aside>
</div>
</form>
</div>
</section>
</section>
<!--/ End Main Form -->
</main>
<script></script>
</body>
</html>
Outlook 2016 is adding space between table rows in HTML email. I can't find a fix that works. Blue section on top should be one bar, not have the white gaps. Gray section on bottom should also be one footer section, not have the two white gaps in it.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"> <!-- utf-8 works for most cases -->
<meta name="viewport" content="width=device-width"> <!-- Forcing initial-scale shouldn't be necessary -->
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <!-- Use the latest (edge) version of IE rendering engine -->
<meta name="x-apple-disable-message-reformatting"> <!-- Disable auto-scale in iOS 10 Mail entirely -->
<title>Learn how to improve employee retention by over 40%!</title> <!-- The title tag shows in email notifications, like Android 4.4. -->
<!-- Web Font / #font-face : BEGIN -->
<!-- Desktop Outlook chokes on web font references and defaults to Times New Roman, so we force a safe fallback font. -->
<!--[if mso]>
<style>
* {
font-family: sans-serif !important;
}
</style>
<![endif]-->
<!-- All other clients get the webfont reference; some will render the font and others will silently fail to the fallbacks. More on that here: http://stylecampaign.com/blog/2015/02/webfont-support-in-email/ -->
<!--[if !mso]><!-->
<link href='<link href='https://fonts.googleapis.com/css?family=Lato:400,700' rel='stylesheet' type='text/css' />
<!--<![endif]-->
<!-- Web Font / #font-face : END -->
<!-- CSS Reset -->
<style>
/* What it does: Remove spaces around the email design added by some email clients. */
/* Beware: It can remove the padding / margin and add a background color to the compose a reply window. */
html,
body {
margin: 0 auto !important;
padding: 0 !important;
height: 100% !important;
width: 100% !important;
}
/* What it does: Stops email clients resizing small text. */
* {
-ms-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%;
}
/* What is does: Centers email on Android 4.4 */
div[style*="margin: 16px 0"] {
margin:0 !important;
}
/* What it does: Stops Outlook from adding extra spacing to tables. */
table,
td {
mso-table-lspace: 0pt !important;
mso-table-rspace: 0pt !important;
}
/* What it does: Fixes webkit padding issue. Fix for Yahoo mail table alignment bug. Applies table-layout to the first 2 tables then removes for anything nested deeper. */
table {
border-spacing: 0 !important;
border-collapse: collapse !important;
table-layout: fixed !important;
margin: 0 auto !important;
}
table table table {
table-layout: auto;
}
/* What it does: Uses a better rendering method when resizing images in IE. */
img {
-ms-interpolation-mode:bicubic;
}
/* What it does: A work-around for iOS meddling in triggered links. */
*[x-apple-data-detectors] {
color: inherit !important;
text-decoration: none !important;
}
/* What it does: A work-around for Gmail meddling in triggered links. */
.x-gmail-data-detectors,
.x-gmail-data-detectors *,
.aBn {
border-bottom: 0 !important;
cursor: default !important;
}
/* What it does: Prevents Gmail from displaying an download button on large, non-linked images. */
.a6S {
display: none !important;
opacity: 0.01 !important;
}
/* If the above doesn't work, add a .g-img class to any image in question. */
img.g-img + div {
display:none !important;
}
/* What it does: Prevents underlining the button text in Windows 10 */
.button-link {
text-decoration: none !important;
}
h1 {
overflow: hidden;
text-align: center;
}
h2:before,
h2:after {
background-color: #777777;
content: "";
display: inline-block;
height: 1px;
position: relative;
vertical-align: middle;
width: 50%;
}
h2:before {
right: 0.8em;
margin-left: -50%;
}
h2:after {
left: 0.8em;
margin-right: -50%;
}
/* What it does: Removes right gutter in Gmail iOS app: https://github.com/TedGoas/Cerberus/issues/89 */
/* Create one of these media queries for each additional viewport size you'd like to fix */
/* Thanks to Eric Lepetit #ericlepetitsf) for help troubleshooting */
#media only screen and (min-device-width: 375px) and (max-device-width: 413px) { /* iPhone 6 and 6+ */
.email-container {
min-width: 375px !important;
}
}
#media only screen and (max-width: 600px){
.hero-img {
height:auto !important;
max-width:600px !important;
width: 100% !important;
}
}
</style>
<!-- Progressive Enhancements -->
<style>
/* What it does: Hover styles for buttons */
.button-td,
.button-a {
transition: all 100ms ease-in;
}
.button-td:hover,
.button-a:hover {
background: #ffd541 !important;
border-color: #ffd541 !important;
}
</style>
</head>
<body padding="0" width="100%" bgcolor="#ffffff" style="padding: 0; margin: 0; mso-line-height-rule: exactly;">
<center style="width: 100%; background: #ffffff; text-align: center; display: inline-block;"><!-- Visually Hidden Preheader Text : BEGIN -->
<div style="display:none;font-size:1px;line-height:1px;max-height:0px;max-width:0px;opacity:0;overflow:hidden;mso-hide:all;font-family: sans-serif;">Hidden text</div>
<!-- Visually Hidden Preheader Text : END --><!--
Set the email width. Defined in two places:
1. max-width for all clients except Desktop Windows Outlook, allowing the email to squish on narrow but never go wider than 600px.
2. MSO tags for Desktop Windows Outlook enforce a 600px width.
-->
<div class="email-container" style="max-width: 600px; margin: auto;"><!--[if mso]>
<table role="presentation" aria-hidden="true" cellspacing="0" cellpadding="0" border="0" width="600" align="center">
<tr>
<td>
<![endif]--><!-- Email Header : BEGIN -->
<table align="center" aria-hidden="true" border="0" cellpadding="0" cellspacing="0" role="presentation" style="max-width: 600px;" width="100%"><tr><td height="33" bgcolor="#0072bc" style="font-size: 0; line-height: 0;" class=""> </td> </tr><tr><td bgcolor="#0072bc" align="center" class=""><img alt="companyname logo" src="http://www2.companynameweb.com/l/50342/2017-04-10/8frt4b/50342/155397/companyname_logo_lockup_white.png" aria-hidden="true" border="0" height="54" style="border-spacing: 0; min-height: 54px;"></td></tr><tr><td height="33" bgcolor="#0072bc" style="font-size: 0; line-height: 0;" class=""> </td></tr></table>
<!-- Email Header : END --><!-- Email Body : BEGIN -->
<table align="center" aria-hidden="true" border="0" cellpadding="0" cellspacing="0" role="presentation" style="max-width: 600px;" width="100%">
<tr>
<td align="left" height="5" style="font-family: sans-serif; font-size:1px; mso-line-height-rule: exactly; line-height:100%;" valign="top"> </td>
</tr>
<!-- Hero Image, Flush : BEGIN -->
<tr>
<td style="background: #ffffff" class=""><img alt="" aria-hidden="true" border="0" class="hero-img" src="http://www2.companynameweb.com/l/50342/2017-04-10/8frt4d/50342/155399/replaced_informed_employees.jpg" style="height: auto; background: #ffffff; border-width: 0px; width: 600px; line-height: 0px; color: #ffffff; max-width: 600px;" width="600"></td>
</tr>
<!-- Hero Image, Flush : END --><!-- 1 Column Text + Button : BEGIN -->
<tr>
<td height="53" style="font-size: 0; line-height: 0; min-height: 53px;" class=""> </td>
</tr>
<tr>
<td class="stack-column-center" style="font-family: 'Lato', sans-serif; line-height: 1.4em; color: #777777; text-align: center; padding: 0px 30px 0px 30px;" width="100%"><span style="color:#0072bc; font-size:18px;"><strong>It’s simple:</strong></span> lorem ipsum.<br>
<br>
lorem ipsum<em>replaceds</em>.</td>
</tr>
<tr>
<td height="40" style="font-size: 0; line-height: 0; min-height: 40px;" class=""> </td>
</tr>
</table>
<!-- Button : Begin -->
<table align="center" aria-hidden="true" border="0" cellpadding="0" cellspacing="0" role="presentation" style="margin: auto;">
<tr>
<td class="button-td" pardot-data="link-underline:none !important;" style="border-radius: 12px; background: #FFC220; text-align: center; text-decoration: none !important;"><a class="button-a" href="http://www.companynameweb.com/" style="background: rgb(255, 194, 32); border: 15px solid rgb(255, 194, 32); font-family: sans-serif; font-size: 16px; letter-spacing: 1.5px; line-height: 1.1; text-align: center; display: block; border-radius: 4px; font-weight: bold; text-decoration: none !important;"><span class="button-link" style="color:#0072BC; text-transform: uppercase; text-decoration: none !important;"> SEE HOW IT WORKS </span></a></td>
</tr>
</table>
<!-- Button : END --><!-- Social : Begin -->
<table align="center" aria-hidden="true" border="0" cellpadding="0" cellspacing="0" role="presentation" width="90%">
<tr>
<td height="50" style="font-size: 0; line-height: 0; min-height: 50px;" class=""> </td>
</tr>
<tr>
<td align="center" class="stack-column-center" style="font-family: sans-serif; line-height: 20px; color: #777777; padding: 0px 20px 0px 20px; overflow: hidden;">
<h2 style="font-size: 13px; text-transform: uppercase; text-align: center;">Follow us</h2>
</td>
</tr>
<tr>
<td height="40" style="font-size: 0; line-height: 0; min-height: 40px;" class=""> </td>
</tr>
<tr>
<td align="center" class=""><!--[if (gte mso 9)|(IE)]>
<table align="center" border="0" cellspacing="0" cellpadding="0" width="600">
<tr>
<td align="center" valign="top" width="600">
<![endif]--></td>
</tr>
</table>
<table align="center" border="0" cellpadding="0" cellspacing="0" style="max-width:600px;" width="100%">
<tr>
<td align="center">
<table align="center" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="27" class=""> </td>
<td align="center" class=""><img alt="LinkedIn social icon" aria-hidden="true" height="29" src=".png" style="min-height: 29px; background: #ffffff; padding: 0 11px;" width="29"></td>
<td width="27" class=""> </td>
<td align="center" class=""><img alt="YouTube social icon" aria-hidden="true" height="29" src=".png" style="min-height: 29px; background: #ffffff; padding: 0 11px;" width="29"></td>
<td width="27" class=""> </td>
<td align="center" class=""><img alt="Facebook social icon" aria-hidden="true" height="29" src="png" style="min-height: 29px; background: #ffffff; padding: 0 11px;" width="29"></td>
<td width="27" class=""> </td>
<td align="center" class=""><img alt="Twitter social icon" aria-hidden="true" height="29" src=".png" style="min-height: 29px; background: #ffffff; padding: 0 11px;" width="29"></td>
<td width="27" class=""> </td>
</tr>
</table>
</td>
</tr>
<tr>
<td height="40" style="font-size: 0; line-height: 0; min-height: 40px;" class=""> </td>
</tr>
</table>
<!-- Social : END -->
<!-- Email Footer : Begin -->
<table align="center" bgolor="#e1e1e1" aria-hidden="true" border="0" cellpadding="0" cellspacing="0" role="presentation" style="background-color:#e1e1e1; border-spacing: 0; max-width: 600px;" width="100%">
<tr>
<td height="39" style="border-spacing: 0; line-height: 0; max-height: 39px; min-height: 39px;" class=""> </td>
</tr>
<tr>
<td class="x-gmail-data-detectors" style="padding: 0px 10px 0px 10px; width: 100%; font-size: 8px; font-family: sans-serif; line-height: 11px; text-align: center; color: #2e2e2e;"><webversion style="color:#2e2e2e; text-decoration:underline; font-weight: bold;">View as a Web Page</webversion><br><br>
© Copyright 2017 <span style="font-weight: bolder;">companyname</span><br>
#companynameweb.com | phone<br>
<span style="font-weight: bolder;">companyname</span> Headquarters | address<br><br>
Click here to unsubscribe</td>
</tr>
<tr>
<td height="39" style="border-spacing: 0; line-height: 0; max-height: 39px; min-height: 39px;" class=""> </td>
</tr>
</table>
<!-- Email Footer : END --><!--[if mso]>
</td>
</tr>
</table>
<![endif]--></div>
</center>
</body>
</html>
I fixed up issues picked by #flexlearn and add in some more code for different supported clients.
Basically these are the changes that i did:
Added display block
removed max and min height on table td
fixed font size and line height to 0px
Also you had two hrefs for the google font (now code looks better in dreamweaver)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"> <!-- utf-8 works for most cases -->
<meta name="viewport" content="width=device-width"> <!-- Forcing initial-scale shouldn't be necessary -->
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <!-- Use the latest (edge) version of IE rendering engine -->
<meta name="x-apple-disable-message-reformatting"> <!-- Disable auto-scale in iOS 10 Mail entirely -->
<title>Learn how to improve employee retention by over 40%!</title> <!-- The title tag shows in email notifications, like Android 4.4. -->
<!-- Web Font / #font-face : BEGIN -->
<!-- Desktop Outlook chokes on web font references and defaults to Times New Roman, so we force a safe fallback font. -->
<!--[if mso]>
<style>
* {
font-family: sans-serif !important;
}
</style>
<![endif]-->
<!-- All other clients get the webfont reference; some will render the font and others will silently fail to the fallbacks. More on that here: http://stylecampaign.com/blog/2015/02/webfont-support-in-email/ -->
<!--[if !mso]><!-->
<link href="https://fonts.googleapis.com/css?family=Lato:400,700" rel="stylesheet" type="text/css" />
<!--<![endif]-->
<!-- Web Font / #font-face : END -->
<!-- CSS Reset -->
<style>
/* What it does: Remove spaces around the email design added by some email clients. */
/* Beware: It can remove the padding / margin and add a background color to the compose a reply window. */
html,
body {
margin: 0 auto !important;
padding: 0 !important;
height: 100% !important;
width: 100% !important;
}
/* What it does: Stops email clients resizing small text. */
* {
-ms-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%;
}
/* What is does: Centers email on Android 4.4 */
div[style*="margin: 16px 0"] {
margin:0 !important;
}
/* What it does: Stops Outlook from adding extra spacing to tables. */
table,
td {
mso-table-lspace: 0pt !important;
mso-table-rspace: 0pt !important;
}
/* What it does: Fixes webkit padding issue. Fix for Yahoo mail table alignment bug. Applies table-layout to the first 2 tables then removes for anything nested deeper. */
table {
border-spacing: 0 !important;
border-collapse: collapse !important;
table-layout: fixed !important;
margin: 0 auto !important;
}
table table table {
table-layout: auto;
}
/* What it does: Uses a better rendering method when resizing images in IE. */
img {
-ms-interpolation-mode:bicubic;
}
/* What it does: A work-around for iOS meddling in triggered links. */
*[x-apple-data-detectors] {
color: inherit !important;
text-decoration: none !important;
}
/* What it does: A work-around for Gmail meddling in triggered links. */
.x-gmail-data-detectors,
.x-gmail-data-detectors *,
.aBn {
border-bottom: 0 !important;
cursor: default !important;
}
/* What it does: Prevents Gmail from displaying an download button on large, non-linked images. */
.a6S {
display: none !important;
opacity: 0.01 !important;
}
/* If the above doesn't work, add a .g-img class to any image in question. */
img.g-img + div {
display:none !important;
}
/* What it does: Prevents underlining the button text in Windows 10 */
.button-link {
text-decoration: none !important;
}
h1 {
overflow: hidden;
text-align: center;
}
h2:before,
h2:after {
background-color: #777777;
content: "";
display: inline-block;
height: 1px;
position: relative;
vertical-align: middle;
width: 50%;
}
h2:before {
right: 0.8em;
margin-left: -50%;
}
h2:after {
left: 0.8em;
margin-right: -50%;
}
/* What it does: Removes right gutter in Gmail iOS app: https://github.com/TedGoas/Cerberus/issues/89 */
/* Create one of these media queries for each additional viewport size you'd like to fix */
/* Thanks to Eric Lepetit #ericlepetitsf) for help troubleshooting */
#media only screen and (min-device-width: 375px) and (max-device-width: 413px) { /* iPhone 6 and 6+ */
.email-container {
min-width: 375px !important;
}
}
#media only screen and (max-width: 600px){
.hero-img {
height:auto !important;
max-width:600px !important;
width: 100% !important;
}
}
</style>
<!-- Progressive Enhancements -->
<style>
/* What it does: Hover styles for buttons */
.button-td,
.button-a {
transition: all 100ms ease-in;
}
.button-td:hover,
.button-a:hover {
background: #ffd541 !important;
border-color: #ffd541 !important;
}
</style>
</head>
<body padding="0" width="100%" bgcolor="#ffffff" style="padding: 0; margin: 0; mso-line-height-rule: exactly;">
<center style="width: 100%; background: #ffffff; text-align: center; display: inline-block;"><!-- Visually Hidden Preheader Text : BEGIN -->
<div style="display:none;font-size:1px;line-height:1px;max-height:0px;max-width:0px;opacity:0;overflow:hidden;mso-hide:all;font-family: sans-serif;">Hidden text</div>
<!-- Visually Hidden Preheader Text : END --><!--
Set the email width. Defined in two places:
1. max-width for all clients except Desktop Windows Outlook, allowing the email to squish on narrow but never go wider than 600px.
2. MSO tags for Desktop Windows Outlook enforce a 600px width.
-->
<div class="email-container" style="max-width: 600px; margin: auto;"><!--[if mso]>
<table role="presentation" aria-hidden="true" cellspacing="0" cellpadding="0" border="0" width="600" align="center">
<tr>
<td>
<![endif]--><!-- Email Header : BEGIN -->
<table align="center" aria-hidden="true" border="0" cellpadding="0" cellspacing="0" role="presentation" style="max-width: 600px;" width="100%"><tr><td height="33" bgcolor="#0072bc" style="font-size: 0px; line-height: 0px;height:33px;" class=""> </td> </tr><tr><td bgcolor="#0072bc" align="center" class=""><img alt="companyname logo" src="http://www2.companynameweb.com/l/50342/2017-04-10/8frt4b/50342/155397/companyname_logo_lockup_white.png" aria-hidden="true" border="0" height="54" style="border-spacing: 0; min-height: 54px;display:block;"></td></tr><tr><td height="33" bgcolor="#0072bc" style="font-size: 0px; line-height: 0px;" class=""> </td></tr></table>
<!-- Email Header : END --><!-- Email Body : BEGIN -->
<table align="center" aria-hidden="true" border="0" cellpadding="0" cellspacing="0" role="presentation" style="max-width: 600px;" width="100%">
<tr>
<td align="left" height="5" style="font-family: sans-serif; font-size:1px; mso-line-height-rule: exactly; line-height:100%;" valign="top"> </td>
</tr>
<!-- Hero Image, Flush : BEGIN -->
<tr>
<td style="background: #ffffff" class=""><img alt="" aria-hidden="true" border="0" class="hero-img" src="http://www2.companynameweb.com/l/50342/2017-04-10/8frt4d/50342/155399/replaced_informed_employees.jpg" style="height: auto; background: #ffffff; border-width: 0px; width: 600px; line-height: 0px; color: #ffffff; max-width: 600px;display:block;" width="600"></td>
</tr>
<!-- Hero Image, Flush : END --><!-- 1 Column Text + Button : BEGIN -->
<tr>
<td height="53" style="font-size: 0px; line-height: 0px; min-height: 53px;" class=""> </td>
</tr>
<tr>
<td class="stack-column-center" style="font-family: 'Lato', sans-serif; line-height: 1.4em; color: #777777; text-align: center; padding: 0px 30px 0px 30px;" width="100%"><span style="color:#0072bc; font-size:18px;"><strong>It’s simple:</strong></span> lorem ipsum.<br>
<br>
lorem ipsum<em>replaceds</em>.</td>
</tr>
<tr>
<td height="40" style="font-size: 0px; line-height: 0px; min-height: 40px;" class=""> </td>
</tr>
</table>
<!-- Button : Begin -->
<table align="center" aria-hidden="true" border="0" cellpadding="0" cellspacing="0" role="presentation" style="margin: auto;">
<tr>
<td class="button-td" pardot-data="link-underline:none !important;" style="border-radius: 12px; background: #FFC220; text-align: center; text-decoration: none !important;"><a class="button-a" href="http://www.companynameweb.com/" style="background: rgb(255, 194, 32); border: 15px solid rgb(255, 194, 32); font-family: sans-serif; font-size: 16px; letter-spacing: 1.5px; line-height: 1.1; text-align: center; display: block; border-radius: 4px; font-weight: bold; text-decoration: none !important;"><span class="button-link" style="color:#0072BC; text-transform: uppercase; text-decoration: none !important;"> SEE HOW IT WORKS </span></a></td>
</tr>
</table>
<!-- Button : END --><!-- Social : Begin -->
<table align="center" aria-hidden="true" border="0" cellpadding="0" cellspacing="0" role="presentation" width="90%">
<tr>
<td height="50" style="font-size: 0px; line-height: 0px; min-height: 50px;" class=""> </td>
</tr>
<tr>
<td align="center" class="stack-column-center" style="font-family: sans-serif; line-height: 20px; color: #777777; padding: 0px 20px 0px 20px; overflow: hidden;">
<h2 style="font-size: 13px; text-transform: uppercase; text-align: center;">Follow us</h2>
</td>
</tr>
<tr>
<td height="40" style="font-size: 0px; line-height: 0px; min-height: 40px;" class=""> </td>
</tr>
<tr>
<td align="center" class=""><!--[if (gte mso 9)|(IE)]>
<table align="center" border="0" cellspacing="0" cellpadding="0" width="600">
<tr>
<td align="center" valign="top" width="600">
<![endif]--></td>
</tr>
</table>
<table align="center" border="0" cellpadding="0" cellspacing="0" style="max-width:600px;" width="100%">
<tr>
<td align="center">
<table align="center" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="27" class=""> </td>
<td align="center" class=""><img alt="LinkedIn social icon" aria-hidden="true" height="29" src=".png" style="min-height: 29px; background: #ffffff; padding: 0 11px;" width="29"></td>
<td width="27" class=""> </td>
<td align="center" class=""><img alt="YouTube social icon" aria-hidden="true" height="29" src=".png" style="min-height: 29px; background: #ffffff; padding: 0 11px;" width="29"></td>
<td width="27" class=""> </td>
<td align="center" class=""><img alt="Facebook social icon" aria-hidden="true" height="29" src="png" style="min-height: 29px; background: #ffffff; padding: 0 11px;" width="29"></td>
<td width="27" class=""> </td>
<td align="center" class=""><img alt="Twitter social icon" aria-hidden="true" height="29" src=".png" style="min-height: 29px; background: #ffffff; padding: 0 11px;" width="29"></td>
<td width="27" class=""> </td>
</tr>
</table>
</td>
</tr>
<tr>
<td height="40" style="font-size: 0px; line-height: 0px; min-height: 40px;" class=""> </td>
</tr>
</table>
<!-- Social : END -->
<!-- Email Footer : Begin -->
<table align="center" bgolor="#e1e1e1" aria-hidden="true" border="0" cellpadding="0" cellspacing="0" role="presentation" style="background-color:#e1e1e1; border-spacing: 0; max-width: 600px;" width="100%">
<tr>
<td height="39" style="border-spacing: 0; line-height: 0px;height: 39px;" class=""></td>
</tr>
<tr>
<td class="x-gmail-data-detectors" style="padding: 0px 10px 0px 10px; width: 100%; font-size: 8px; font-family: sans-serif; line-height: 11px; text-align: center; color: #2e2e2e;"><webversion style="color:#2e2e2e; text-decoration:underline; font-weight: bold;">View as a Web Page</webversion><br><br>
© Copyright 2017 <span style="font-weight: bolder;">companyname</span><br>
#companynameweb.com | phone<br>
<span style="font-weight: bolder;">companyname</span> Headquarters | address<br><br>
Click here to unsubscribe</td>
</tr>
<tr>
<td height="39" style="border-spacing: 0; line-height: 0px;height: 39px;" class=""></td>
</tr>
</table>
<!-- Email Footer : END --><!--[if mso]>
</td>
</tr>
</table>
<![endif]--></div>
</center>
</body>
</html>
Let me know if this works for you.
When building spacer rows, font-size and line-height must be declared as 0px (not 0).
<tr>
<td height="13" align="center" valign="middle" style="margin: 0; font-size: 0px; line-height: 0px;"> </td>
</tr>
I figured it out.
font-size: 0; line-height: 0;
needed to be defined in pixels, and I added
valign="middle"
to each table row's data.
I replaced:
<!-- Email Header : BEGIN -->
<table align="center" aria-hidden="true" border="0" cellpadding="0" cellspacing="0" role="presentation" style="max-width: 600px;" width="100%">
<tbody>
<tr>
<td height="33" bgcolor="#0072bc" style="font-size: 0; line-height: 0;" class=""> </td>
</tr>
<tr>
<td bgcolor="#0072bc" align="center" class=""><img alt="companyname logo" src="http://www2.companynameweb.com/l/50342/2017-04-10/8frt4b/50342/155397/companyname_logo_lockup_white.png" aria-hidden="true" border="0" height="54" style="border-spacing: 0; min-height: 54px;"></td>
</tr>
<tr>
<td height="33" bgcolor="#0072bc" style="font-size: 0; line-height: 0;" class=""> </td>
</tr>
</tbody>
</table>
<!-- Email Header : END -->
with:
<!-- Email Header : BEGIN -->
<table align="center" aria-hidden="true" border="0" cellpadding="0" cellspacing="0" role="presentation" style="max-width: 600px;" width="100%">
<tbody>
<tr>
<td bgcolor="#0072bc" height="33" style="display: block; font-size: 0px; line-height: 0px;" valign="middle" class=""> </td>
</tr>
<tr>
<td align="center" bgcolor="#0072bc" class=""><img alt="companyname logo" aria-hidden="true" border="0" height="54" src="http://www2.companynameweb.com/l/50342/2017-04-10/8frt4b/50342/155397/companyname_logo_lockup_white.png" style="vertical-align: middle; border-spacing: 0; min-height: 54px;" valign="middle"></td>
</tr>
<tr>
<td bgcolor="#0072bc" height="33" style="font-size: 0px; line-height: 0px;" valign="middle" class=""> </td>
</tr>
</tbody>
</table>
<!-- Email Header : END -->
and it now works in all clients. Same with the footer. I replaced:
<!-- Email Footer : Begin -->
<table align="center" bgolor="#e1e1e1" aria-hidden="true" border="0" cellpadding="0" cellspacing="0" role="presentation" style="background-color:#e1e1e1; border-spacing: 0; max-width: 600px;" width="100%">
<tr>
<td height="39" style="border-spacing: 0; line-height: 0; max-height: 39px; min-height: 39px;" class=""> </td>
</tr>
<tr>
<td class="x-gmail-data-detectors" style="padding: 0px 10px 0px 10px; width: 100%; font-size: 8px; font-family: sans-serif; line-height: 11px; text-align: center; color: #2e2e2e;"><webversion style="color:#2e2e2e; text-decoration:underline; font-weight: bold;">View as a Web Page</webversion><br><br>
© Copyright 2017 <span style="font-weight: bolder;">companyname</span><br>
#companynameweb.com | 1-111-111-1111<br>
<span style="font-weight: bolder;">companyname</span> Headquarters | address<br><br>
Click here to unsubscribe</td>
</tr>
<tr>
<td height="39" style="border-spacing: 0; line-height: 0; max-height: 39px; min-height: 39px;" class=""> </td>
</tr>
</table>
<!-- Email Footer : END -->
with:
<!-- Email Footer : Begin -->
<table align="center" aria-hidden="true" cellpadding="0" cellspacing="0" role="presentation" style="max-width: 600px;" width="100%">
<tbody>
<tr>
<td bgcolor="#e1e1e1" height="39" style="display: block; font-size: 0px; line-height: 0px;" valign="middle" class=""> </td>
</tr>
<tr>
<td bgcolor="#e1e1e1" border="0" class="x-gmail-data-detectors" style="vertical-align: middle; border-spacing: 0; font-size: 8px; font-family: sans-serif; line-height: 11px; text-align: center; color: #2e2e2e;" valign="middle"><webversion style="color:#2e2e2e; text-decoration:underline; font-weight: bold;">View as a Web Page</webversion><br>
<br>
© Copyright 2017 <span style="font-weight: bolder;">eni</span><br>
#companynameweb.com 1-111-111-1111<br>
<span style="font-weight: bolder;">companyname</span> Headquarters | address<br>
<br>
Click here to unsubscribe</td>
</tr>
<tr>
<td bgcolor="#e1e1e1" height="39" style="display: block; font-size: 0px; line-height: 0px;" valign="middle" class=""> </td>
</tr>
</tbody>
</table>
<!-- Email Footer : END -->
and now it doesn't break anymore. td also needed bgcolor.
Adding this simple css style has worked for me :
<table style="border-spacing: 0 !important; border-collapse: collapse !important;"> </table>
Sometimes when I sent emails I receive answers stating that my email was empty. It seems very random and so far I have not been able to reconstruct this problem (have tested it on Gmail, Yahoo, AOL, Outlook, Mozilla Thunderbird, ... to no avail). It seems that only my email signature and/or sometimes also just the beginning of my email is displayed.
I've checked for font problems and problems within the html code of the mail, etc.
Where should I start?
Here's some sample code of the template I use that seems to create this error at random:
<!DOCTYPE html>
<html lang="en">
<head>
<title>
...
</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--[if !mso]>
<!-- -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!--
<![endif]-->
<style>
html, body{
margin: 0;
padding: 0;
}
</style>
</head>
<body style="width: 100%; margin: 0;">
<table bgcolor="#0568a6" border="0" style="background-color:#0568a6;border-collapse:collapse;border:0;margin:0;padding:0;width:100%">
<tbody>
<tr>
<td style="width:100%;max-width:600px;margin:0 auto">
<div style="display:block;width:98%;max-width:588px;margin:0 auto;padding:3px 1%;background-color:#0568a6">
<table bgcolor="#0568A6" align="center" style="background-color:#0568a6;border-collapse: collapse;border:0;margin:0;padding:0;width:100%">
<!--[if mso]>
<table align="center" bgcolor="#0568A6" width="588" style="background-color:#0568a6;border-collapse:collapse;border:0;margin:0;padding:0;width:588px">
<![endif]-->
<tbody>
<tr>
<td style="display:block;width:100%;max-width:588px;margin:0 auto;padding:0;background-color:#0568a6">
<img src="logo.jpg" alt="Logo" width="125" height="26" border="0" align="right" style="float: right;border:0px !important" />
</td>
</tr>
</tbody>
<!--[if mso]>
</table>
<![endif]-->
</table>
</div>
</td>
</tr>
</tbody>
</table>
<table style="width: 100%; border-collapse: collapse;" align="center" border="0">
<tbody>
<tr>
<td style="display: block; max-width: 600px; margin: 0 auto; clear: both;">
<div style="display: block; width:98%; max-width: 588px; margin: 0 auto; padding:35px 1% 28px; color: #111111;">
<table style="border-collapse: collapse; width: 100%;">
<!--[if mso]>
<table align="center" width="588" style="border-collapse: collapse;">
<![endif]-->
<tbody>
<tr>
<td style="padding: 0px 0px 4px 0px; width: 100%; max-width: 588px;">
<p style="font-family:Verdana,Geneva,sans-serif; color: #222222; margin-bottom: 15px; font-weight: normal; font-size: 13pt; line-height: 1.25;">
Content
</p>
</td>
</tr>
<!--[if mso]>
</table>
<![endif]-->
</tbody>
</table>
</div>
</td>
</tr>
</tbody>
</table>
<table style="border-collapse: collapse; width: 100%;" align="center" bgcolor="#efefef" border="0">
<tbody>
<tr>
<td style="display: block; max-width: 600px; margin: 0 auto; clear: both;">
<div style="display: block; max-width: 588px;width:98%; margin: 0 auto; padding: 6px 1% 16px;">
<table style="border-collapse: collapse; width: 100%;" bgcolor="#efefef">
<!--[if mso]>
<table align="center" bgcolor="#efefef" width="588" style="border-collapse: collapse;">
<![endif]-->
<tbody>
<tr>
<td style="padding: 0px 0px 4px 0px; width: 100%; max-width: 588px;">
<p style="font-size: 8.5pt; color: #999999;font-family:Verdana,Geneva,sans-serif; line-height: 1.2; border: 0;">
Footer
<br>
<br>
<a target="_blank" href="%UNSUBSCRIBELINK%" style="font-size: 8.5pt; color: #278ac8 !important; line-height: 1.2; text-decoration: none; border: 0;font-family:Verdana,Geneva,sans-serif;">
<span style="color: #278ac8; text-decoration: none;">
CLICK TO UNSUBSCRIBE
</span>
</a>
</p>
</td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
</tbody>
</table>
</body>
</html>
I found the answer to this problem. It seems to be a bug in (earlier) versions of IE (who guessed it...).
The key part of the problem is the 1% padding right and left in the DIV element that serves as a container.
<body style="width: 100%; margin: 0;">
<table bgcolor="#0568a6" border="0" style="background-color:#0568a6;border-collapse:collapse;border:0;margin:0;padding:0;width:100%">
<tbody>
<tr>
<td style="width:100%;max-width:600px;margin:0 auto">
// this DIV has right and left padding of 1% which causes a bug in IE
<div style="display:block;width:98%;max-width:588px;margin:0 auto;padding:3px 1%;background-color:#0568a6">
<table bgcolor="#0568A6" align="center" style="background-color:#0568a6;border-collapse: collapse;border:0;margin:0;padding:0;width:100%">
<!--[if mso]>
... and so on
The result was that in some mail clients (Gmail, AOL, Comcast, maybe some others) the container of the message was rendered with a HUGE width (approx. 100,000px, for no obvious reason of course) of which the padding took ca. 1000px on each side.
As the content was centered, it was simply out of view for the person opening the message (no normal person has such a wide screen)
I replaced the 1% padding with a 3px padding and that solved the problem.
Below is a screen shot to show the problem, rendered in IE8. The solution is to change the padding as described above.
I am having trouble exporting to pdf if I have a two lines in a td. Can you please advise. the code is as follows:
.style7
{
font-weight: bold;
display:block;
}
.style8
{
font-size: smaller;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:Panel ID="pnlPerson" runat="server" style="margin-right: 3px" Width="1045px">
<div class="style3"><strong>MAINTENANCE ENGINEERING CALL (MEC)</strong></div>
<table border="1"
style="font-family: Arial; font-size: 10pt; width: 1048px; height: 390px;">
<tr>
<td><span class="style7">Shop Submittal Date</span>
<span="style8"><asp:TextBox ID="Sdate" runat="server"></asp:TextBox></span>
</td>
</tr>
Thank you so much.
I have been unable to hide content in Office 365 that is for a mobile-only portion of an email. I have hid the content in other email clients, including Gmail and Outlook 2007 and 2013. Is there a workaround for Office 365?
Here's a sample of a template I've been working with:
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style type="text/css">
body {
width:100% !important;
-webkit-text-size-adjust:100%;
-ms-text-size-adjust:100%;
margin:0;
padding:0;
}
img {
outline:none;
text-decoration:none;
-ms-interpolation-mode:bicubic;
}
table {
border-collapse:collapse;
}
table td {
border-collapse:collapse;
mso-table-lspace:0pt;
mso-table-rspace:0pt;
padding:0;
}
.yshortcuts, .yshortcuts a, .yshortcuts a:link, .yshortcuts a:visited, .yshortcuts a:hover, .yshortcuts a span {
color:#000;
text-decoration:none !important;
border-bottom:none !important;
background:none !important;
}
.ReadMsgBody {
width:100%;
}
.ExternalClass {
width:100%;
}
/* END OF GLOBAL RESETS */
#media only screen and (max-device-width: 500px), screen and (max-width: 500px) {
/* START OF MOBILE GRID */
*[class=hide] {
display:none !important;
}
*[class].block {
width:400px!important;
display:block!important;
clear:both!important;
}
*[class=showmobile] {
display:block !important;
margin:auto !important;
width:400px!important;
height:auto !important;
max-height:inherit !important;
overflow:visible !important;
}
}
span.yshortcuts {
color:#000;
background-color:none;
border:none;
}
span.yshortcuts:hover, span.yshortcuts:active, span.yshortcuts:focus {
color:#000;
background-color:none;
border:none;
}
[class].contenteditable {
-webkit-user-select: text !important;
-khtml-user-select: auto !important;
-moz-user-select: auto !important;
-ms-user-select: auto !important;
-o-user-select: auto !important;
user-select: auto !important;
}
</style>
</head>
<body bgcolor="#ffffff" margin="0" style="-webkit-font-smoothing:antialiased; width:100% !important; background:#ffffff; -webkit-text-size-adjust:none;">
<!--Wrapper-->
<table width="100%" border="0" cellpadding="0" cellspacing="0" align="center">
<tr>
<td width="100%" valign="top" bgcolor="#ffffff"><!--content-->
<table width="750" cellpadding="0" cellspacing="0" class="hide" align="center">
<tbody>
<tr>
<td width="235" class="hide"><img src="http://www.wnyc.org/i/620/372/l/80/1/blackbox.jpeg" width="235" border="0" style="display:block;" alt=""/></td>
<td bgcolor="#ffffff" width="235" class="hide"><img src="http://www.wnyc.org/i/620/372/l/80/1/blackbox.jpeg" width="235" border="0" style="display:block;" alt=""/></td>
<td width="235" class="hide"><img src="http://www.wnyc.org/i/620/372/l/80/1/blackbox.jpeg" alt="" width="235" border="0" style="display:block;"/></td>
</tr>
</tbody>
</table>
<!--content end-->
<!-- mobile only content -->
<div height="0" style="display:none; width:0px; max-height:0px; overflow:hidden;" class="showmobile">
<table height="0" width="235" bgcolor="#ffffff" align="center" cellpadding="0" cellspacing="0" class="showmobile" style="margin:0 auto; display:none; border:0;">
<tr>
<td class="showmobile block" align="left"><table width="235" border="0" align="center" cellpadding="0" cellspacing="0" class="showmobile" style="margin:0 auto; display:none;" bgcolor="#ffffff">
<tr>
<td><img src="http://www.wnyc.org/i/620/372/l/80/1/blackbox.jpeg" width="235" border="0" style="display:block;padding-top:10px;padding-bottom:10px;" alt=""/></td>
</tr>
<tr>
<td width="100%" align="center" style="padding: 8px; line-height: 12px;background-color:#ed008c;"><span style="font-family: Arial, Helvetica, sans-serif; font-size: 11px; color: #ffffff;"> To unsubscribe, click here</a>. </span></td>
</tr>
</table></td>
</tr>
</table>
</div>
<!-- end mobile only content --></td>
</tr>
</table>
<!--End Wrapper-->
</body>
After spending the last couple days trying to come up with a solution for just this the best I could come up with was adding an inline style to the containing cell of "font-size: 0px;". In a media query I simply set the font-size back to desired.