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>
Related
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 have an email that I'm working on that included a light-colored background image with black text and a button over it. On MS-Outlook Dark Mode (macOS 10.15) and Outlook.com Dark (Chrome), the text and button are white. Here's my code.
I followed advice from this article: and have added the fixes recommended in the section How to Keep Text Black Inside VML in Dark Mode, but the text is still white. Any ideas?
<!DOCTYPE html>
<html lang="en">
<head>
<title>NielsenIQ Consumer 360</title>
<meta charset="utf-8">
<meta http-equiv="Content-Type" content="text/html charset=UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" >
<meta name="color-scheme" content="light dark">
<meta name="supported-color-scheme" content="light dark">
<!--[if mso]><xml>
<o:OfficeDocumentSettings>
<o:PixelsPerInch>96</o:PixelsPerInch>
</o:OfficeDocumentSettings>
</xml><![endif]-->
<!--[if mso]>
<style type="text/css">
body, table, td, h1, h2, h3, p, li, a {font-family: Helvetica, Arial, sans-serif !important;}
</style>
<![endif]-->
<style>
/* CLIENT-SPECIFIC STYLES */
body, table, td, a { -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; }
table, td { mso-table-lspace: 0pt; mso-table-rspace: 0pt; font-size:0; line-height: 0; }
img { -ms-interpolation-mode: bicubic; }
/* RESET STYLES */
img { border: 0; height: auto; line-height: 100%; outline: none; text-decoration: none; }
table { border-collapse: collapse !important; font-size: 0; line-height: 0; }
body { height: 100% !important; margin: 0 !important; padding: 0 !important; width: 100% !important; }
/* iOS BLUE LINKS */
a[x-apple-data-detectors] {
color: inherit !important;
text-decoration: none !important;
font-size: inherit !important;
font-family: inherit !important;
font-weight: inherit !important;
line-height: inherit !important;
}
/* GMAIL BLUE LINKS */
u ~ div #body-table a {
color: inherit;
text-decoration: none;
font-size: inherit;
font-family: inherit;
font-weight: inherit;
line-height: inherit;
}
/* SAMSUNG MAIL BLUE LINKS */
#MessageViewBody a {
color: inherit;
text-decoration: none;
font-size: inherit;
font-family: inherit;
font-weight: inherit;
line-height: inherit;
}
a {text-decoration: none;} /* for Windows 10 underlining */
body[yahoo]{width:100% !important; -webkit-text-size-adjust:100%; -ms-text-size-adjust:100%; margin:0; padding:0;}
table { border-collapse:collapse;mso-table-lspace:0;mso-table-rspace:0;empty-cells:show; }
:root {
color-scheme: light dark;
supported-color-schemes: light dark;
}
/* Make sure the links are Black in Gmail */
.link { text-decoration: underline; color: #000000 !important; }
.link:hover { text-decoration: none; }
/* Target Outlook App for Dark Mode */
/* Shows Dark Mode-Only Content, Like Images */
[data-ogsc] .dark-img { display:block !important; width: auto !important; overflow: visible !important; float: none !important; max-height:inherit !important; max-width:inherit !important; line-height: auto !important; margin-top:0px !important; visibility:inherit !important; }
/* Hides Light Mode-Only Content, Like Images */
[data-ogsc] .light-img { display:none; display:none !important; }
/* Styles for Dark Mode */
#media (prefers-color-scheme: dark ) {
/* Shows Dark Mode-Only Content, Like Images */
.dark-img { display:block !important; width: auto !important; overflow: visible !important; float: none !important; max-height:inherit !important; max-width:inherit !important; line-height: auto !important; margin-top:0px !important; visibility:inherit !important; }
h1.black-header1, p.black-para, .inner a { color: #000000 !important; }
.keep-black { color: #000000 !important; }
/* .two-column__white-bg-left-img .two-column,
.two-column__black-bg-right-img .two-column,
.wrapper { background-image: none !important; } */
/* Hides Light Mode-Only Content, Like Images */
.light-img { display:none; display:none !important; }
}
#import url('https://fonts.googleapis.com/css2?family=Montserrat:wght#400;500;700&display=swap');
.wrapper { width: 640px; background-color: #fefefe; }
div.left-column td.inner,
div.right-column td.inner { padding-top: 20px; }
.niq-top { width: 100%; }
.niq-angle { width: 100%; }
.top-story { padding-left: 60px; padding-top: 20px; padding-right: 60px; padding-bottom: 60px; }
.hero-image { width: 100%; max-width: 100%; }
.dark-gray-cat-left { font-family:'Montserrat', Helvetica, Arial, sans-serif; font-size: 12px; line-height: 14px; color: #666666; font-weight: 700; }
.divider { width: 640px; height: 12px; }
.social-section, .copyright-section { padding-left: 60px; padding-top: 60px; padding-bottom: 60px; padding-right: 60px; }
.branding-section { padding-left: 60px; padding-top: 20px; padding-bottom: 20px; padding-right: 60px; width: 640px; }
.footer-section { padding-left: 60px; padding-top: 60px; padding-right: 60px; padding-bottom: 80px; }
img.bottom-logo { width: 196px; height: auto; }
a.black-link { color:#000000; }
a.white-link { color:#ffffff; }
/*C360 Styles */
.inner { padding-left: 60px; padding-top: 20px; padding-right: 60px; padding-bottom: 30px; }
/*Media Queries*/
#media screen and (max-width: 480px) {
.wrapper { width: 480px; }
.niq-top { width: 100%; }
.niq-top img { width: 480px; height: auto; }
.niq-angle img { width: 480px; height: auto; }
.top-story { padding-left: 40px; padding-top: 20px; padding-right: 40px; padding-bottom: 40px; }
.branding-section { width: 480px; }
.divider { width: 480px; height: 6px; }
.social-section, .copyright-section { padding-left: 40px; padding-top: 40px; padding-right: 40px; padding-bottom: 40px; }
.footer-section { padding-left: 40px; padding-top: 40px; padding-right: 40px; padding-bottom: 60px; }
}
</style>
<!--[if gte mso 16]>
<style>
body {
background-color:#353535 !important;
}
.keep-black {
mso-style-textfill-type:gradient;
mso-style-textfill-fill-gradientfill-stoplist:"0 \#000000 1 100000\,99000 \#000000 1 100000";
color: #ffffff !important;
mso-color-alt: auto;
}
</style>
<![endif]-->
</head>
<body style="background-color: #b3b3b3;">
<!-- Top Section Header / 0- ===== Only this top portion expands 100% width across the top ===== -->
<table border="0" cellpadding="0" cellspacing="0" role="presentation" style="background-color: #010101;" width="100%">
<tr>
<td align="center">
<table border="0" cellpadding="0" cellspacing="0" role="presentation">
<tr>
<td align="center" class="niq-top" style="background-color: #010101;font-size:0;line-height:0;"><img alt="NielsenIQ" src="https://microsites.nielsen.com/web-assets/wp-content/uploads/sites/10/2021/01/the-iq-brief-top-bar-no-N.png"></td>
</tr>
</table>
</td>
</tr>
</table>
<!-- End Top Section -->
<!-- Main Content Area -->
<table align="center" border="0" cellpadding="0" cellspacing="0" class="wrapper" role="presenation" style="background-color: #fefefe;">
<tr>
<td><!-- Top Story Block -->
<table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation">
<tr>
<td align="center"><!-- Top Story -->
<table border="0" cellpadding="0" cellspacing="0" class="wrapper" role="presentation" style="width: 640px;">
<tr>
<td class="lead-in" style="background-image: url('https://microsites.nielseniq.com/web-assets/wp-content/uploads/sites/7/2022/03/white-background-1.png'); background-color: #ffffff; background-position:top left; background-repeat: no-repeat;">
<!--[if gte mso 9]>
<v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" fillcolor="#fefefe" style="width: 640px; height: 317px;">
<v:fill type="tile" type="frame" src="https://microsites.nielseniq.com/web-assets/wp-content/uploads/sites/7/2022/03/white-background-1.png" color="#656565" />
<v:textbox style="mso-fit-shape-to-text:true" inset="0,0,0,0">
<![endif]-->
<div>
<table border="0" cellpadding="0" cellspacing="0" role="presentation" width="100%">
<tr>
<td class="inner">
<h1 class="keep-black" style="font-family:'Montserrat', Helvetica, Arial, sans-serif; font-size: 28px; line-height: 38px; color: #000000; mso-color-alt:auto;font-weight: 700;">Gain the momentum to tackle what's next</h1>
<p class="keep-black" style="font-family: 'Montserrat', Helvetica, Arial, sans-serif; font-size: 16px; line-height: 26px; color: #000000; mso-color-alt:auto;">Explore ideas that are motivating progress and transforming the consumer packaged goods industry.</p>
<!--[if mso]><i style="letter-spacing: 12px;mso-font-width:-100%;mso-text-raise:32pt"> </i><![endif]--><span style="mso-text-raise:12pt;color:#ffffff;">Join us at C360 2022</span><!--[if mso]><i style="letter-spacing: 12px;mso-font-width:-100%"> </i><![endif]-->
</td>
</tr>
</table>
</div>
<!--[if gte mso 9]>
</v:textbox>
</v:rect>
<![endif]-->
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
I have email template with simple css. I send email to user but it show css code to user and template is not working correctly.
I test by sent email to myself on Gmail It work correctly.
and problem is I don't have enough data what kind of email client that they use.
If it possible I want to avoid using email with text only.
First image is what user get.
Second image is what I test and got on gmail
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<style type="text/css">
#media screen {
#font-face {
font-family: 'Lato';
font-style: normal;
font-weight: 400;
src: local('Lato Regular'), local('Lato-Regular'), url(https://fonts.gstatic.com/s/lato/v11/qIIYRU-oROkIk8vfvxw6QvesZW2xOQ-xsNqO47m55DA.woff) format('woff');
}
#font-face {
font-family: 'Lato';
font-style: normal;
font-weight: 700;
src: local('Lato Bold'), local('Lato-Bold'), url(https://fonts.gstatic.com/s/lato/v11/qdgUG4U09HnJwhYI-uK18wLUuEpTyoUstqEm5AMlJo4.woff) format('woff');
}
#font-face {
font-family: 'Lato';
font-style: italic;
font-weight: 400;
src: local('Lato Italic'), local('Lato-Italic'), url(https://fonts.gstatic.com/s/lato/v11/RYyZNoeFgb0l7W3Vu1aSWOvvDin1pK8aKteLpeZ5c0A.woff) format('woff');
}
#font-face {
font-family: 'Lato';
font-style: italic;
font-weight: 700;
src: local('Lato Bold Italic'), local('Lato-BoldItalic'), url(https://fonts.gstatic.com/s/lato/v11/HkF_qI1x_noxlxhrhMQYELO3LdcAZYWl9Si6vvxL-qU.woff) format('woff');
}
}
/* CLIENT-SPECIFIC STYLES */
body,
table,
td,
a {
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
}
table,
td {
mso-table-lspace: 0pt;
mso-table-rspace: 0pt;
}
img {
-ms-interpolation-mode: bicubic;
}
/* RESET STYLES */
img {
border: 0;
height: auto;
line-height: 100%;
outline: none;
text-decoration: none;
}
table {
border-collapse: collapse !important;
}
body {
height: 100% !important;
margin: 0 !important;
padding: 0 !important;
width: 100% !important;
}
/* iOS BLUE LINKS */
a[x-apple-data-detectors] {
color: inherit !important;
text-decoration: none !important;
font-size: inherit !important;
font-family: inherit !important;
font-weight: inherit !important;
line-height: inherit !important;
}
/* MOBILE STYLES */
#media screen and (max-width:600px) {
h1 {
font-size: 32px !important;
line-height: 32px !important;
}
}
/* ANDROID CENTER FIX */
div[style*="margin: 16px 0;"] {
margin: 0 !important;
}
</style>
</head>
<body style="background-color: #f4f4f4; margin: 0 !important; padding: 0 !important;">
<div style="display: none; font-size: 1px; color: #fefefe; line-height: 1px; font-family: 'Lato', Helvetica, Arial, sans-serif; max-height: 0px; max-width: 0px; opacity: 0; overflow: hidden;"> We're thrilled to have you here! Get ready to dive into your new account. </div>
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td bgcolor="#2194F4" align="center">
<table border="0" cellpadding="0" cellspacing="0" width="100%" style="max-width: 600px;">
<tr>
<td align="center" valign="top" style="padding: 40px 10px 40px 10px;"> </td>
</tr>
</table>
</td>
</tr>
<tr>
<td bgcolor="#2194F4" align="center" style="padding: 0px 10px 0px 10px;">
<table border="0" cellpadding="0" cellspacing="0" width="100%" style="max-width: 600px;">
<tr>
<td bgcolor="#ffffff" align="center" valign="top" style="padding: 40px 20px 20px 20px; border-radius: 4px 4px 0px 0px; color: #111111; font-family: 'Lato', Helvetica, Arial, sans-serif; font-size: 48px; font-weight: 400; letter-spacing: 4px; line-height: 48px;">
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td bgcolor="#f4f4f4" align="center" style="padding: 0px 10px 0px 10px;">
<table border="0" cellpadding="0" cellspacing="0" width="100%" style="max-width: 600px;">
<tr>
<td bgcolor="#ffffff" align="left" style="padding: 20px 30px 40px 30px; color: #666666; font-family: 'Lato', Helvetica, Arial, sans-serif; font-size: 18px; font-weight: 400; line-height: 25px;">
<p style="margin: 0;">We're excited to have you get started. First, you need to confirm your account. Just press the button below.</p>
</td>
</tr>
<tr>
<td bgcolor="#ffffff" align="left">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td bgcolor="#ffffff" align="center" style="padding: 20px 30px 30px 30px;">
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td align="center" style="padding-right:10px;border-radius: 3px;" bgcolor="#2194F4">
Confirm Contract
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td bgcolor="#ffffff" align="left">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td bgcolor="#ffffff" align="center" style="padding: 20px 30px 60px 30px;">
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td align="center" style="padding-right:10px;border-radius: 3px;" bgcolor="#65F489">
View Contract
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td bgcolor="#ffffff" align="left" style="padding: 0px 30px 40px 30px; border-radius: 0px 0px 4px 4px; color: #666666; font-family: 'Lato', Helvetica, Arial, sans-serif; font-size: 18px; font-weight: 400; line-height: 25px;">
<p style="margin: 0;">Cheers,<br> Team</p>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
When you send an email like this you will want a fallback. The person receiving the email can set the email up so he will see text only. You want to create a multipart message. This might help you out, so both types get content. Multipart MIME Email Guide or here: How do I send a multipart email (both HTML and plain text)
It looks like you're forwarding the email - emails will get reformatted according to the native styles of the specific email application. There's very little we can do to control that. If you want to test what it will look like, you need to send to them directly. You can use something like https://putsmail.com/ if you need.
However, not sure why the #font-face declaration are showing on forward. They shouldn't be. I suggest removing them from the #media screen { ... } - you don't need that. Just have #font-face { ... } declarations on their own.
I've used Mailchimp to build the main template structure and then modified properties and added some elements to get it working on Outlook versions.
It looks fine on most of web clients, desktop clients (Thunderbird and Mail[Apple]), but in Outlook, a white gap appears.
I've checked the code multiple times, done modifications and the only thing I'm getting is to move down or up the white gap. I've modified the template and put some stock content so you can check the source code.
Here is a codepen to check the source code: https://codepen.io/anon/pen/wEoxKy
<div class="col num6" style="max-width: 320px;min-width: 250px;display: table-cell;vertical-align: top;background-color:#000000;">
<div style="background-color: #000000; width: 100% !important;"><!--[if (!mso)&(!IE)]><!-->
<div style="border-top: 0px solid transparent; border-left: 0px solid transparent; border-bottom: 0px solid transparent; border-right: 0px solid transparent; padding-top:0px; padding-bottom:0px; padding-right: 0px; padding-left: 5px;"><!--<![endif]-->
<div align="center" class="img-container center autowidth fullwidth " style="padding-right: 0px; padding-left: 0px;"><!--[if mso]><table width="100%" cellpadding="0" cellspacing="0" border="0"><tr style="line-height:0px;line-height:0px;"><td style="padding-right: 0px; padding-left: 0.5px;" align="center"><![endif]--><img align="center" alt="Image" class="center autowidth fullwidth" height="auto" src="https://www.demilked.com/magazine/wp-content/uploads/2018/03/5aaa1ce36b9c8-funny-weird-wtf-stock-photos-coverimage.jpg" style="outline: none; text-decoration: none; clear: both; border: 0px; width: 261px; max-width: 245px; display: block !important;" title="Image" width="262.5" /> <!--[if mso]></td></tr></table><![endif]--></div>
<div align="center" class="img-container center autowidth " style="padding-right: 0px; padding-left: 0px; margin-top: 5px; height: 40px;"><!--[if mso]><table width="100%" cellpadding="0" cellspacing="0" border="0"><tr style="line-height:0px;line-height:0px;"><td style="padding-right: 0px; padding-left: 0px; padding-top: 5px;" align="center"><![endif]--><img align="center" alt="Image" class="center autowidth " height="auto" src="https://via.placeholder.com/170x40" style="outline: none; text-decoration: none; clear: both; border: 0px; width: 192px; max-width: 168px; display: block !important;" title="Image" width="192" /> <!--[if mso]></td></tr></table><![endif]--></div>
<div><!--[if mso]><table width="100%" cellpadding="0" cellspacing="0" border="0"><tr><td height="80" style="padding-right: 10px; padding-left: 10px; padding-top: 10px; padding-bottom: 10px;background-color:#000000;"><![endif]-->
<div class="bwmxstext" style="color:#998b70;line-height:150%;font-family:'Roboto', sans-serif; padding-right: 10px; padding-left: 10px; padding-top: 10px; padding-bottom: 10px;">
<div style="font-size:12px;line-height:18px;color:#fff;font-family:'Roboto', sans-serif;text-align:left;height: 80px;">
<p style="margin: 0;font-size: 12px;line-height: 18px;text-align: center"><span style="font-size: 13px; line-height: 25px;"><strong><span style="line-height: 25px; font-size: 13px;">LOREM IPSUM</span></strong></span></p>
<p style="margin: 0;font-size: 11px;line-height: 16px;text-align: center">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus condimentum dictum sollicitudin. Donec mattis mauris et massa dapibus, at posuere neque mollis.</p>
</div>
</div>
<!--[if mso]></td></tr></table><![endif]--></div>
<div align="center" class="img-container center autowidth " style="padding-right: 0px; padding-left: 0px; margin-bottom: 10px;"><!--[if mso]><table width="100%" cellpadding="0" cellspacing="0" border="0"><tr style="line-height:0px;line-height:0px;background-color:#000000;"><td width="25%" align="right"><img src="https://www.nubiscrm.es/lists/images/image/testAgosto/boton-left.png"></td><td style="padding-right: 0px; padding-left: 0px; background-color: #fff; vertical-align: middle;" width="50%" valign="middle" align="center"><![endif]--> BOOK NOW <!--[if mso]></td><td width="25%" align="left"><img src="https://www.nubiscrm.es/lists/images/image/testAgosto/boton-right.png"></td></tr></table><![endif]--></div>
<!--[if (!mso)&(!IE)]><!--></div>
<!--<![endif]--></div>
</div>
This is how it's seen on Outlook 2010. I can't find any element causing that white gap. Also tried to set the main container to black so maybe I could hide it but it's not getting the color at all.
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.