I have a pretty simple unordered list with some links in an html email that generated by a server. It looks and works as expected in most email clients (gmail, apple mail, outlook web), but in Outlook desktop some of the links don't work, seemingly at random.
Specifically, some of the links (all from the same list) work, some don't. When they don't, they don't appear as links: they're not underlined and the cursor doesn't change when you mouse over them.
Here's the code:
<!doctype html>
<html>
<head>
<meta name="viewport" content="width=device-width">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>New Lead</title>
<style>
#media only screen and (max-width: 620px) {
table[class=body] h1 {
font-size: 28px !important;
margin-bottom: 10px !important;
}
table[class=body] h2 {
margin-bottom: 5px !important;
}
table[class=body] p,
table[class=body] ul,
table[class=body] ol,
table[class=body] td,
table[class=body] span,
table[class=body] a {
font-size: 16px !important;
}
table[class=body] .wrapper,
table[class=body] .article {
padding: 10px !important;
}
table[class=body] .content {
padding: 0 !important;
}
table[class=body] .container {
padding: 0 !important;
width: 100% !important;
}
table[class=body] .main {
border-left-width: 0 !important;
border-radius: 0 !important;
border-right-width: 0 !important;
}
table[class=body] .btn table {
width: 100% !important;
}
table[class=body] .btn a {
width: 100% !important;
}
table[class=body] .img-responsive {
height: auto !important;
max-width: 100% !important;
width: auto !important;
}
}
#media all {
.btn-primary table td:hover {
background-color: #229422 !important;
}
.btn-primary a:hover {
background-color: #229422 !important;
border-color: #229422 !important;
}
.statusLinks a {
color: #870a0a
}
}
</style>
</head>
<body class="" style="background-color: #f6f6f6; font-family: sans-serif; -webkit-font-smoothing: antialiased; font-size: 14px; line-height: 1.4; margin: 0; padding: 0; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%;">
<span class="preheader" style="color: transparent; display: none; height: 0; max-height: 0; max-width: 0; opacity: 0; overflow: hidden; mso-hide: all; visibility: hidden; width: 0;">New lead from Bill Jones of Jason Test 20220511 B</span>
<table role="presentation" border="0" cellpadding="0" cellspacing="0" class="body" style="margin-top: 20px; border-collapse: separate; mso-table-lspace: 0pt; mso-table-rspace: 0pt; background-color: #f6f6f6; width: 100%;" width="100%" bgcolor="#f6f6f6">
<tr>
<td style="font-family: sans-serif; font-size: 14px; vertical-align: top;" valign="top"> </td>
<td class="container" style="font-family: sans-serif; font-size: 14px; vertical-align: top; display: block; max-width: 580px; padding: 10px; width: 580px; margin: 0 auto;" width="580" valign="top">
<div class="content" style="box-sizing: border-box; display: block; margin: 0 auto; max-width: 580px; padding: 10px;">
<!-- START CENTERED WHITE CONTAINER -->
<table role="presentation" class="main" style="border-collapse: separate; mso-table-lspace: 0pt; mso-table-rspace: 0pt; background: #ffffff; border-radius: 3px; width: 100%;" width="100%">
<!-- START MAIN CONTENT AREA -->
<tr>
<td class="wrapper" style="font-family: sans-serif; font-size: 14px; vertical-align: top; box-sizing: border-box; padding: 20px;" valign="top">
<table role="presentation" border="0" cellpadding="0" cellspacing="0" style="border-collapse: separate; mso-table-lspace: 0pt; mso-table-rspace: 0pt; width: 100%;" width="100%">
<tr>
<td style="font-family: sans-serif; font-size: 14px; vertical-align: top;" valign="top">
<img src="http://company.com/logo.png" alt="company logo" width="227" height="31" border="0" style="-ms-interpolation-mode: bicubic; max-width: 100%; padding-bottom: 2em; border: 0; outline: none; text-decoration: none; display: block;">
Hello,
<br/>
<br/>The following sales lead has been assigned to you based on the inquiry sender's location and needs.
<br/>
<br/>Please process the lead within 24 hours; contact the inquiry sender (when needed) and select the correct status or delegate the lead to someone else. Options are listed in the bottom of this email.
<br/>
<br/>
<h2>Lead Details</h2>
<table align="left" role="presentation" cellspacing="0" cellpadding="0" border="0" style="display:block; width: 100% !important; margin-bottom: 20px"><tbody>
<tr><td style="color: #888888; font-size: 12px;"> ID#:</td></tr>
<tr><td style="padding-left: 10px;">218271</td></tr>
<tr><td style="color: #888888; font-size: 12px; padding-top: 10px;"> Source:</td></tr>
<tr><td style="padding-left: 10px;">Manually-added lead - Outbound Calls</td></tr>
<tr><td style="color: #888888; font-size: 12px; padding-top: 10px;"> Status:</td></tr>
<tr><td style="padding-left: 10px;">Awaiting Sales Action</td></tr>
<tr><td style="color: #888888; font-size: 12px; padding-top: 10px;">Generated Date:</td></tr>
<tr><td style="padding-left: 10px;">12 May 2022</td></tr>
<tr><td style="color: #888888; font-size: 12px; padding-top: 10px;">Company:</td></tr>
<tr><td style="padding-left: 10px;">Jason Test 20220511 B</td></tr>
<tr><td style="color: #888888; font-size: 12px; padding-top: 10px;">Location:</td></tr>
<tr>
<td style="padding-left: 10px;">
United States
</td>
</tr>
<tr><td style="color: #888888; font-size: 12px; padding-top: 10px;">Contact:</td></tr>
<tr><td style="padding-left: 10px;"><div><div style="margin: .3em 0"><span style="margin-right: .25em; border: 1px solid #ccc;padding:.25em">Bill</span> <span style="border: 1px solid #ccc;padding:.25em">Jones</span></div></div><div>jason#company.com</div><div>Marketing Allowed: No</div></td></tr>
<tr><td style="color: #888888; font-size: 12px; padding-top: 10px;">Interest:</td></tr>
<tr><td style="padding-left: 10px;">Training</td></tr>
<tr><td style="color: #888888; font-size: 12px; padding-top: 10px;">Customer Comment:</td></tr>
<tr><td style="padding-left: 10px;">
--
</td></tr>
</tbody></table>
<table role="presentation" style="border-collapse: collapse; mso-table-lspace: 0pt; mso-table-rspace: 0pt; background: #F7ACAD; border-radius: 3px; width: 100%;" width="100%">
<tr>
<td style="padding:10pt">
<h2 style="margin-top:0">Update Lead Status</h2>
<p>Please process this as soon as possible and select one of the options below. For detailed information of the categories, please review your Sales Handbook.</p>
<ul class="statusLinks">
<li>Qualify</li>
<li>Mark as Non-Sales Inquiry</li>
<li>Work-In-Progress</li>
<li>Mark as Disqualified</li>
<li>Mark as Junk / Solitication</li>
<li>Send to Dealer</li>
<li>Mark as Career / Media / PR / Sponsorship / Supplier Inquiry</li>
<li>Delegate to Someone Else</li>
</ul>
</td>
</tr>
</table>
</td>
</tr>
</table>
<hr style="clear: both; border: 0; border-bottom: 1px solid #cacaca; margin: 20px 0;">
<p style="font-family: sans-serif; font-size: 14px; font-weight: normal; margin: 0; margin-bottom: 15px;">Your feedback is always appreciated.</p>
</td>
</tr>
<!-- END MAIN CONTENT AREA -->
</table>
<!-- END CENTERED WHITE CONTAINER -->
<!-- START FOOTER -->
<div class="footer" style="clear: both; margin-top: 10px; text-align: center; width: 100%;">
<table role="presentation" border="0" cellpadding="0" cellspacing="0" style="border-collapse: separate; mso-table-lspace: 0pt; mso-table-rspace: 0pt; width: 100%;" width="100%">
<tr>
<td class="content-block" style="font-family: sans-serif; vertical-align: top; padding-bottom: 10px; padding-top: 10px; color: #999999; font-size: 12px; text-align: center;" valign="top" align="center">
©2022 product, a product of Company.
</td>
</tr>
</table>
</div>
<!-- END FOOTER -->
</div>
</td>
<td style="font-family: sans-serif; font-size: 14px; vertical-align: top;" valign="top"> </td>
</tr>
</table>
</body>
</html>
Some relevant details:
The email uses the Cerberus html template.
There are no list specific styles in play outside of changing text color (no positioning or z-index stuff, etc.)
I can't replicate it myself at all; my user can't replicate it on demand either, but sees the problem routinely.
As far as I can tell the user is using the most up to date version of outlook desktop with no plugins.
Questions
Is anyone else seeing this problem?
Are there any obvious problems with my markup?
Are there any ways to lint/validate html emails for outlook standards?
Updates:
20220513 Stabbing around in the dark, I noticed if you change the zoom in the separate message window some of the links no longer work. They still look like links, but the hover and click actions no longer work. This might be related.
20220513 With some more messing around, when viewing the message in the separate, just scrolling up and down changes whether or not the links work. This has got to be some kind of outlook bug.
I am trying to create a responsive two-column row (in a table) using media-queries for an email. Using the table align method from Mailchimp, it looks great on desktop and Android. On iPhone, the media query tells the "templatecolumnContainer" to display 100% width of the screen under 480px, but it only fills 50%. The other column container, does wrap underneath the image and stretch the width of the viewport.
Here's the media query -
#media only screen and (max-width: 480px) {
.templateColumnContainer2 {
display: block !important;
width:100% !important;
margin-left: auto !important;
margin-right: auto !important;
}
}
And here's the two columns -
<table align="center" border="0" cellpadding="0" cellspacing="0" id="templateColumns" style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; border-collapse: collapse !important;display: inline-block !important;padding-bottom: 15px;" width="750">
<tbody>
<tr>
<td align="center" valign="top">
<table align="left" border="0" cellpadding="0" cellspacing="0" class="templateColumnContainer2" style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; border-collapse: collapse !important;display: block !important;padding-bottom: 15px; padding-left: 15px;" width="360">
<tbody>
<tr>
<td class="leftColumnContent" style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; color: #505050; font-family: Helvetica; font-size: 14px; line-height: 21px; text-align: center;">
<img class="columnImage" src="image.jpg">
</td>
</tr>
</tbody>
</table>
<table align="right" border="0" cellpadding="0" cellspacing="0" class="templateColumnContainer2" style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; border-collapse: collapse !important;display: block !important;padding-bottom: 15px; padding-left: 15px;" width="360">
<tbody>
<tr>
<td class="rightColumnContent" height="200" style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; color: #505050; font-family: Helvetica; font-size: 14px; line-height: 18px; text-align: left; padding-left: 15px;" valign="top">
<h3 style="color: #606060 !important; display: inline; font-family: Helvetica; font-size: 16px; font-style: normal; font-weight: bold; letter-spacing: normal; line-height: 16px; margin: 0;text-align: left;">Header</h3>
<p>Some paragraph text</p>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
I'd be eternally grateful if anyone can fill in whatever coding gap I'm omitting!! Thanks in advance.
This should do what you ask:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Untitled Document</title>
<style>
#media screen and (max-width: 750px) {
#templateColumns {
width: 100% !important;
}
.templateColumnContainer2 {
display: block !important;
width: 100% !important;
max-width: 100% !important;
}
}
</style>
</head>
<body width="100%" style="Margin: 0;">
<center style="width: 100%;">
<table cellspacing="0" cellpadding="0" border="0" align="center" width="750" style="margin: auto;" id="templateColumns">
<tr>
<td class="templateColumnContainer2" width="50%" valign="top">
<table cellspacing="0" cellpadding="0" border="0" width="100%">
<tr>
<td class="leftColumnContent" style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; color: #505050; font-family: Helvetica; font-size: 14px; line-height: 21px; text-align: center;">
<img class="columnImage" src="image.jpg" width="100%" height="auto">
</td>
</tr>
</table>
</td>
<td class="templateColumnContainer2" width="50%" valign="top">
<table cellspacing="0" cellpadding="0" border="0" width="100%">
<tr>
<td class="rightColumnContent" height="200" style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; color: #505050; font-family: Helvetica; font-size: 14px; line-height: 18px; text-align: left; padding-left: 15px;">
<h3 style="color: #606060 !important; font-family: Helvetica; font-size: 16px; font-style: normal; font-weight: bold; letter-spacing: normal; line-height: 16px; margin: 0;text-align: left;">Header</h3>
<p>Some paragraph text</p>
</td>
</tr>
</table>
</td>
</tr>
</table>
</center>
</body>
</html>
I'm not sure what parent HTML you have above this, but I included the <body> and <center>, and slightly rewrote the <table> markup + classes to achieve a responsive layout that stacks once the viewport dips below the <table>'s desktop width of 750px.
I've been turning this design over all day. Basically there's a white bar on the side of my email design that I can not figure out how to remove. It's only present in iOS9 and should have something to do with my html, body, #mainWrapper, or #main. I've tried negative margin adding/removing min-widths.
How do I remove the right bar for a 100% response layout? Any ideas would be helpful.
Here is a picture of the problem.
And here is my HTML/CSS:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>xxxxx</title>
<style data="noinline">
body {
width: 100% !important;
margin:0 !important;
padding:0 !important;
}
.appleLink a,
.appleLink,
.telLink {
color:#646469 !important;
text-decoration:none !important;
}
.appleLinkWhite a,
.appleLinkWhite {
color:#ffffff !important;
text-decoration:none !important;
}
.ReadMsgBody { width: 100%;}
.ExternalClass {width: 100%;}
.aBn {
border-bottom: 0;
}
div #mainWrapper {width:100% !important; table-layout:fixed !important; min-width:100% !important;}
/* MOBILE STYLES */
#media only screen and (max-device-width: 480px) {
body[yahoo=yes] {
margin: 0 !important;
padding: 0 !important;
}
table[class=mobileHide],
td[class=mobileHide],
span[class=mobileHide] {
display: none !important;
}
div[class=mobileShow] {
display: block !important;
max-height: none !important;
}
table[class=mobileShow] {
display: table !important;
max-height: none !important;
}
a[class=mobileShow] {
display: inline !important;
max-height: none !important;
}
img[class=mobileShow] {
display: block !important;
max-height: none !important;
}
table [id=mainWrapper],
table[id=main],
table[id=headerWrapper],
table[id=leadlineWrapper],
table[id=heroWrapper],
table[id=messageHeaderWrapper],
table[id=messageWrapper],
table[id=ctaWrapper],
table[id=footerWrapper]{
margin:0 auto !important;
width:100% !important;
padding:0 !important;
}
table[id=logoMobile] {
background:#ffffff;
}
table[id=logoMobile] img
table[id=hero] img {
display: block !important;
height:auto !important;
width:100% !important;
}
table[id=footer] img {
display: block !important;
height:auto !important;
width:60% !important;
margin:0 auto;
}
td[id=cta] img {
display: block !important;
height:auto !important;
width:60% !important;
margin:0 auto 3px auto;
}
td[id=messageHeader] {
margin-top:3px;
}
td[id=leadline],
td[id= requiredFooterText] {
font-size: 14px !important;
}
td[id=messageHeader],
td[id=messageBody] {
font-size: 20px !important;
}
table[id=bulletList],
table[id=requiredFooter] {
width:85% !important;
margin:0 auto !important;
}
}
/* end MOBILE STYLES*/
</style>
<style>
/* DESKTOP STYLES */
.appleLink a,
.appleLink,
.telLink {
color:#646469 !important;
text-decoration:none !important;
}
.appleLinkWhite a,
.appleLinkWhite {
color:#ffffff !important;
text-decoration:none !important;
}
.mobileShow,
.mobileShow img {
display:none;
max-height:0;
font-size:0;
}
img {
display:block;
border:0;
}
p {
margin:0;
padding:0;
display:inline;
}
table {
margin: 0 auto;
}
table td {
border-collapse:collapse;
}
#mainWrapper {
background: #646469;
width:100%;
height:auto;
}
#logoWrapper {
background: #ffffff;
}
#leadlineWrapper {
background: #ffffff;
}
#leadline {
color: #646469;
font-family: Verdana, sans-serif;
font-size: 10px;
line-height: 1.25;
padding-bottom: 15px;
padding-top: 15px;
padding-left: 20px;
padding-right: 20px;
text-align: center;
}
#heroWrapper,
#messageHeaderWrapper {
width: 600px;
margin: 0 auto;
background-color:#e0e0e1;
}
#messageHeader {
padding-bottom: 25px;
padding-left: 35px;
padding-right: 35px;
color: #333333;
font-family: Georgia, serif;
font-size: 16px;
line-height: 1.5;
background-color:#e0e0e1;
}
#leadlineWrapper,
#messageWrapper,
#ctaWrapper {
width: 600px;
margin: 0 auto;
background-color:#ffffff;
}
#messageBody {
padding-top: 25px;
padding-left: 35px;
padding-right: 35px;
color: #646469;
font-family: Verdana, sans-serif;
font-size: 12px;
line-height: 1.5;
}
#messageBody a {
color: #8b1b3f;
}
#bulletList td {
vertical-align:top;
color: #646469;
font-family: Verdana, sans-serif;
font-size: 12px;
line-height: 1.5;
}
.bullet {
width:14px;
line-height: 1.5;
}
#ctaContainer {
text-align: center;
display:block;
}
#cta {
padding:35px;
}
#footerWrapper {
background-color:#333333;
width:600px;
}
#footer {
padding-top: 25px;
padding-bottom: 25px;
text-align: center;
}
#footer img{
display: inline-block;
}
#requiredFooterText {
color: #ffffff;
font-family: Verdana, sans-serif;
font-size: 10px;
line-height: 1.25;
padding-top: 30px;
text-align: center;
}
/* end DESKTOP STYLES*/
</style>
</head>
<body yahoo="yes" style="-webkit-text-size-adjust:none; margin: 0; padding:0;">
<table id="mainWrapper" border="0" cellpadding="0" cellspacing="0" width="100%" align="center"><tr>
<td>
<table id="headerWrapper" border="0" cellspacing="0" cellpadding="0" align="center">
<tr>
<td id="logoContainer">
<table class="mobileHide" id="logoDesktop" border="0" cellspacing="0" cellpadding="0" align="center" style="width:600px; background-color:#ffffff;"><tr>
<td style="text-transform: none;">
<a href="xxxxx" target="_blank">
<img src="https://xxxxx/logo_desktop.jpg" width="600" height="auto" border="0" style="color: #8b1b3f; font-family: Verdana, sans-serif; font-size: 13px; text-transform: none;" alt="xxxxx"></a>
</td>
</tr></table>
<!-- /#logoDesktop --><div class="mobileShow">
<table class="mobileShow" id="logoMobile" border="0" cellspacing="0" cellpadding="0" align="center"><tr>
<td style="text-transform: none;">
<a class="mobileShow" href="http://xxxxx" target="_blank">
<img class="mobileShow" src="https://xxxxx/logo_mobile.jpg" width="100%" height="auto" border="0" style="color: #8b1b3f; font-family: Verdana, sans-serif; font-size: 13px; text-transform: none;" alt="xxxxx"></a>
</td>
</tr></table>
<!-- /#logoMobile -->
</div>
</td>
</tr>
<tr>
<td>
<table id="leadlineWrapper" border="0" cellpadding="0" cellspacing="0" align="center"><tr>
<td id="leadline">Scenic surroundings and big-city opportunities.</td>
</tr></table>
<!-- /#leadlineWrapper -->
</td>
</tr>
</table>
<!-- /#headerWrapper --><table id="main" width="100%" border="0" cellpadding="0" cellspacing="0" align="center"><tbody>
<tr>
<td id="heroContainer">
<table id="heroWrapper" align="center" border="0" cellpadding="0" cellspacing="0">
<tr>
<td id="hero" style="text-transform: none; border-collapse: collapse;">
<a href="xxxxx" id="auto_lnk_id 3" name="auto_lnk_name 3" target="_blank">
<img alt="xxxxxx" border="0" src="https://xxxxx/hero_msg6.jpg" style="color: #8b1b3f; font-family: Verdana, sans-serif; font-size: 13px; border: 0; width:600px; height:350px;" /></a>
</td>
</tr>
</table>
<table id="messageHeaderWrapper" align="center" border="0" cellpadding="0" cellspacing="0"><tr>
<td id="messageHeader" style="text-transform: none;">[Contact.First Name],<br /><br />Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi vitae sem finibus, consectetur nunc a, congue purus. Quisque maximus est nec lectus posuere ornare. In sit amet feugiat lectus.</td>
</tr>
</table>
<!-- /#hero -->
</td>
<!-- /#heroWrapper -->
</tr>
<tr>
<td id="messageContainer">
<table id="messageWrapper" align="center" border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td id="messageBody" style="text-transform: none; border-collapse: collapse;">
<strong>Cras euismod.</strong><br />Suspendisse non eros in dolor posuere lobortis. Suspendisse non odio congue, imperdiet diam quis, pretium leo. Curabitur ac nulla elit.<br /><br /><strong>Vestibulum egestas.</strong><br />Curabitur ac convallis erat. Nullam at ultrices eros. Donec ac metus justo. Ut bibendum metus eu sodales commodo.<br /><br /><strong>Praesent eget.</strong><br /> Vivamus varius, augue ac egestas pharetra, leo nibh varius risus, in porta purus nibh a nulla. Donec gravida vitae tellus at accumsan.<br /><br />Etiam nisi orci, vulputate nec blandit at, suscipit ac lorem.
</td>
<!-- /#messageBody --></tr>
</tbody>
</table>
<!-- /#messageWrapper -->
</td>
</tr>
<tr>
<td id="ctaContainer">
<table id="ctaWrapper" align="center" border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td align="center" id="cta" style="text-transform: none; border-collapse: collapse;">
<img alt="xxxxxx" border="0" height="38" src="https://xxxxxx/cta_at_desktop.jpg" style="color: #8b1b3f; font-family: Verdana, sans-serif; font-size: 13px; border: 0; display: block;" width="196" /></td>
</tr>
</tbody>
</table>
<!-- /#cta -->
</td>
</tr>
<tr>
<td id="footerContainer">
<table id="footerWrapper" border="0" cellspacing="0" cellpadding="0" align="center"><tr>
<td id="footer" style="text-transform: none;" align="center">
<a href="http://xxxxxx" target="_blank">
<img src="https://xxxxxx/footer_logo.png" width="196" height="42" border="0" style="color: #ffffff; font-family: Verdana, sans-serif; font-size: 13px;" alt="xxxxxx"></a>
</td>
</tr></table>
<!-- /#hero -->
</td>
<!-- /#heroWrapper -->
</tr>
</tbody></table>
<!-- /#main --><table id="requiredFooter" width="600" border="0" cellpadding="0" cellspacing="0" align="center"><tr>
<td id="requiredFooterText">
This message was sent to [Contact.Email] by xxxxxx.<br><br>
xxxxxx<br>
xxxxxx<br>
xxxxxx<br>
xxxxxx<br><br>
We received your contact information from [Contact._source].<br><span style="color:#ffffff; text-decoration:underline;">Unsubscribe</span> from future email communications from xxxxxx.<br><br><br>
</td>
</tr></table>
<!-- /#requiredFooter -->
</td>
</tr></table>
<!-- /#mainWrapper --><style data="noinline">#media print{ #_t { background-image: url('https://ajucb1v6.emltrk.com/ajucb1v6?p&d=[Contact.Email]&t=[Campaign.Id]');}} div.OutlookMessageHeader {background-image:url('https://ajucb1v6.emltrk.com/ajucb1v6?f&d=[Contact.Email]&t=[Campaign.Id]')} table.moz-email-headers-table {background-image:url('https://ajucb1v6.emltrk.com/ajucb1v6?f&d=[Contact.Email]&t=[Campaign.Id]')} blockquote #_t {background-image:url('https://ajucb1v6.emltrk.com/ajucb1v6?f&d=[Contact.Email]&t=[Campaign.Id]')} #MailContainerBody #_t {background-image:url('https://ajucb1v6.emltrk.com/ajucb1v6?f&d=[Contact.Email]&t=[Campaign.Id]')}</style>
<div id="_t"></div>
<img src="https://ajucb1v6.emltrk.com/ajucb1v6?d=[Contact.Email]&t=[Campaign.Id]" width="1" height="1" border="0">
</body>
</html>
All of the images/text have been removed to protect my client.
I'm just hoping its a stupid color/semicolon error or something, and not the 'magical padding' that Litmus has discussed over new additions to iOS9 Apple Mail.
I am working on email newsletter for one of my client and designed the whole email newsletter in table(instead of DIV) but having hard time hiding a table in responsive view and one another table in desktop view
I have tried display:none important! and it didn't work
You can see my newsletter here.
I want to hide right column in mobile view here.
Please let me know if someone else encountered the similar problem and how did they resolve that.
It seems that you put display: none; in one of your media queries but not all. I tried putting it in the "general classes" (as you call it in your code) and it works like a charm (see here).
So a code that works is :
<!doctype html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; minimum-scale=1.0; user-scalable=0;" />
<meta name="SKYPE_TOOLBAR" content="SKYPE_TOOLBAR_PARSER_COMPATIBLE"/>
<title>Oncology</title>
<style type="text/css">
html, body {
margin:0px 0px 0px 0px;
padding:0px 0px 0px 0px;
font-family:Arial, Helvetica, sans-serif;
font-size:14px;
color:#000000;
background:url(../images/bg01.jpg) left top repeat;
}
/* Global Classes starts */
* {
outline:none;
}
div, form, P
{
margin:0px;
padding:0px;
}
A IMG /* This Class will disble border over any link on images*/
{
border:none;
outline:none
}
a
{
text-decoration:underline;
color:#004274;
}
a:hover
{
text-decoration:none;
color:#cb0202;
}
p
{
color:#000000;
padding:5px 0px 5px 0px;
margin:5px 0px 5px 0px;
}
p a
{
text-decoration:underline;
color:#004274;
}
p a:hover
{
text-decoration:none;
color:#cb0202;
}
UL
{
/* Controls NORMAL UL */
margin:0 0 0 15px;
padding:0 0 0 0;
list-style-type:none;
color:#000000;
}
UL LI
{
/* Controls NORMAL li inside UL */
margin:0 0 3px 0;
padding:0 0 0 12px;
}
UL strong {
font-size:15px;
}
OL
{
/* Controls NORMAL OL */
margin:0 0 0 28px;
padding:0 0 0 0;
list-style-type:decimal;
}
OL LI
{
/* Controls NORMAL li inside OL */
text-decoration:underline;
color:#000000;
}
OL LI A, LI A , OL A
{
/* Controls LINKS inside OL */
text-decoration:underline;
color:#004274;
}
OL A:HOVER
{
/* Controls LINKS HOVER inside OL */
text-decoration:none;
color:#cb0202;
}
UL A
{
/* Controls LINKS inside UL */
text-decoration:underline;
color:#004274;
}
UL A:HOVER
{
/* Controls LINKS HOVER inside UL */
text-decoration:none;
color:#cb0202;
}
/* ----Global Classes ends-----*/
.clr { margin:0; padding:0; clear:both;}
.main_wrapper{ margin:0px auto; padding:0px; max-width:768px; background:url(http://www.webdesignagencynewyork.com/dev/oncology/images/header-bg.png)left top repeat-x, url(http://www.webdesignagencynewyork.com/dev/oncology/images/footer-bg.png)left bottom repeat-x;}
.main_container{ margin:0px auto; padding:35px 0px 20px; width:78%;}
.header_container{ margin:0px auto 20px; padding:0px 10px;}
.header_logo{ margin:0px; padding:0px; width:55%; float:left; text-align:center;}
.header_logo img{ margin:0px; padding:0px; width:auto; height:auto; max-width:100%;}
.header_social{ margin:0px; padding:0px; width:30%; float:right; text-align:right;}
.header_social_date{ margin:0px; padding:0px;}
.header_social_date h6{ margin:0px 0px 30px 0px; padding:0px; color:#272626; font-size:13px; font-weight:400; display:block;}
.header_social_image{ margin:0px; padding:0px;}
.header_social_image img{ margin:0px; padding:0px; width:auto; height:auto; max-width:100%;}
.header_info{ margin:0px 0px 20px 0px; padding:0px; text-align:center;}
.header_info ul{ margin:0px; padding:0px; list-style-type:none; text-align:center;}
.header_info ul li{ margin:0px; padding:0px 12px 0px 6px; display:inline-block; background:url(http://www.webdesignagencynewyork.com/dev/oncology/images/li-div.png) right top no-repeat;}
.header_info ul li a{ margin:0px; padding:0px; color:#7e3553; font-size:15px; font-weight:normal; text-decoration:none; display:block;}
.header_info ul li:last-child{ background:none;}
.header_info ul li a:hover{ color:#017c9c;}
.banner{ margin:0px auto; padding:0px;}
.banner img{ margin:0px; padding:0px; width:100%;}
.caption_wrapper{ margin:0px; padding:0px; width:100%; position:relative; z-index:100;}
.caption_container{ margin:-88px auto 40px ; padding:0px; width:62%;}
.caption_container h1{margin:0px 0px 8px 0px; padding:0px; color:#fff; font-size:30px; font-weight:400; line-height:30px; display:block;}
.caption_container h2{margin:0px; padding:0px; color:#fff; font-size:24px; font-weight:400; line-height:30px; display:block;}
.body_container{ margin:0px auto; padding:0px 10px;}
.body_left{ margin:0px; padding:0px; width:64%; float:left;}
.body_left_box{ margin:0px 0px 15px 0px; padding:0px; }
.news_read{ margin:0px 0px 5px 0px; padding:0px; border-bottom:1px solid #d2d3d2;}
.news_read strong{ margin:0px; padding:2px 6px; color:#fff; font-size:13px; font-weight:400; text-decoration:none; display:inline-block; background:#017c9c;}
.news_box{ margin:0px 0px 5px 0px; padding:0px; border-bottom:2px dotted #cccccc;}
.news_box h6{ margin:0px; padding:0px; color:#272626; font-size:13px; font-weight:400; line-height:16px; display:block;}
.news_box h6 a{ margin:0px 0px 8px 0px; padding:0px; color:#272626; font-size:13px; font-weight:400; line-height:16px; display:block; text-decoration:none;}
.news_box h6 a:hover{ color:#017c9c;}
.news_box label{ margin:0px; padding:0px; color:#616364; font-size:10px; font-weight:400; display:block;}
.news_box label span{ margin:0px; padding:0px; color:#7e3553; font-size:10px; font-weight:400; font-style:italic;}
.news_box p{ margin:0px; padding:0px 0px 5px 0px; color:#808080; font-size:11px; font-weight:400; line-height:14px;}
.news_box p a{ margin:0px; padding:0px; color:#0082a2; font-size:10px; font-weight:400; text-decoration:none;}
.news_box p a:hover{ color:#272626;}
.social_link{ margin:0px; padding:0px;}
.social_link img{ margin:0px 0px 6px 0px; padding:0px; width:auto; height:auto; max-width:100%;}
.body_right{ margin:0px; padding:0px; width:33%;display:none; float:right;}
.subscribe{ margin:0px 0px 40px 0px; padding:0px; text-align:center;}
.subscribe a{ margin:0px; padding:6px 15px; color:#fff; font-size:12px; font-weight:400; display:inline-block; text-decoration:none; border-radius:5px;
border-bottom:1px solid #000;
/* IE10 Consumer Preview */
background-image: -ms-linear-gradient(top, #017c9c 0%, #4eaac2 100%);
/* Mozilla Firefox */
background-image: -moz-linear-gradient(top, #017c9c 0%, #4eaac2 100%);
/* Opera */
background-image: -o-linear-gradient(top, #017c9c 0%, #4eaac2 100%);
/* Webkit (Safari/Chrome 10) */
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #017c9c), color-stop(1, #4eaac2));
/* Webkit (Chrome 11+) */
background-image: -webkit-linear-gradient(top, #017c9c 0%, #4eaac2 100%);
/* W3C Markup, IE10 Release Preview */
background-image: linear-gradient(to bottom, #017c9c 0%, #4eaac2 100%);
}
.subscribe a:hover{ color:#272626;}
.sidebox1{ margin:0px 0px 35px; padding:0px;}
.sidebox1 img{ margin:0px; padding:0px; width:auto; height:auto; max-width:100%;}
.sidebox2{ margin:0px; padding:0px;}
.sidebox2 img{ margin:0px; padding:0px; width:auto; height:auto; max-width:100%;}
.footer{ margin:0px auto; padding:0px; text-align:center;}
.footer p{ margin:0px; padding:0px 0px 10px 0px; color:#363333; font-size:11px; font-weight:400; line-height:18px;}
.site_link{ margin:0px 0px 8px 0px; padding:0px; text-align:center;}
.site_link a{ margin:0px; padding:10px 35px; color:#fff; font-size:15px; font-weight:400; display:inline-block; text-decoration:none; border-radius:3px;
border-bottom:1px solid #000;
/* IE10 Consumer Preview */
background-image: -ms-linear-gradient(top, #017c9c 0%, #4eaac2 100%);
/* Mozilla Firefox */
background-image: -moz-linear-gradient(top, #017c9c 0%, #4eaac2 100%);
/* Opera */
background-image: -o-linear-gradient(top, #017c9c 0%, #4eaac2 100%);
/* Webkit (Safari/Chrome 10) */
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #017c9c), color-stop(1, #4eaac2));
/* Webkit (Chrome 11+) */
background-image: -webkit-linear-gradient(top, #017c9c 0%, #4eaac2 100%);
/* W3C Markup, IE10 Release Preview */
background-image: linear-gradient(to bottom, #017c9c 0%, #4eaac2 100%);
}
.site_link a:hover{ color:#272626;}
.footer span{ margin:0px 0px 5px 0px; padding:0px; color:#2eb5d9; font-size:11px; display:block;}
.footer span a{ margin:0px; padding:0px; color:#2eb5d9; font-size:11px; display:inline-block; text-decoration:none;}
.footer label{ margin:0px 0px 10px 0px; padding:0px; color:#999999; font-size:11px; display:block;}
.footer label a{ margin:0px; padding:0px; color:#999999; font-size:11px; display:inline-block;}
.footer_logo{ margin:0px 0px 10px 0px; padding:0px;}
.footer_logo img{ margin:0px; padding:0px; width:auto; height:auto; max-width:100%;}
.copywrite{ margin:0px; padding:0px;}
.copywrite span{ margin:0px 0px 5px 0px; padding:0px; color:#017c9c; font-size:11px; display:block;}
.copywrite label{ margin:0px 0px 5px 0px; padding:0px; color:#363333; font-size:11px; display:block;}
.left_sidebox1{ margin:0px 0px 0px; padding:0px; text-align:center; display:none;}
.left_sidebox1 img{ margin:0px; padding:0px; width:auto; height:auto; max-width:100%;}
.left_sidebox2{ margin:0px; padding:0px; text-align:center; display:none;}
.left_sidebox2 img{ margin:0px; padding:0px; width:auto; height:auto; max-width:100%;}
.body_left .subscribe{ display:none;}
.footer label br{ display:none;}
/* Mobile Landscape Size to Tablet Portrait (devices and browsers) */
#media only screen and (min-width: 480px) and (max-width: 767px) {
.main_wrapper{ width:100%;}
.main_container{ padding:20px 0px 10px; width:94%;}
.header_social h6{ margin:0px 0px 20px 0px;}
.caption_container { margin: -68px auto 30px;}
.caption_container h1{ font-size:24px; line-height:24px;}
.caption_container h2{ font-size:18px; line-height:18px;}
.subscribe a{ font-size:10px;}
.footer p br{ display:none;}
}
#media only screen and (max-width: 479px) {
.main_wrapper{ width:100%;}
.main_container{ padding:20px 0px 10px; width:100%;}
.header_container { margin: 0 auto 15px;}
.header_logo{ margin:0px 0px 20px 0px; width:100%; float:none;}
.header_social{ width:100%; float:none; text-align:justify;}
.header_social h6{ margin:0px; display:inline-block;}
.header_social_date{ margin:5px 0px 0px 0px; width:45%; float:left;}
.header_social_image{ width:45%; float:right; text-align:right;}
.header_info ul li{padding: 0 8px 0 4px;}
.header_info ul li a{ font-size:11px;}
.header_info { margin: 0 0 12px;}
.caption_container { margin: -50px auto 20px;}
.caption_container h1{margin: 0 0 5px; font-size:18px; line-height:18px;}
.caption_container h2{ font-size:13px; line-height:13px;}
.body_right{ display:none;}
.body_left{ float:none; width:100%;}
.left_sidebox1{ margin: 12px 0 6px; display:block;}
.left_sidebox2{ margin:0px 0px 6px 0px; display:block;}
.body_left .subscribe{ margin: 0 0 10px; display:block;}
.body_left .subscribe a{ padding:7px 25px; border-bottom:0px;}
.footer label br{ display:block;}
}
</style>
</head>
<body>
<div class="main_wrapper">
<div class="main_container">
<div class="header_container">
<div class="header_logo"><img src="http://www.webdesignagencynewyork.com/dev/oncology/images/logo.png" ></div>
<div class="header_social">
<div class="header_social_date">
<h6>May 18, 2015</h6>
</div>
<div class="header_social_image">
<img src="http://www.webdesignagencynewyork.com/dev/oncology/images/fb-icon.png">
<img src="http://www.webdesignagencynewyork.com/dev/oncology/images/tw-icon.png">
<img src="http://www.webdesignagencynewyork.com/dev/oncology/images/in-icon.png">
</div>
</div>
<div class="clr"></div>
</div>
<div class="header_info">
<ul>
<li>Online First</li>
<li>FDA Updates</li>
<li>Clinical Resource Center</li>
</ul>
</div>
<div class="banner">
<img src="http://www.webdesignagencynewyork.com/dev/oncology/images/header_banner.png">
<div class="caption_wrapper">
<div class="caption_container">
<h1>Simple. Fast. Precise</h1>
<h2>Empowering Regional Anesthesio</h2>
</div>
</div>
</div>
<div class="body_container">
<div class="body_left">
<div class="body_left_box">
<div class="subscribe">Subscribe to this enews</div>
<div class="news_read">
<strong>Top News</strong>
</div>
<div class="news_box">
<h6>Two FDA Advisory Committees Recommend Approval of Talimogene for Metastatic Melanoma</h6>
<label>by <span>Peggy Eastman</span></label>
<p>In a joint meeting, two advisory committees to the Food and Drug Administration recommended approval of the biologic agent talimogene laherparepvec (T-VEC) for injectable regionally or distantly metastatic melanoma. Read More.</p>
<div class="social_link">
<img src="http://www.webdesignagencynewyork.com/dev/oncology/images/fb.png">
<img src="http://www.webdesignagencynewyork.com/dev/oncology/images/tw.png">
<img src="http://www.webdesignagencynewyork.com/dev/oncology/images/in.png">
</div>
</div>
<div class="news_box">
<h6>Two New Drugs Promising in Attack of Attractive Targets in CTCL </h6>
<label>by <span>Mark Fuerst</span></label>
<p>Drugs now in development show promise in attacking two attractive targets of cutaneous T-cell lymphoma (CTCL). Read More.</p>
<div class="social_link">
<img src="http://www.webdesignagencynewyork.com/dev/oncology/images/fb.png">
<img src="http://www.webdesignagencynewyork.com/dev/oncology/images/tw.png">
<img src="http://www.webdesignagencynewyork.com/dev/oncology/images/in.png">
</div>
</div>
<div class="news_box">
<div class="left_sidebox1">
<img src="http://www.webdesignagencynewyork.com/dev/oncology/images/images/sidebar-img1.jpg">
</div>
<h6>SCLC: Evidence that Maintenance Sunitinib Can Extend Progression-Free Survival in Patients with Extensive Disease </h6>
<label>by <span>Kurt Samson</span></label>
<p>The tyrosine kinase inhibitor sunitinib appears to offer a small improvement in progression-free survival in patients receiving chemotherapy for extensive-stage small-cell lung cancer (ES-SCLC). Read More.</p>
<div class="social_link">
<img src="http://www.webdesignagencynewyork.com/dev/oncology/images/fb.png">
<img src="http://www.webdesignagencynewyork.com/dev/oncology/images/w.png">
<img src="http://www.webdesignagencynewyork.com/dev/oncology/images/in.png">
</div>
</div>
</div>
<div class="body_left_box">
<div class="left_sidebox2">
<img src="http://www.webdesignagencynewyork.com/dev/oncology/images/sidebar-img2.jpg">
</div>
<div class="news_read">
<strong>Must Read</strong>
</div>
<div class="news_box">
<h6> Experts Say Here's How to Improve Mammography Interpretation...</h6>
<label>by <span>Peggy Eastman</span></label>
<p>Speakers agreed that while the technical quality of mammography has improved since the national Mammography Quality Standards Act (MQSA) of 1992, the interpretation of mammograms remains variable, which limits the detection of early breast cancer. Read More.</p>
<div class="social_link">
<img src="http://www.webdesignagencynewyork.com/dev/oncology/images/fb.png">
<img src="http://www.webdesignagencynewyork.com/dev/oncology/images/tw.png">
<img src="http://www.webdesignagencynewyork.com/dev/oncology/images/in.png">
</div>
</div>
<div class="news_box">
<h6>Genome Editing-and Future of the human Species</h6>
<label>by <span>George W. Sledge, Jr., MD</span></label>
<p>If you want to see what athe future holds for us, tel me suggest two recent articles... Read More.</p>
<div class="social_link">
<img src="http://www.webdesignagencynewyork.com/dev/oncology/images/fb.png">
<img src="http://www.webdesignagencynewyork.com/dev/oncology/images/tw.png">
<img src="http://www.webdesignagencynewyork.com/dev/oncology/images/in.png">
</div>
</div>
<div class="news_box">
<h6>What ASCO's Payment Reform Idea Means to YOU</h6>
<label>by <span>Lola Butcher</span></label>
<p>2015 is trying to go down in history as the year of payment reform for cancer care, and ASCOisn't going to miss out of the fun... Read More.</p>
<div class="social_link">
<img src="http://www.webdesignagencynewyork.com/dev/oncology/images/fb.png">
<img src="http://www.webdesignagencynewyork.com/dev/oncology/images/tw.png">
<img src="http://www.webdesignagencynewyork.com/dev/oncology/images/in.png">
</div>
</div>
</div>
</div>
<div class="body_right">
<div class="subscribe">Subscribe to this enews</div>
<div class="sidebox1">
<img src="http://www.webdesignagencynewyork.com/dev/oncology/images/sidebar-img1.jpg">
</div>
<div class="sidebox2">
<img src="http://www.webdesignagencynewyork.com/dev/oncology/images/sidebar-img2.jpg" >
</div>
</div>
<div class="clr"></div>
</div>
<div class="footer">
<p>Keep receiving Oncology Times eNews by adding editor#oncology-times.info to your address book.<br>
Oncology Times respects your privacy and will not share your information with other companies or organizations without your permission. View our Privacy Policy.</p>
<div class="site_link">www.oncology-times.com</div>
<span>ot#lwwny.com</span>
<label>If you do not wish to recieve<br> the Oncology Times enews please unsubscribe.</label>
<div class="footer_logo"><img src="http://www.webdesignagencynewyork.com/dev/oncology/images/footer-logo.png" ></div>
<div class="copywrite">
<span>333 Seventh Ave., 19th Fl., New York, NY 10001</span>
<label>Copyright ©2015 All Rights Reserved.</label>
</div>
</div>
</div>
</div>
</body>
</html>
There were some validation issues (missing and extra tr and td tags, etc) in your code and the CSS definitely needs to be run through an inliner (like Mailchimps - but make sure that your media queries are carried through and not removed in the inliner.) before being used, but below SHOULD solve your issue:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; minimum-scale=1.0; user-scalable=0;" />
<meta name="SKYPE_TOOLBAR" content="SKYPE_TOOLBAR_PARSER_COMPATIBLE"/>
<title>Oncology</title>
<style type="text/css">
#outlook a {
padding:0;
}
html,body{font-family:Arial, Helvetica, sans-serif; font-weight:normal; text-transform:none; margin:0px; padding:0px;}
.clr { margin:0; padding:0; clear:both;}
.container{ margin:0px auto; width:600px; padding:0px 0px;}
.header{
margin:0px 0px; padding:15px 50px 0px; width:500; display:block;
/* Safari 4-5, Chrome 1-9 */
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#dcf6fc), to(#fff));
/* Safari 5.1, Chrome 10+ */
background: -webkit-linear-gradient(top, #dcf6fc, #fff);
/* Firefox 3.6+ */
background: -moz-linear-gradient(top, #dcf6fc, #fff);
/* IE 10 */
background: -ms-linear-gradient(top, #dcf6fc, #fff);
/* Opera 11.10+ */
background: -o-linear-gradient(top, #dcf6fc, #fff);
}
.logo{ margin:0px; padding:10px 0px 0px 0px; width:502px; }
.logo img{ margin:0px; padding:0px; width:auto; height:auto; display: block;}
.icons{ margin:0px; padding:0px; width:96px; text-align:center }
.icons h6{ margin:0px 0px 0px 0px; padding:10px 0px 30px 0px ; color:#272626; font-size:13px; font-weight:400; display:block;}
.info{ margin:0px 0px 0px 0px; padding:25px 0px; text-align:center;}
.info img{ margin:0px; padding: 0 12px; width:auto; height:auto; max-width:100%; vertical-align:middle;}
.info a{ margin:0px; padding:0px; color:#7e3553; font-size:15px; font-weight:normal; text-decoration:none; display:inline-block;}
.banner{ margin:0px; padding:0px 50px;}
.banner img{ margin:0px 0px 0px; padding:0px; display: block; width: 100%;}
.body_left{ margin:0px; padding:0px 15px 0px 55px; width:64%;}
.body_right{ margin:0px; padding:0px 50px 0px 0px; width:33%; }
.subscribe{ margin:0px 0px 40px 0px; padding:0px; text-align:center; display:block;}
.subscribe a{ margin:0px; padding:6px 15px; color:#fff; font-size:12px; font-weight:400; display:inline-block; text-decoration:none; border-radius:5px; text-align:center;
border-bottom:1px solid #000;
/* IE10 Consumer Preview */
background-image: -ms-linear-gradient(top, #017c9c 0%, #4eaac2 100%);
/* Mozilla Firefox */
background-image: -moz-linear-gradient(top, #017c9c 0%, #4eaac2 100%);
/* Opera */
background-image: -o-linear-gradient(top, #017c9c 0%, #4eaac2 100%);
/* Webkit (Safari/Chrome 10) */
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #017c9c), color-stop(1, #4eaac2));
/* Webkit (Chrome 11+) */
background-image: -webkit-linear-gradient(top, #017c9c 0%, #4eaac2 100%);
/* W3C Markup, IE10 Release Preview */
background-image: linear-gradient(to bottom, #017c9c 0%, #4eaac2 100%);
}
.sidebox1{ margin:0px 0px 35px; padding:0px; display:block; text-align:center;}
.sidebox1 img{ margin:0px; padding:0px; width:auto; height:auto; max-width:100%;}
.sidebox2{ margin:0px; padding:0px; display:block; text-align:center;}
.sidebox2 img{ margin:0px; padding:0px; width:auto; height:auto; max-width:100%;}
.news_read{ margin:0px 0px 5px 0px; padding:0px; border-bottom:1px solid #d2d3d2; display:block;}
.news_read strong{ margin:0px; padding:2px 6px; color:#fff; font-size:13px; font-weight:400; text-decoration:none; display:inline-block; background:#017c9c;}
.news_box{ margin:0px 0px 5px 0px; padding:0px; border-bottom:2px dotted #cccccc;}
.news_box h6{ margin:0px; padding:0px; color:#272626; font-size:13px; font-weight:400; line-height:16px; display:block;}
.news_box h6 a{ margin:0px 0px 8px 0px; padding:0px; color:#272626; font-size:13px; font-weight:400; line-height:16px; display:block; text-decoration:none;}
.news_box h6 a:hover{ color:#017c9c;}
.news_box label{ margin:0px; padding:0px; color:#616364; font-size:10px; font-weight:400; display:block;}
.news_box label span{ margin:0px; padding:0px; color:#7e3553; font-size:10px; font-weight:400; font-style:italic;}
.news_box p{ margin:0px; padding:0px 0px 5px 0px; color:#808080; font-size:11px; font-weight:400; line-height:14px;}
.news_box p a{ margin:0px; padding:0px; color:#0082a2; font-size:10px; font-weight:400; text-decoration:none;}
.news_box p a:hover{ color:#272626;}
.social_link{ margin:0px; padding:0px;}
.social_link img{ margin:0px 0px 6px 0px; padding:0px; width:auto; height:auto; max-width:100%;}
.footer{ margin:0px auto; padding:0px 50px; text-align:center; width:100%; display:block;}
.footer p{ margin:0px; padding:0px 0px 10px 0px; color:#363333; font-size:11px; font-weight:400; line-height:18px;}
.site_link{ margin:0px 0px 8px 0px; padding:0px; text-align:center;}
.site_link a{ margin:0px 0px 5px 0px; padding:10px 35px; color:#fff; font-size:15px; font-weight:400; display:inline-block; text-decoration:none; border-radius:3px;
border-bottom:1px solid #000;
/* IE10 Consumer Preview */
background-image: -ms-linear-gradient(top, #017c9c 0%, #4eaac2 100%);
/* Mozilla Firefox */
background-image: -moz-linear-gradient(top, #017c9c 0%, #4eaac2 100%);
/* Opera */
background-image: -o-linear-gradient(top, #017c9c 0%, #4eaac2 100%);
/* Webkit (Safari/Chrome 10) */
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #017c9c), color-stop(1, #4eaac2));
/* Webkit (Chrome 11+) */
background-image: -webkit-linear-gradient(top, #017c9c 0%, #4eaac2 100%);
/* W3C Markup, IE10 Release Preview */
background-image: linear-gradient(to bottom, #017c9c 0%, #4eaac2 100%);
}
.footer span{ margin:0px 0px 5px 0px; padding:0px; color:#2eb5d9; font-size:11px; display:block;}
.footer span a{ margin:0px; padding:0px; color:#2eb5d9; font-size:11px; display:inline-block; text-decoration:none;}
.footer label{ margin:0px 0px 0px 0px; padding:0px; color:#999999; font-size:11px; display:block;}
.footer label a{ margin:0px; padding:0px; color:#999999; font-size:11px; display:inline-block;}
.footer label br{ display:none;}
.footerbottom{margin:0px auto; padding:8px 50px 30px; text-align:center;width:100%;
/* Safari 4-5, Chrome 1-9 */
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#f2fcfe), to(#c9f1fb));
/* Safari 5.1, Chrome 10+ */
background: -webkit-linear-gradient(top, #f2fcfe, #c9f1fb);
/* Firefox 3.6+ */
background: -moz-linear-gradient(top, #f2fcfe, #c9f1fb);
/* IE 10 */
background: -ms-linear-gradient(top, #f2fcfe, #c9f1fb);
/* Opera 11.10+ */
background: -o-linear-gradient(top, #f2fcfe, #c9f1fb);
}
.footer_logo{ margin:0px 0px 10px 0px; padding:0px; text-align:center; }
.footer_logo img{ margin:0px 0px 10px 0px; padding:0px; width:auto; height:auto; max-width:100%;}
.copywrite{ margin:0px; padding:0px; text-align:center;}
.copywrite span{ margin:0px 0px 5px 0px; padding:0px; color:#017c9c; font-size:11px; display:block;}
.copywrite label{ margin:0px 0px 5px 0px; padding:0px; color:#363333; font-size:11px; display:block;}
/* Mobile Landscape Size to Tablet Portrait (devices and browsers) */
#media only screen and (min-width: 480px) and (max-width: 600px) {
.container{ margin:0px auto; width:80%; padding:0px; display:block; }
.header{ padding:15px 0px 0px 0px;}
.info{padding:6px 0px;}
.logo {display:block; width:100%; text-align:center;}
.logo img{ width:80%;}
.banner{ padding:0px;}
.banner img{ width:100%}
.body_left{ padding: 0 15px 0 0;}
.body_right { padding: 0;}
.footer{ padding:0px;}
.footer p br{ display:none !important; display:none; width:0; height:0; line-height:0; overflow:hidden; visibility:hidden; mso-hide:all;}
.footerbottom{padding: 8px 0 10px;}
}
#media only screen and (max-width: 480px) {
.container{ margin:0px auto; width:80%; padding:0px; display:block; }
.header{ padding:5px 0px 0px 0px;}
.info{padding:0px;}
.info img{padding:0px 5px;}
.info a{ font-size:12px;}
.logo {display:block; width:100%; text-align:center;}
.logo img{ width:100%;}
.icons{ margin:0px auto; width:96px; display:block;}
.icons h6{ padding:10px 0px 15px 0px;}
.banner{ padding:0px;}
.banner img{ width:100%}
.body_left{padding:0px; width:100%; display:block;}
.body_right{ padding: 0; width:100%; display:block;}
.subscribe{ margin:0px; padding:10px 0px;}
.sidebox1{ margin:0px; padding:0px 0px 10px; display:none !important; width:0 !important; height:0 !important; line-height:0 !important; overflow:hidden !important; visibility:hidden !important;}
.sidebox2{ margin:0px; padding:0px 0px 5px 0px; display:none !important; width:0 !important; height:0 !important; line-height:0 !important; overflow:hidden !important; visibility:hidden !important;}
.footer{ padding:0px;}
.footerbottom{padding: 8px 0 10px;}
}
</style>
</head>
<body style="margin:0px; padding:0px;">
<table align="center" class="container">
<tr>
<td valign="top" class="header">
<table border="0" cellspacing="0" cellpadding="0" >
<tr>
<td class="logo"><img src="http://www.webdesignagencynewyork.com/dev/oncology/images/logo.png" ></td>
<td class="icons" valign="top">
<h6>May 18, 2015</h6>
<table width="100%" border="0" cellspacing="0" cellpadding="0" class="social">
<tr>
<td><img src="http://www.webdesignagencynewyork.com/dev/oncology/images/fb-icon.png"></td>
<td><img src="http://www.webdesignagencynewyork.com/dev/oncology/images/tw-icon.png"></td>
<td><img src="http://www.webdesignagencynewyork.com/dev/oncology/images/in-icon.png"></td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td valign="top" class="info">
Online First<img src="http://www.webdesignagencynewyork.com/dev/oncology/images/li-div.png">FDA Updates<img src="http://www.webdesignagencynewyork.com/dev/oncology/images/li-div.png">Clinical Resource Center
</td>
</tr>
<tr>
<td valign="top" class="banner"><img src="http://www.webdesignagencynewyork.com/dev/oncology/images/banner.png"></td>
</tr>
<tr>
<td valign="top" style="padding-top:20px;">
<table width="100%" border="0" cellspacing="0" cellpadding="0" >
<tr>
<td class="body_left" valign="top">
<table width="100%" border="0" cellspacing="0" cellpadding="0" class="news_box" >
<tr>
<td class="news_read"><strong>Top News</strong></td>
</tr>
<tr>
<td >
<h6>Two FDA Advisory Committees Recommend Approval of Talimogene for Metastatic Melanoma</h6>
</td>
</tr>
<tr>
<td ><label>by <span>Peggy Eastman</span></label></td>
</tr>
<tr>
<td>
<p>In a joint meeting, two advisory committees to the Food and Drug Administration recommended approval of the biologic agent talimogene laherparepvec (T-VEC) for injectable regionally or distantly metastatic melanoma. Read More.</p>
</td>
</tr>
<tr>
<td class="social_link">
<img src="http://www.webdesignagencynewyork.com/dev/oncology/images/fb.png">
<img src="http://www.webdesignagencynewyork.com/dev/oncology/images/tw.png">
<img src="http://www.webdesignagencynewyork.com/dev/oncology/images/in.png">
</td>
</tr>
</table>
<table width="100%" border="0" cellspacing="0" cellpadding="0" class="news_box" >
<tr>
<td >
<h6>Two New Drugs Promising in Attack of Attractive Targets in CTCL </h6>
</td>
</tr>
<tr>
<td ><label>by <span>Mark Fuerst</span></label></td>
</tr>
<tr>
<td>
<p>Drugs now in development show promise in attacking two attractive targets of cutaneous T-cell lymphoma (CTCL). Read More.</p>
</td>
</tr>
<tr>
<td class="social_link">
<img src="http://www.webdesignagencynewyork.com/dev/oncology/images/fb.png">
<img src="http://www.webdesignagencynewyork.com/dev/oncology/images/tw.png">
<img src="http://www.webdesignagencynewyork.com/dev/oncology/images/in.png">
</td>
</tr>
</table>
<table width="100%" border="0" cellspacing="0" cellpadding="0" class="news_box" >
<tr>
<td >
<h6>SCLC: Evidence that Maintenance Sunitinib Can Extend Progression-Free Survival in Patients with Extensive Disease</h6>
</td>
</tr>
<tr>
<td ><label>by <span>Kurt Samson</span></label></td>
</tr>
<tr>
<td>
<p>The tyrosine kinase inhibitor sunitinib appears to offer a small improvement in progression-free survival in patients receiving chemotherapy for extensive-stage small-cell lung cancer (ES-SCLC). Read More.</p>
</td>
</tr>
<tr>
<td class="social_link">
<img src="http://www.webdesignagencynewyork.com/dev/oncology/images/fb.png">
<img src="http://www.webdesignagencynewyork.com/dev/oncology/images/tw.png">
<img src="http://www.webdesignagencynewyork.com/dev/oncology/images/in.png">
</td>
</tr>
</table>
<table width="100%" border="0" cellspacing="0" cellpadding="0" class="news_box" >
<tr>
<td class="news_read"><strong>Must Read</strong></td>
</tr>
<tr>
<td >
<h6>Experts Say Here's How to Improve Mammography Interpretation...</h6>
</td>
</tr>
<tr>
<td ><label>by <span>Peggy Eastman</span></label></td>
</tr>
<tr>
<td>
<p>Speakers agreed that while the technical quality of mammography has improved since the national Mammography Quality Standards Act (MQSA) of 1992, the interpretation of mammograms remains variable, which limits the detection of early breast cancer. Read More.</p>
</td>
</tr>
<tr>
<td class="social_link">
<img src="http://www.webdesignagencynewyork.com/dev/oncology/images/fb.png">
<img src="http://www.webdesignagencynewyork.com/dev/oncology/images/tw.png">
<img src="http://www.webdesignagencynewyork.com/dev/oncology/images/in.png">
</td>
</tr>
</table>
<table width="100%" border="0" cellspacing="0" cellpadding="0" class="news_box" >
<tr>
<td >
<h6>Genome Editing-and Future of the human Species</h6>
</td>
</tr>
<tr>
<td ><label>by <span>George W. Sledge, Jr., MD</span></label></td>
</tr>
<tr>
<td>
<p>If you want to see what athe future holds for us, tel me suggest two recent articles...Read More.</p>
</td>
</tr>
<tr>
<td class="social_link">
<img src="http://www.webdesignagencynewyork.com/dev/oncology/images/fb.png">
<img src="http://www.webdesignagencynewyork.com/dev/oncology/images/tw.png">
<img src="http://www.webdesignagencynewyork.com/dev/oncology/images/in.png">
</td>
</tr>
</table>
<table width="100%" border="0" cellspacing="0" cellpadding="0" class="news_box" >
<tr>
<td >
<h6>What ASCO's Payment Reform Idea Means to YOU</h6>
</td>
</tr>
<tr>
<td ><label>by <span>Lola Butcher</span></label></td>
</tr>
<tr>
<td>
<p>2015 is trying to go down in history as the year of payment reform for cancer care, and ASCOisn't going to miss out of the fun... Read More.</p>
</td>
</tr>
<tr>
<td class="social_link">
<img src="http://www.webdesignagencynewyork.com/dev/oncology/images/fb.png">
<img src="http://www.webdesignagencynewyork.com/dev/oncology/images/tw.png">
<img src="http://www.webdesignagencynewyork.com/dev/oncology/images/in.png">
</td>
</tr>
</table>
</td>
<td class="body_right" valign="top">
<table width="100%">
<tr>
<td class="subscribe">Subscribe to this enews</td>
</tr>
<tr>
<td class="sidebox1"><img src="http://www.webdesignagencynewyork.com/dev/oncology/images/sidebar-img1.jpg"></td>
</tr>
<tr>
<td class="sidebox2"> <img src="http://www.webdesignagencynewyork.com/dev/oncology/images/sidebar-img2.jpg" ></td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<table border="0" cellspacing="0" cellpadding="0" class="footer">
<tr >
<td >
<p>Keep receiving Oncology Times eNews by adding editor#oncology-times.info to your address book.<br>
Oncology Times respects your privacy and will not share your information with other companies or organizations without your permission. View our Privacy Policy.</p>
</td>
</tr>
<tr>
<td class="site_link">www.oncology-times.com</td>
</tr>
<tr>
<td><span>ot#lwwny.com</span></td>
</tr>
<tr>
<td><label>If you do not wish to recieve<br> the Oncology Times enews please unsubscribe.</label></td>
</tr>
</table>
</td>
</tr>
<tr>
<td >
<table class="footerbottom" border="0" cellspacing="0" cellpadding="0">
<tr >
<td class="footer_logo" width="100%" ><img src="http://www.webdesignagencynewyork.com/dev/oncology/images/footer-logo.png" ></td>
</tr>
<tr >
<td class="copywrite" ><span>333 Seventh Ave., 19th Fl., New York, NY 10001</span>
<label>Copyright ©2015 All Rights Reserved.</label></td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
I've done a bunch of googling, but I can't find an answer anywhere that works for me.
I'm creating a form (for the first time ever) and I need a red asterisk directly next to the placeholder text in the input boxes. Embarrassingly, this is the closest I have been able to get so far:
form {
margin: 0 auto;
background-color: #3d549a;
}
input {
font-family: avenir;
font-size: 17px;
color: #ffffff;
font-weight: 100;
border: none;
width: 400px;
padding: 15px;
border-radius: 5px;
}
textarea {
height: 5em;
resize: vertical;
font-family: avenir;
font-size: 17px;
color: #ffffff;
font-weight: 100;
border: none;
width: 860px;
padding: 15px;
border-radius: 5px;
}
.asterisk_input:after {
content: " *";
color: #e32;
position: absolute;
margin: 0px 0px 0px -20px;
font-size: 17px;
padding: 0 5px 0 0;
}
.buttonblue {
padding-left: 90px;
background-color: #31b9e9;
font-family: avenir;
font-size: 16px;
width: 300px;
height: 75px;
color: #ffffff;
padding: 0;
border: none;
border-radius: 5px;
box-shadow: 0px 5px 1px #21a1c6;
}
button {
margin-left: .5em;
}
<table width="100%" style="background-color: #3d549a" height="820px">
<tr height="250">
<td valign="bottom" align="center" width="100%" colspan="4">
<span style="font-family: avenir; font-size: 40px; color: #ffffff; font-weight: 500; line-height: 10px;">GET IN TOUCH<span/>
<hr color="#273a72" width="75" align="centre">
<span style="font-family: avenir; font-size: 15px; color: #ffffff; font-weight: 100; line-height: 10px;">1600 Pennslyvania Ave NW, Washington, DC 20500, United States of America. Tel: (202) 456-1111</span>
</td>
</tr>
<tr>
<td>
<form action="/my-handling-form-page" method="post">
<p>
<input type="text" id="name" placeholder="Your Name" style="font-family: avenir; font-weight:100; font-size: 17px; background-color: #273a72" />
<span class="asterisk_input"> </span>
<input type="email" id="mail" placeholder="Your Email" style="font-family: avenir; font-weight:100; font-size: 17px; background-color: #273a72" />
<span class="asterisk_input"> </span>
</p>
<p>
<textarea id="msg" placeholder="Your Message" style="font-family: avenir; color: #fff; font-weight:100; font-size: 17px; background-color: #273a72"></textarea>
<span class="asterisk_input"> </span>
</p>
<p>
<button class="buttonblue" type="submit">SEND MESSAGE</button>
</p>
</form>
</td>
</tr>
</table>
(I'm also having trouble centreing it ;) But one problem at a time, I suppose
Unfortunately, there isn't a universal way of doing this easily, but there is a way to get support for most browsers. The reason being is that you're going to need to style a placeholder, and there isn't a universal standard on how this is done. But, as long as you don't need support for older IE browsers, you should be okay with the following approach:
First, add a class named "required" or some such to the input box itself. Then, add the following tags:
.required::-webkit-input-placeholder:after {
content: " *";
color: red;
}
.required:-moz-placeholder:after {
content: " *";
color: red;
}
.required:-ms-input-placeholder:after {
content: " *";
color: red;
}
for align centre just add
display: table;
in .form class.