I was asked to code an html mail (for mailing campaigns).
I've got everything working except the following piece of code.
What I try to do is having an image with other elements on top like titles, a button, a logo, ...
I had all that (not commented lines), but to make it responsive I had to make some changes (commented lines) and then the layout was completely messed up.
To make it even more of a challenge, it's quite horrifying to watch in outlook (even the not commented lines) so a solution for that would be nice to have as well (outlook seems to strip all positioning attributes)
<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta charset="UTF-8">
<title>Title</title>
<style>
#import url(http://fonts.googleapis.com/css?family=Open+Sans:400,300,700);
html {
font-family: 'Open Sans',sans-serif;
font-size: 13px;
line-height: 20px;
/*color: #87888a; */
color: #00000;
letter-spacing: 0,5px;
}
#headertable {
border-bottom: 5px solid #E40520;
position: relative;
max-width: 600px;
}
.absolutepos {
position: absolute;
left: 0;
right: 0;
bottom: 0;
}
#invitation {
color: #ffffff;
text-transform: uppercase;
padding:5px 23px 5px 15px;
font-size: 24px;
border-radius: 0 5px 5px 0;
-webkit-border-radius: 0 5px 5px 0;
-moz-border-radius: 0 5px 5px 0;
background-color: #E40520;
border: solid #E40520;
display: inline-block;
letter-spacing: 2px;
}
h1 {
font-size: 30px;
line-height: 24px;
color: #ffffff;
font-weight: normal;
text-transform: uppercase;
letter-spacing: 1px;
margin: 0;
padding: 0;
}
h2 {
font-size: 20px;
line-height: 24px;
color: #ffffff;
font-weight: normal;
text-transform: uppercase;
letter-spacing: 1px;
margin: 20px 0 0 0;
padding: 0;
}
.submit-button {
padding:7px 12px;
text-decoration: none;
border-radius:5px;
-webkit-border-radius:5px;
-moz-border-radius:5px;
background:rgba(255,255,255,0.5);
/*border:solid #87888A;*/
display:inline-block;
font-size: 18px;
line-height: 24px;
color: #ffffff;
text-transform: uppercase;
letter-spacing: 1px;
transition: background .2s ease-in-out, color .2s ease-in-out;
}
.submit-button:hover {
background: #E40520;
}
</style>
</head>
<body bgcolor="#eeeeee">
<table border="0" cellspacing="0" cellpadding="0" align="center" width="600" height="290" id="headertable">
<!--<table border="0" cellspacing="0" cellpadding="0" align="center" id="headertable" bgcolor="#00000">-->
<tbody>
<tr>
<td>
<img class="absolutepos" width="600" height="290" style="z-index: -1; top: 0;" alt="header_image" src="https://cdn.photographylife.com/wp-content/uploads/2014/06/Nikon-D810-Image-Sample-6.jpg" >
<!--<img class="absolutepos" style="max-width: 600px; z-index: -1; top: 0;" alt="header_image" src="https://cdn.photographylife.com/wp-content/uploads/2014/06/Nikon-D810-Image-Sample-6.jpg" >-->
</td>
</tr>
<tr>
<td class="absolutepos" style="top: 15px; padding: 0 0 0 20px;">
<a href="http://google.com" target="_blank" title="google">
<img width="175" height="47" alt="logo" src="https://cdn.colorlib.com/wp/wp-content/uploads/sites/2/2014/02/Olympic-logo.png">
</a>
</td>
</tr>
<tr>
<td class="absolutepos" style="top: 80px;">
<span id="invitation">type</span>
</td>
</tr>
<tr>
<td align="center" class="absolutepos" style="top: 150px;">
<h1>Big title</h1>
<h2>subtitle</h2>
</td>
</tr>
<tr>
<td align="center" class="absolutepos" style="top: 225px;">
<a href="http://google.com" target="_blank" title="Register" class="submit-button">
Register
</a>
</td>
</tr>
</tbody>
</table>
<table border="0" cellspacing="0" cellpadding="0" align="center" bgcolor="#ffffff" width="600">
<tbody>
<tr>
<td colspan="2" style="padding: 40px 30px 10px 30px;">
...
Thanks in advance
position:absolute won't work in gmail.
Outlook is using HTML renderer, so you might run into some issues in Outlook as well.
Source: Detailed list for CSS support in different email clients
Related
This is my code
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td style="font-size:40px;line-height:2px;color:red;">◖</td>
<td style="width:80px;height:30px;background-color:red;"></td>
<td style="font-size:40px;line-height:2px;color:red;">◗</td>
</tr>
</table>
Fiddle Example
What I want to do is to appear my table content as the div below ( with border radius )
<div style="width:120px;height:30px;background-color:red;border-radius:50px;"></div>
I have to do it with table like this because this code will use in html email for Outlook Desktop client which doesn't support border-radius .
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<div style="padding: 0;
margin: 0;
font-size: 40px;
line-height: 2px;
color: red;
background-image: url(http://freshcodelabel.com/images/red-half-circle.png);
background-repeat:no-repeat;
transform: rotate(180deg);
height: 186px;
width:90px;
display:inline-block;
">
</div>
<div style="width: 212px;height: 179px;background-color:#c60000;display:inline-block;"></div>
<div style="
padding: 0;
margin: 0;
font-size: 40px;
line-height: 2px;
color: red;
background-image: url(http://freshcodelabel.com/images/red-half-circle.png);
height: 186px;
background-repeat:no-repeat;
width:90px;
display:inline-block;
background-position: 0px 7px;
"></div>
</tr>
</table>
JSFiddle
Use images instead of characters.
Completely based on div.
div.my-button{
padding: 12px 18px 12px 18px;
border: 1px solid #e9703e;
background-color: #EB7035;
border-radius: 10px;
font-size: 16px;
margin-top: 20px;
width: 119px;
}
div.my-button a{
font-family: Helvetica, Arial, sans-serif;
color: #ffffff;
text-decoration: none;
}
<div class="my-button">
I am a button →
</div>
I'm working on a two-column reponsive email. Everything is appearing perfect except that I can't get the right border in one of my TDs to remove on mobile. I have the following style set:
td.copy { padding-right: 0px; border-bottom: 0; border-right: none; padding-bottom: 20px; }
Strangely, the bottom border is adding just fine.
Here is my code. Any help would be greatly appreciated. I can't figure this one out.
<!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></title>
<style type="text/css">
body { margin: 0px; padding: 0px; }
#media only screen and (max-width: 660px) {
table.view { width: 480px !important; }
table.container { width: 480px !important; }
table.left { width: 260px !important; }
table.right { width: 140px !important; }
td.design img { display: none; }
td.design { background: #FFF url(http://www3.poscorp.com/emarketing/market-growth/free-design-25-off-sm.gif) no-repeat;
height: 75px;
background-repeat: no-repeat !important;
background-position: center !important;
}
td.contact table { width: 100% !important; text-align: center;}
table.info p { text-align:center;}
table.copy { width: 480px !important; }
}
#media only screen and (max-width: 510px) {
table.view { width: 100% !important; }
table.container { width: 100% !important; }
table.left { width: 100% !important; margin-bottom: 10px; }
td.copy { padding-right: 0px; border-bottom: 0; border-right: none; padding-bottom: 20px; }
table.right { width: 100% !important; }
table.video td { padding-top: 15px; }
td.design img { display: none; }
td.design { background: #FFF url(http://www3.poscorp.com/emarketing/market-growth/free-design-25-off.gif) no-repeat;
height: 88px;
background-repeat: no-repeat !important;
background-position: center !important;
vertical-align: middle;
text-align: center; }
table.copy { width: 100% !important; }
}
</style>
</head>
<body>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td>
<table width="600" border="0" align="center" cellpadding="0" cellspacing="0" class="view">
<tr>
<td align="right" valign="middle" style="font-family: Tahoma, Arial, Helvetica, sans-serif; font-size: 10px; line-height:100%; color: #666; background: #FFF; padding: 8px 10px 8px 10px; vertical-align:middle;"><img src="http://www2.poscorp.com/images/addthis/16x16/email.png" alt="Forward Email" width="13" height="13" style="vertical-align: sub;"> Forward to a Friend | Email not displaying correctly? View it in your browser.</td>
</tr>
</table>
<table class="container" align="center" width="600" border="0" cellspacing="0" cellpadding="20" bgcolor="#FFFFFF" style="border:1px solid #CCC;">
<tr>
<td class="header" bgcolor="#ffffff" style="border-top: #00a160 solid 10px; padding: 20px 60px 20px 20px; font-family: Tahoma, Arial, Helvetica, sans-serif; font-size: 27px; line-height:140%; color: #00a160; background: #FFF; ">When communicating with your patients, <span style="font-weight:bold;">consistency counts.</span></td>
</tr>
<tr>
<td class="content" bgcolor="#ffffff" style="font-family: Tahoma,Arial, Helvetica, sans-serif; font-size: 13px; line-height:130%; color: #333; background: #FFF; padding: 0px 20px 20px 20px;">
<table width="340" border="0" cellspacing="0" cellpadding="0" align="left" class="left" >
<tr>
<td class="copy" style="font-family: Tahoma, Arial, Helvetica, sans-serif; font-size: 13px; line-height:130%; color: #333; background: #FFF; border-right: solid #00a160 1px; padding-right:20px;"><p style="margin-bottom: 15px; margin-top: 0px; padding-top: 0px; ">POS provides practices customized print and digital communication to ensure your brand stands out – and that it stays consistent from one communication solution to the next. From print and messaging to billing and surveying, our services help you deliver communications in the patient’s preferred way, increase practice revenue and improve patient satisfaction.</p>
<p style="margin-bottom: 15px; margin-top: 0px; padding-top: 0px; ">It's how you'll build loyalty while helping keep your patients healthy.</p>
<p style="margin-bottom: 15px; margin-top: 15px;">Print – With print services from POS, you’ll receive clarity, convenience and consistency – from your practice stationery to marketing materials.</p>
<p style="margin-bottom: 15px; margin-top: 15px;">Statement Processing & Patient Payment Services – POS provides solutions to improve your practice's profitability. We specialize in driving down the cost of collecting your patient-owed balances through our Statement Processing, Online Bill Pay and Past Due Notification solutions.</p>
<p style="margin-bottom: 15px; margin-top: 15px;">Digital Messaging – Our automated communication system, POS Messaging™, lets you send customized, two-way communication to your patients via email, phone, text or mail to help you reduce no-shows and more.</p>
<p style="margin-bottom: 0px; margin-top: 15px;">Patient Surveys – With POS Surveys™, you can find out what your patients like about your practice and what you can improve so they don’t leave.</p></td>
</tr>
</table>
<table width="200" border="0" cellspacing="0" cellpadding="0" align="right" class="right" >
<tr>
<td>
<table width="100%" border="0" cellspacing="0" cellpadding="0" class="video">
<tr>
<td style="font-family: Tahoma, Arial, Helvetica, sans-serif; font-size: 14px; line-height:130%; color: #333; background: #FFF; border-bottom: 1px #00a160 solid;"><p style="margin-top:0px; margin-bottom: 15px; text-align:center;"><img src="http://www3.poscorp.com/emarketing/market-growth/blog-logo.gif" alt="POS Blog - Communicate" width="150" height="69"></p>
<p style="margin-top:0px; margin-bottom: 10px;">The blog for best practices in patient communication.</p>
<p style="margin-top:0px; margin-bottom: 20px;">JOIN NOW</p></td>
</tr>
</table>
<table width="100%" border="0" cellspacing="0" cellpadding="0" class="promo">
<tr>
<td align="center" valign="middle" class="design"><p style="text-align:center; vertical-align:middle;" ><img src="http://www3.poscorp.com/emarketing/market-growth/free-design-25-off.gif" width="200" height="88" alt="Free Design and 25% a new print item"></p></td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td class="content" bgcolor="#ffffff" style="font-family: Tahoma, Arial, Helvetica, sans-serif; font-size: 13px; line-height:130%; color: #333; background: #FFF; padding: 10px 20px 20px 20px;"><p style="margin: 0px; ">For more information, contact your Regional Territory Manager, <span style="font-weight:bold;">%%user_name%%</span> at <span style="font-weight:bold;">%%user_phone%%</span> or <span style="font-weight:bold;">%%user_email%%</span>.</p></td>
</tr>
<tr>
<td class="content" bgcolor="#ffffff" style="font-family: Tahoma, Arial, Helvetica, sans-serif; font-size: 14px; line-height:130%; color: #333; background: #FFF; padding: 0px 20px 0px 20px; text-align:center;">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td align="center"><p style="font-family: Tahoma, Arial, Helvetica, sans-serif; font-size: 13px; line-height:130%; color: #333; background: #FFF; padding: 5px 0px 5px 0px; border-top: #CCC solid 1px; border-bottom:#CCC solid 1px; text-align:center; letter-spacing: 1px;">PRINT <span style="color:#00a160;">|</span> STATEMENT PROCESSING <span style="color:#00a160;">|</span> DIGITAL MESSAGING <span style="color:#00a160;">|</span> PATIENT SURVEYS</p></td>
</tr>
</table>
</td>
</tr>
<tr>
<td align="center" valign="top" class="contact" style="font-family: Arial, sans-serif; font-size: 14px; line-height:115%; color: #333; background: #FFF; padding: 20px 20px 20px 20px;">
<table width="275" border="0" cellspacing="0" cellpadding="0" align="left" class="logo">
<tr>
<td class="poslogo"><img src="http://www3.poscorp.com/emarketing/master/pos_logo_hc.gif" alt="POS Professional Office Services, Inc." width="272" height="45"></td>
</tr>
</table>
<table width="265" border="0" cellspacing="0" cellpadding="0" align="right" class="info">
<tr>
<td align="right"><p style="font-family: Tahoma, Arial, sans-serif; font-size: 13px; line-height: 100%; color: #333; font-weight:bold; margin:19px 0px 5px 0px;">800.331.4976 <span style="color:#00a160;">|</span> poscorp.com <span style="color:#00a160;">|</span> <img src="http://www3.poscorp.com/emarketing/master/linkedin.jpg" alt="LinkedIn" width="16" height="16" border="0" style="vertical-align:bottom;"/> <img src="http://www3.poscorp.com/emarketing/master/youtube.jpg" width="39" height="16" alt="YouTube" border="0" style="vertical-align:bottom;"></p></td>
</tr>
</table>
</td>
</tr>
</table>
<table width="600" border="0" align="center" cellpadding="0" cellspacing="0" class="copy">
<tr>
<td bgcolor="#ffffff" style="font-family: Tahoma, Arial, Helvetica, sans-serif; font-size: 10px; line-height:120%; color: #666; background: #FFF; padding: 10px 10px 10px 10px; border-top:1px solid #CCC;">
<p style="margin-top: 0px; margin-bottom:10px;"><span style="font-weight:bold;">Our mailing address is:</span> <br>
%%account_address%%</p>
<p style="margin-top: 10px; margin-bottom:0px;">update subscription preferences</p></td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
Did you add it to the media query?, dont forget !important.
I've been having an issue with how outlook has been displaying table HTML for a while now, and I have not been able to resolve this issue for the life of me. Basically, there's a line that cuts through the containing <td> when nesting tables (see the slight gray line in the attached image to the right of the purple <td>).
This is on email's code I've been working with as an example.
<style type="text/css">
#media only screen and (max-width:480px){
.templateColumns{
width: 100% !important;
}
.body-text {
font-size: 16px !important;
}
.body-about-us {
font-size: 15px !important;
}
.center-align {
text-align: center !important;
}
.column-image {
height:auto !important;
max-width:480px !important;
width: 100% !important;
}
.column-container {
display: block !important;
width: 100% !important;
}
.sociologos-container {
text-align: center !important;
margin-left: auto !important;
margin-right: auto !important;
padding-top: 15px !important;
padding-bottom: 5px !important;
}
.mopad-left {
padding-left: 15px !important;
}
.mopad-right {
padding-right: 15px !important;
}
.mopad-top {
padding-top: 15px !important;
}
.mopad-bottom {
padding-bottom: 15px !important;
}
.mopad-button-bottom {
padding-bottom: 30px !important;
}
.nopad-bottom {
padding-bottom: 0 !important;
}
.nopad-top {
padding-top: 0 !important;
}
.nopad-left {
padding-left: 0 !important;
}
.nopad-right {
padding-right: 0 !important;
}
.modisplay-none {
display: none !important;
}
.mainbtn {
max-width: 450px !important;
width: 100% !important;
margin-top: 10px !important;
}
.mainbtn a{
display:block !important;
}
.mobold {
font-weight: bold !important;
}
.heading {
font-size: 32px !important;
line-height: 36px !important;
}
.heading2 {
font-size: 24px !important;
line-height: 28px !important;
}
.heading3 {
font-size: 20px !important;
line-height: 20px !important;
}
.sociologos {
width: 32px !important;
height: 32px !important;
}
.join-us {
text-align: center !important;
}
}
p {margin-bottom: 25px;
margin-top:10px;}
</style>
<body vlink="#421b3e" style="margin:0; padding: 0; background-color:#f2f2f2;"><!--this sets the visited link color, a background color and eliminates any potential auto padding on the page-->
<div style="display:none;font-size:1px;color:#333333;line-height:1px;max-height:0px;max-width:0px;opacity:0;overflow:hidden;">
</div>
<table border="0" cellpadding="0" cellspacing="0" width="100%" height="100%" id="bodytable" style="background-color:#f2f2f2; font-family: Arial, Helvetica, sans-serif;">
<tr>
<td align="center" valign="top" style="padding-top:0px;">
<table border="0" cellpadding="0" cellspacing="0" width="580" class="templateColumns mopad-bottom nopad-top mopad-left mopad-right" style=" background-color: #f2f2f2; padding-top: 0; padding-bottom: 25px; margin:0;">
<!-- start PURPLE HEADER -->
<tr>
<td width="100%" align="center" valign="top" class="templateColumns mopad-left mopad-right mopad-top mopad-bottom" id="logo" style="margin:0; background-color: #f2f2f2; padding-top: 20px; padding-bottom: 20px;">
LOREM IPSUM
</td>
</tr>
<!-- end PURPLE HEADER -->
<!-- start INTRO SECTION -->
<tr>
<td align="center" valign="top" class="templateColumns" width="100%" style="background-color: #ffffff; padding: margin:0;"><img class="column-image" src="http://go.advicentsolutions.com/rs/841-KAP-325/images/FosteringGrowth2016TitleBanner.png" alt="Nurturing Growth" width="580" style="display:block;" /></td>
</tr>
<!-- end INTRO SECTION -->
<!-- start FIRST CONTENT SECTION -->
<tr>
<td width="100%" class="mopad-left mopad-right mkteditable" id="primary-content" style="background-color: #ffffff; font-family: Arial, sans-serif; padding-top:15px; padding-bottom:30px; padding-left:40px; padding-right:40px;">
<!--<h3 class="body-text mopad-right mopad-left" style="font-family: Arial, sans-serif; font-size: 17px; color: #3c3d42; letter-spacing: -.25px; line-height: 1.5em; font-weight: bold; margin:0; padding: 0 0 5px 0; ">Did you know?</h3>-->
<p class="heading2" style="text-align:center; font-size: 28px; color: #3c3d42; line-height: 30px;">lorem ipsum</p>
<p class="margin" style="text-align:center; font-family: Arial, sans-serif; font-size: 16px; color: #727577; line-height: 22px; font-weight: 400; ">lorem ipsum</p>
<table align="center" cellpadding="0" cellspacing="0" width="60%" style="background-color:#6a3757; border-radius: 2px; font-family: Arial, sans-serif; padding:2px; margin: auto;">
<tr>
<td align="center" style="font-family: Arial, sans-serif; color: #ffffff; border-radius: 4px; background-color: #6a3757; padding-top: 10px; padding-bottom: 10px;"><strong>lorem ipsum</strong></td>
</tr>
</table>
</td>
</tr>
<!-- end MAIN CTA BUTTON -->
<!-- start SOCIAL MEDIA SECTION -->
<tr>
<td width="100%" class="templateColumns mopad-bottom mopad-top mopad-left mopad-right" id="social-media" style="font-family: Arial, Helvetica, sans-serif; background-color: #f2f2f2; padding-left: 5px; padding-right: 5px; padding-bottom: 10px; padding-top: 10px; margin:0; ">
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td align="left" valign="middle" class="column-container join-us" width="50%" style="font-family: Arial, sans-serif; font-size: 14px; color: #3c3d42; ">
Join the Community!
</td>
<td aLOREM IPSUM class="column-container" width="50%">
<table cellpadding="0" class="sociologos-container" cellspacing="0" style="font-family: Arial, sans-serif;">
<tr>
<td align="left" class="sociologos" valign="top" style="padding-left: 5px;"><img border="0" style="display: block; padding-left: 5px;" class="sociologos" src="http://www.advicentsolutions.com/images/email/google_42.png" width="32" height="32" alt="Google Plus" /></td>
<td align="left" class="sociologos" valign="top" style="padding-left: 5px;">><img border="0" style="display: block; padding-left: 5px;" class="sociologos" src="http://www.advicentsolutions.com/images/email/twitter_42.png" width="32" height="32" alt="Twitter" /></td>
<td align="left" class="sociologos" valign="top" style="padding-left: 5px;"><img border="0" style="display: block; padding-left: 5px;" class="sociologos" src="http://www.advicentsolutions.com/images/email/facebook_42.png" width="32" height="32" alt="Facebook" /></td>
<td align="left" class="sociologos" valign="top" style="padding-left: 5px;"><img border="0" style="display: block; padding-left: 5px;" class="sociologos" src="http://www.advicentsolutions.com/images/email/linked_42.png" width="32" height="32" alt="LinkedIn" /></td>
<td align="left" class="sociologos" valign="top" style="padding-left: 5px;"><img border="0" class="sociologos" style="display: block; padding-left:5px;" src="http://www.advicentsolutions.com/images/email/youtube_42.png" width="32" height="32" alt="Youtube Channel" /></td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<!-- end SOCIAL MEDIA SECTION -->
<!-- start DISCLAIMER -->
<tr>
<td align="left" valign="top" width="100%" class="templateColumns mopad-bottom mopad-top mopad-left mopad-right" id="disclaimer" style="color:#727577; font-size: 12px; font-family: Arial, Helvetica, sans-serif; padding-left: 5px; padding-right:5px; padding-top:10px; margin:0;">
LOREM ISPUM
</td>
</tr>
<!-- end DISCLAIMER -->
</table>
</td>
</tr>
</table>
</body>
It displays fine as HTML, but I send mostly B2B stuff which means we're always trying to optimize for office. Sometimes the sizing of the banner image can affect it, but other than that one factor, when this happens seems completely arbitrary. It's the one Outlook workaround I haven't been able to figure out. Is there something in my code I'm missing?
Finnnaaalllly found the solution about ten min after posting this. Trick was to remove the padding inline css that was tied to the Lorem ipsum text within the table in the code.
I also fixed this in other instances where <p> tags applied to links in the tds also caused issue. Removing the <p> tags around the links within the table and any padding accompanying it fixes the issue.
I am trying to develop an HTML newsletter and I am experiencing problems with alignment. I have two adjacent cells ("week" and "03/2013" with different font-size and they should be align to the bottom. Tha standard solution which renders well in browsers doesn't render well in Outlook 2007. So I used a heuristic percent value to align the cells and this works in Outlook. But it's no surprise that it doesn't work in iPhone/iPad. Does anybody know how to make it work on both?
Thanks a lot
Here is my code
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<!--[if gte mso 9]>
<style _tmplitem="50" >
.article-content ol, .article-content ul {
margin: 0 0 0 24px;
padding: 0;
list-style-position: inside;
}
</style>
<![endif]-->
<style type="text/css">
#media screen and (max-width: 610px) {
a[class=fabsize]{text-decoration:none;color:#00FF00}
}
.l-footer a {
color: #b2b2b2 !important; text-decoration: underline;
}
.l-footer a:link {
color: #b2b2b2 !important; text-decoration: underline;
}
.l-footer a:visited {
color: #b2b2b2; text-decoration: underline;
}
.l-footer a:hover {
color: #b2b2b2; text-decoration: underline;
}
.l-footer a:active {
color: #b2b2b2;text-decoration: underline;
}
</style>
</head>
<body>
<table id="background-table" border="0" cellpadding="0" cellspacing="0" width="100%" style="letter-spacing: -0.01em; border-collapse: collapse; font-family: arial; text-align: left; margin: 0px; padding: 0px; border: 0px;">
<tbody style="margin: 0px; padding: 0px; border: 0px;">
<tr>
<td align="center" bgcolor="#FFFFFF" style="color: #6f6f6f; border: #6f6f6f;">
<!-- block preamble starts -->
<table class="l-preamble" border="0" cellpadding="0" cellspacing="0" width="600" style="letter-spacing: -0.01em; border-collapse: collapse; font-family: arial; text-align: left; margin: 0px; padding: 0px; border: 0px;">
<tbody style="margin: 0px; padding: 0px; border: 0px;">
<tr>
<td class="has-border-bottom-1" height="16" width="600" style="color: #6f6f6f; border-bottom: 1px solid #6f6f6f;"></td>
</tr>
<!-- element preamble-info ends -->
<!-- element preamble-year starts -->
<tr>
<td class="has-border-bottom-5 w600" height="55" width="600" style="color: #6f6f6f; border-bottom: 5px solid #6f6f6f;">
<table border="0" cellpadding="0" cellspacing="0" style="letter-spacing: -0.01em; border-collapse: collapse; font-family: arial; text-align: left; margin: 0px; padding: 0px; border: 0px;">
<tbody style="margin: 0px; padding: 0px; border: 0px;">
<tr>
<td class="w480 normal-text" height="29" width="474" border="1" style="color: #6f6f6f; font-size: 12px; line-height: 15px; border: #6f6f6f;"></td>
<td width="34" height="29" class="normal-text is-bold" style="vertical-align: bottom; color: #6f6f6f; font-weight: bold; border: #6f6f6f; font-size: 12px; line-height: 115%;" valign="bottom">WEEK</td>
<td width="91" height="29" class="header" style="vertical-align: bottom; text-align: right; letter-spacing: -0.04em; color: #6f6f6f; font-size: 22px; text-transform: uppercase; font-weight: bold; border: #6f6f6f;" align="right" valign="bottom">03 / 2013</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</body>
</html>
try this one. basically, put those texts in the same cell instead of two.
<table border="0" cellpadding="0" cellspacing="0" style="letter-spacing: -0.01em; border-collapse: collapse; font-family: arial; text-align: left;">
<tr>
<td height="29" width="474" style="color: #6f6f6f; font-size: 12px; line-height: 15px; border: #6f6f6f;"></td>
<td align="right" height="29" width="126" style="color: #6f6f6f; font-weight: bold; font-size: 12px; line-height: 115%;">WEEK <span style="letter-spacing: -0.04em; color: #6f6f6f; font-size: 22px; text-transform: uppercase; font-weight: bold;">03 / 2013</span></td>
</tr>
</table>
Try set line-height of "week" to font size from date. (line-height: 22px;)
<td width="34" height="29" class="normal-text is-bold" style="vertical-align: bottom; color: #6f6f6f; font-weight: bold; border: #6f6f6f; font-size: 12px; line-height: 22px;" valign="bottom">WEEK</td>
here: http://jsbin.com/anejax/1/
Or if u want all text aligned to bottom u have to set valign="bottom" in
<td class="has-border-bottom-5 w600" height="55" width="600" style="color: #6f6f6f; border-bottom: 5px solid #6f6f6f;" valign="bottom">
here: http://jsbin.com/ipafoh/1/
The title of the question says “to baseline”, but the text says “to the bottom”. And you are in fact using vertical-align: bottom.
I assume that you want baseline alignment. Then you should simply set vertical-align: baseline (and remove any code you might have added to try some heuristic – i.e., guesswork – adjustment to turn bottom alignment to baseline alignment).
In email always use the html valign="bottom" to align anything to the bottom of a table cell.
Example:
<table width="600" border="0" cellpadding="0" cellspacing="0">
<tr>
<td height="100" width="300" valign="bottom" style="font-size:12px;" bgcolor="#959595">
cell 1
</td>
<td height="100" width="300" valign="bottom" style="font-size:18px;" bgcolor="#858585">
cell 2
</td>
</tr>
</table>
I am developing a newsletter which should work on Outlook 2007 iPhone and iPad.
Ideally I would like to have links in the footer which are underlined but iPad and iPhone add their blue underline automatically to any link. And I can't get rid of it in any way (I googled already and read at least 10 different articles about this problematic)
Can someone please help me understanding what I do wrong?
I tried with lists but I can't get them on the same line anymore.
This is my code:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<!--[if gte mso 9]>
<style _tmplitem="50" >
.article-content ol, .article-content ul {
margin: 0 0 0 24px;
padding: 0;
list-style-position: inside;
}
</style>
<![endif]-->
<style type="text/css">
#media screen and (max-width: 610px) {
a[class=no-underline]{text-decoration:none;color:#00FF00}
}
.l-footer a {
color: #b2b2b2 !important; text-decoration: underline;
}
.l-footer a:link {
color: #b2b2b2 !important; text-decoration: underline;
}
.l-footer a:visited {
color: #b2b2b2; text-decoration: underline;
}
.l-footer a:hover {
color: #b2b2b2; text-decoration: underline;
}
.l-footer a:active {
color: #b2b2b2;text-decoration: underline;
}
</style>
</head>
<body>
<table id="background-table" border="0" cellpadding="0" cellspacing="0" width="100%" style="letter-spacing: -0.01em; border-collapse: collapse; font-family: arial; text-align: left; margin: 0px; padding: 0px; border: 0px;">
<tbody style="margin: 0px; padding: 0px; border: 0px;">
<tr>
<td align="center" bgcolor="#FFFFFF" style="color: #6f6f6f; border: #6f6f6f;">
<table class="w600 l-content-table" border="0" cellpadding="0" cellspacing="0" width="600" style="letter-spacing: -0.01em; border-collapse: collapse; font-family: arial; text-align: left; margin: 0px; padding: 0px; border: 0px;">
<tbody style="margin: 0px; padding: 0px; border: 0px;">
<tr>
<td class="w600" height="55" width="600" style="color: #6f6f6f; border: #6f6f6f;">
<table class="l-footer" border="0" cellpadding="0" cellspacing="0" style="letter-spacing: -0.01em; border-collapse: collapse; font-family: arial; text-align: left; margin: 0px; padding: 0px; border: 0px;">
<tbody style="margin: 0px; padding: 0px; border: 0px;">
<tr>
<td width="400" style="color: #6f6f6f; border: #6f6f6f;">
<table class="small-font" style="letter-spacing: -0.01em; border-collapse: collapse; font-family: arial; text-align: left; font-size: 12px; color: #b2b2b2 !important; text-transform: uppercase; margin: 0px; padding: 0px; border: 0px;">
<tbody style="margin: 0px; padding: 0px; border: 0px;">
<tr>
<td class="no-underline" class='is-last' style="letter-spacing: 0; padding-right: 12px; ">
<font style=' color: #b2b2b2;'>
<a href="http://www.lyra.net/fabio" target="blank" style="line-height: inherit; margin: 0px; padding: 0px; border: 0px;color: #b2b2b2;">
Responsibles
</a>
</font>
</td>
<td class="no-underline" class='is-last' style="letter-spacing: 0; padding-right: 12px; padding-left: 12px; border-left: 1px solid #b2b2b2;">
<font style=' color: #b2b2b2;'>
<a href="http://www.lyra.net/fabio" target="blank" style="line-height: inherit; margin: 0px; padding: 0px; border: 0px;color: #b2b2b2;">
Disclaimer
</a>
</font>
</td>
<td class="no-underline" class='is-last' style="letter-spacing: 0; padding-right: 12px; padding-left: 12px; border-left: 1px solid #b2b2b2;">
<font style=' color: #b2b2b2;'>
<a href="http://www.lyra.net/fabio" target="blank" style="line-height: inherit; margin: 0px; padding: 0px; border: 0px;color: #b2b2b2;">
Feedback
</a>
</font>
</td>
<td class="no-underline" class='is-last' style="letter-spacing: 0; padding-right: 12px; padding-left: 12px; border-left: 1px solid #b2b2b2;">
<font style=' color: #b2b2b2;'>
<a href="http://www.lyra.net/fabio" target="blank" style="line-height: inherit; margin: 0px; padding: 0px; border: 0px;color: #b2b2b2;">
RSS feeds
</a>
</font>
</td>
</tr>
</tbody>
</table>
</td>
<td width="210" align="right" style="color: #6f6f6f; border: #6f6f6f;">
<table class="small-font" style="letter-spacing: -0.01em; border-collapse: collapse; font-family: arial; text-align: left; font-size: 12px; color: #b2b2b2 !important; text-transform: uppercase; margin: 0px; padding: 0px; border: 0px;">
<tbody style="margin: 0px; padding: 0px; border: 0px;">
<tr>
<td class="is-first" style="color: #6f6f6f;letter-spacing: 0; padding: 0px; border: 0px">
<span style="color: #b2b2b2; line-height: inherit; margin: 0px; padding: 0px; border: 0px;">
© 2013
</span>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<!-- block footer ends -->
</td>
</tr>
</tbody>
</table>
</body>
</html>
To test my code I send the HTML page as email from IE8
So far, the only solution I found is including the links in a single-element unordered list. This will ensure that the right underline color is applied also on iPhone.
<td style="letter-spacing: 0; border-left: 1px solid #b2b2b2;" width="120">
<ul style='list-style:none;' class="list">
<li class="plus last" style='margin-left:8px; border-top:0px;border-bottom:0px;'>
<font style="font-family: arial, helvetica, sans-serif;font-size: 11px;color: #ffffff;">
<a href="http://www.test.com" target='blank'>Rss Feeds</a>
</font>
</li>
</ul>
</td>
and this is the style
.list {
list-style:none;
margin:0px 0 0px 0px;
padding:0;
}
li.plus {
display:block;
margin:0px;
padding: 0px 0px 0px 0px;
text-decoration:none;
font-size: 12px;
}
li.plus a{
padding-left: 8px;
padding-right: 8px;
}
li.last a{
padding-right: 0px;
}
li.first a{
padding-left: 0px;
}
a:link {
color:#b2b2b2;;
text-decoration:underline;
}
a:visited {
color:#b2b2b2;;
text-decoration:none;
}
a:hover {
color:#b2b2b2;;
text-decoration:underline;
}
a:active {
color:#b2b2b2;;
text-decoration:none;
}
Just add this in your head section of the page
<style type=”text/css”>
.appleLinks a {color:#000000; text-decoration: none;}
.appleLinksWhite a {color:#ffffff; text-decoration: none;}
</style>
and it will stop links appearing blue in iOS and instead make them white. Just change the colour to what you require.
You can also throw plain <span> tags in between all text that would be turned into an unstyled link in outlook / gmail / ios, for example-
call 1 - 55<span>5 - 314 - 5</span>678
25 L Str<span>eet, Bosto</span>n MA 11385