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
Related
I want the .menu-box-middle ul list items to display inline, however all the list items overlap each other! I can't figure out how to change it. Ideally I want them evenly spaced across the page within the main-container.
HTML and CSS can be found here: http://codepen.io/anon/pen/Mbbbmv
HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>Anthony and Nicola's wedding</title>
<link href="tplcss/samplestyle/style.css" rel="stylesheet" type="text/css" />
<link href="http://default.gettingmarried.co.uk/src/css/common.css" rel="stylesheet" type="text/css" />
<link rel="shortcut icon" href="http://default.gettingmarried.co.uk/favicon.ico" type="image/x-icon" />
<script type="text/javascript" src="http://default.gettingmarried.co.uk/src/js/common.js"></script>
<script src="http://default.gettingmarried.co.uk/src/js/prototype-1603-minified.js" type="text/javascript"></script>
<script src="http://default.gettingmarried.co.uk/src/editjs/src/scriptaculous.js" type="text/javascript"></script>
<meta name="description" content="Nicola Bobins and Anthony Cross are getting married on Wednesday 13th January 2010." />
<meta name="keywords" content="wedding,Anthony,Nicola,Nicola Bobins and Anthony Cross,wedding site,www.gettingmarried.co.uk,Anthony and Nicola's wedding" />
<script src="http://default.gettingmarried.co.uk/src/sifr436/js/sifr.js" type="text/javascript"></script>
<link rel="stylesheet" href="http://default.gettingmarried.co.uk/src/sifr436/css/sifr.css" type="text/css">
<!-- font: This part is editable via your control panel -->
<SCRIPT LANGUAGE="JavaScript">
var myfont = { src: 'http://default.gettingmarried.co.uk/src/sifr436/fonts/PalaceScriptMT[regular]436.swf' };
sIFR.activate(myfont);
sIFR.replace(myfont, {
selector: 'h1',wmode: 'transparent',
css: [ '.sIFR-root {color: #000000 ;font-size: 60px;}' ]
});
</SCRIPT>
</head>
<body>
<!-- Overlay shaded div for hover window -->
<div id="overlayfilm" style="display:none"></div>
<div class="main-container">
<div class="top-thin-bar"><span class="main-table-top-banner"><strong>Wednesday 13th January 2010 - </strong> 52 days to go</span></div>
<!-- <div id="weatherbox">10 days before?<br />
<br />
Show weather here!</div> -->
<div class="left-panel">
<div class="menu-box-top1"></div>
<div class="menu-box-middle">
<ul>
<li>The Wedding
<ul id="Aitem_list">
<li id="Aitem_65" class="selected">
<a href="Home.htm" title="Home" class="menu">Home
</a>
</li>
<li id="Aitem_66" >
<a href="About_Us.htm" title="About Us" class="menu">About Us
</a>
</li>
<li id="Aitem_68" >
<a href="Reception.htm" title="Reception" class="menu">Reception
</a>
</li>
<li id="Aitem_67" >
<a href="Ceremony.htm" title="Ceremony" class="menu">Ceremony
</a>
</li>
<li id="Aitem_69" >
<a href="Timetable.htm" title="Timetable" class="menu">Timetable
</a>
</li>
</ul>
</li>
</ul>
</div>
<div class="menu-box-bottom1"></div></div>
<div class="right-panel" id="right-panel-frame">
<div class="intro-panel"> <h1>Our Wedding</h1><img height="333" border="0" align="right" width="250" class="photo-align-right" alt="image" src="http://www.gettingmarried.co.uk/siteimages/thumbnail_200903021623420000006dfda5a286177a3903c2c31b11c20bb4.jpg"/> <span id='homepage_intro'>This is a sample file that contains most elements that you may require to create a new CSS style.<br><br>Sadly we are unable to change the HTML template layout, but the CSS file is fully editable by you.<br><br>Once you have finished, please email the files as a ZIP archive to support#gettingmarried.co.uk. We will then import your CSS style into the GettingMarried.co.uk system.<br><br>Please note: by sending us your CSS file and images, you agree to transfer any copyright or ownership of the design to GettingMarried.co.uk. You also confirm that you have not used any copyrighted images without permission from the copyright holder. You will accept full liability for breach of copyright. You also confirm that your CSS file may be used on our other members' sites, and by sending us your files, you are confirming your agreement of these terms and conditions.</span><br/>
<br style="clear:both;">
</div>
<div class="front-page-boxes-wrapper">
<div class="front-page-boxes-left">
<p><em>The Wedding</em></p>
<p class="front-page-boxes-text">My Wedding box testing</p>
<p><img height="19" border="0" width="20" alt="Bullet" src="http://default.gettingmarried.co.uk/images/css-img/bullet-grey.gif"/> </p>
</div>
<div class="front-page-boxes-middle">
<p><em>Organisation</em></p>
<p class="front-page-boxes-text">My wedding box</p>
<p><img height="19" border="0" width="20" alt="Bullet" src="http://default.gettingmarried.co.uk/images/css-img/bullet-grey.gif"/> </p>
</div>
<div class="front-page-boxes-right">
<p><em>Memories</em></p>
<p class="front-page-boxes-text">My Wedding Box</p>
<p><img height="19" border="0" width="20" alt="Bullet" src="http://default.gettingmarried.co.uk/images/css-img/bullet-grey.gif"/> </p>
</div>
</div>
<!-- ABOUT US -->
<h1>About Us</h1>
<table cellspacing="0" cellpadding="0" border="0" width="100%">
<tbody><tr>
<td align="left" width="50%" valign="top" class="aboutus-cells"><p><strong>Penny</strong></p>
<p><img height="147" align="left" width="100" alt="Penny" class="photo-profiles" src="http://www.gettingmarried.co.uk/images/home-img/photo-filler-bride-100px.jpg"/><span id="about_bride" >Age: 26<br/><br/>Middle Name: Rose<br/><br/>Likes: Bunting! <br/><br/>Dislikes: Getting up in the morning </span></p></td>
<td align="left" width="50%" valign="top" class="aboutus-cells"><p><strong>Andrew</strong></p>
<p><img height="147" align="left" width="100" alt="Andrew" class="photo-profiles" src="http://www.gettingmarried.co.uk/images/home-img/photo-filler-groom-100px.jpg"/><span id="about_groom" >Age: 27<br/><br/>Middle Name: Donald<br/><br/>Likes:Everything to be tidy<br/><br/>Dislikes: Penny's Topshop Account </span></p></td>
</tr>
</table>
<p><strong>How we met...</strong></p>
<span id="about_howmet" >Way way back at guide and scout camp in 1995 </span><p></p>
<p><strong>The proposal...</strong></p>
<span id="about_proposal" >Sleep deprived and slightly drunk on mojitos in Cuba, December 2007 </span><p></p>
<!-- GIFT LIST -->
<h1>Gift List</h1>
<p><span id="giftlist_intro" >Introduction text for the giftlist page.</span></p>
<p><strong>The Online Gift List</strong></p>
<p>Please remember to click the "Mark as purchased" link to mark items as purchased to prevent duplications.</p>
<table cellspacing="0" cellpadding="0" border="0" width="100%">
<tbody><tr>
<td class="giftlist-header-row">Shop Name</td>
<td class="giftlist-header-row">Description</td>
<td class="giftlist-header-row">Cost</td>
<td class="giftlist-header-row">Quantity</td>
<td class="giftlist-header-row">Options</td>
</tr>
<tr>
<td class="giftlist-row-purchased">Argos.co.uk </td>
<td class="giftlist-row-purchased"><a target="_blank" href="giftgo.php?id=1966" onclick="JT_show('ajax-purchase-giftview.php?giftid=1966&gifturl=giftgo.php%3Fid%3D1966',this.id,this.name);" name="Did you buy this Gift?" id="giftID1966">3 tier steamer</a></td>
<td class="giftlist-row-purchased">£19.99</td>
<td class="giftlist-row-purchased">-</td>
<td class="giftlist-row-purchased">Purchased</td>
</tr>
<tr>
<td class="giftlist-row-purchased">Debenhams.com </td>
<td class="giftlist-row-purchased"><a target="_blank" href="giftgo.php?id=3031" onclick="JT_show('ajax-purchase-giftview.php?giftid=3031&gifturl=giftgo.php%3Fid%3D3031',this.id,this.name);" name="Did you buy this Gift?" id="giftID3031">Black 19cm rectangular stoneware dish</a></td>
<td class="giftlist-row-purchased">£15</td>
<td class="giftlist-row-purchased">-</td>
<td class="giftlist-row-purchased">Purchased</td>
</tr>
<tr>
<td class="giftlist-row-purchased">Legendcookshop.co.uk </td>
<td class="giftlist-row-purchased"><a target="_blank" href="giftgo.php?id=1963" onclick="JT_show('ajax-purchase-giftview.php?giftid=1963&gifturl=giftgo.php%3Fid%3D1963',this.id,this.name);" name="Did you buy this Gift?" id="giftID1963">blue spice jar</a></td>
<td class="giftlist-row-purchased">£2.44</td>
<td class="giftlist-row-purchased">-</td>
<td class="giftlist-row-purchased">Purchased</td>
</tr>
<tr>
<td class="giftlist-row-purchased">Legendcookshop.co.uk </td>
<td class="giftlist-row-purchased"><a target="_blank" href="giftgo.php?id=1960" onclick="JT_show('ajax-purchase-giftview.php?giftid=1960&gifturl=giftgo.php%3Fid%3D1960',this.id,this.name);" name="Did you buy this Gift?" id="giftID1960">blue spice jar set</a></td>
<td class="giftlist-row-purchased">£10.76</td>
<td class="giftlist-row-purchased">-</td>
<td class="giftlist-row-purchased">Purchased</td>
</tr>
<tr>
<td class="giftlist-row-purchased">Drinkstuff.com </td>
<td class="giftlist-row-purchased"><a target="_blank" href="giftgo.php?id=1859" onclick="JT_show('ajax-purchase-giftview.php?giftid=1859&gifturl=giftgo.php%3Fid%3D1859',this.id,this.name);" name="Did you buy this Gift?" id="giftID1859">Cocktail starter pack</a></td>
<td class="giftlist-row-purchased">£39.92</td>
<td class="giftlist-row-purchased">-</td>
<td class="giftlist-row-purchased">Purchased</td>
</tr>
<tr>
<td class="giftlist-row-purchased">Welch.co.uk </td>
<td class="giftlist-row-purchased"><a target="_blank" href="giftgo.php?id=2805" onclick="JT_show('ajax-purchase-giftview.php?giftid=2805&gifturl=giftgo.php%3Fid%3D2805',this.id,this.name);" name="Did you buy this Gift?" id="giftID2805">cookn=book stand - light blue</a></td>
<td class="giftlist-row-purchased">£27.25</td>
<td class="giftlist-row-purchased">-</td>
<td class="giftlist-row-purchased">Purchased</td>
</tr>
<tr>
<td class="giftlist-rowa">Debenhams.com </td>
<td class="giftlist-rowa"><a target="_blank" href="giftgo.php?id=3017" onclick="JT_show('ajax-purchase-giftview.php?giftid=3017&gifturl=giftgo.php%3Fid%3D3017',this.id,this.name);" name="Did you buy this Gift?" id="giftID3017">Cream piglets salt and pepper pots</a></td>
<td class="giftlist-rowa">£15.50</td>
<td class="giftlist-rowa">1</td>
<td class="giftlist-rowa"><a target="_blank" href="giftgo.php?id=3017" onclick="JT_show('ajax-purchase-giftview.php?giftid=3017&gifturl=giftgo.php%3Fid%3D3017',this.id,this.name);" name="Did you buy this Gift?" id="giftID3017">View</a> | <a onclick="JT_show('ajax-purchase-gift.php?giftid=3017&gifturl=giftgo.php%3Fid%3D3017',this.id,this.name);return false;" name="Please Confirm Your Details..." id="giftID3017" href="#">Mark as purchased</a></td>
</tr>
<tr>
<td class="giftlist-row-purchased">Legendcookshop.co.uk </td>
<td class="giftlist-row-purchased"><a target="_blank" href="giftgo.php?id=1962" onclick="JT_show('ajax-purchase-giftview.php?giftid=1962&gifturl=giftgo.php%3Fid%3D1962',this.id,this.name);" name="Did you buy this Gift?" id="giftID1962">cream spice jar</a></td>
<td class="giftlist-row-purchased">£2.44</td>
<td class="giftlist-row-purchased">-</td>
<td class="giftlist-row-purchased">Purchased</td>
</tr>
<tr>
<td class="giftlist-row-purchased">Legendcookshop.co.uk </td>
<td class="giftlist-row-purchased"><a target="_blank" href="giftgo.php?id=1961" onclick="JT_show('ajax-purchase-giftview.php?giftid=1961&gifturl=giftgo.php%3Fid%3D1961',this.id,this.name);" name="Did you buy this Gift?" id="giftID1961">cream spice jar set</a></td>
<td class="giftlist-row-purchased">£10.76</td>
<td class="giftlist-row-purchased">-</td>
<td class="giftlist-row-purchased">Purchased</td>
</tr>
<tr>
<td class="giftlist-row-purchased">Lauraashley.com </td>
<td class="giftlist-row-purchased"><a target="_blank" href="giftgo.php?id=1696" onclick="JT_show('ajax-purchase-giftview.php?giftid=1696&gifturl=giftgo.php%3Fid%3D1696',this.id,this.name);" name="Did you buy this Gift?" id="giftID1696">duck egg bed linen - oxford pillowcases</a></td>
<td class="giftlist-row-purchased">£14.69</td>
<td class="giftlist-row-purchased">-</td>
<td class="giftlist-row-purchased">Purchased</td>
</tr>
<tr>
<td class="giftlist-row-purchased">Debenhams.com </td>
<td class="giftlist-row-purchased"><a target="_blank" href="giftgo.php?id=3032" onclick="JT_show('ajax-purchase-giftview.php?giftid=3032&gifturl=giftgo.php%3Fid%3D3032',this.id,this.name);" name="Did you buy this Gift?" id="giftID3032">Granite petite round casserole dish</a></td>
<td class="giftlist-row-purchased">£10</td>
<td class="giftlist-row-purchased">-</td>
<td class="giftlist-row-purchased">Purchased</td>
</tr>
</tbody></table>
</tbody></table>
<h1>Our Wedding</h1>
<p>Upload your high resolution wedding photos to Andrew and Penny's online photo album here. <br/><br/>Our site will automatically create web-friendly images, whilst the high resolution images will also be stored, allowing us to design a beautifully-printed photobook of our special day through our guests' eyes.</p>
<form action="uploadimages.php" method="POST" name="gbook">
<div class="front-page-boxes">
<strong>Upload your photos</strong> (Step 1 of 2)
<br/><table border="0" cellspacing="0" cellpadding="5">
<tr>
<td>Your name: </td>
<td><input name="name" type="text" id="name" size="30"/></td>
</tr>
<tr>
<td nowrap="nowrap">Email address: *</td>
<td><input name="email" type="text" id="email" size="30"/></td>
</tr>
<SCRIPT LANGUAGE="JavaScript">
<!--
function callme(){
var row = document.getElementById("showme");
if(document.gbook.usealbum.value=='0'){
row.style.display='';
}else{
document.gbook.newname.value='';
row.style.display='none';
}
}
//-->
</SCRIPT>
<tr>
<td nowrap="nowrap">Select destination album:</td>
<td>
<select name="usealbum" OnChange="callme();"><option>Please Select</option><option value='0' selected>Create a new photo album</option>
<option value="from your American " >Test album 1</option>
<option value="Scotty's photos of the big day" >Test album 2</option>
</select>
</td>
</tr>
<tr ID='showme' >
<td nowrap="nowrap">Title for your new album:</td>
<td><input name="newname" type="text" id="email" size="30"/></td>
</tr>
<tr>
<td valign="top" nowrap="nowrap"> </td>
<td align="left"><input type="submit" name="Submit" id="Submit" value="Go >" /></td>
</tr>
<tr>
<td colspan="3">
<font size="1">* Note: email address is stored <b>only</b> for Name1 and Name2's private use</font>
</td>
</tr>
</table>
</div>
</form>
<br/>Please note: all photos must be personally approved by us before they go live on the site, so there may be a slight delay before you see it in the albums.
</div>
<p> </p>
<br class="clearbreak" />
</div>
</div>
</div>
</div>
</body>
</html>
CSS:
#charset "utf-8";
/* BASIC ELEMENTS */
/* NB: The h1 style is set up separately on the "customise design page" */
body {
background-image: url(../../tplcss/samplestyle/images/bg-small-2.gif);
background-repeat: repeat;
background-position: center;
padding-left: 0px;
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
font-family: 'Playfair Display', serif;
font-size: 12pt;
}
a {
color: #1d192f;
font-size: 14px;
text-decoration: none;
border-bottom: 1px solid #1d192f;
}
form {
margin: 0px;
padding: 0px;
}
.submit-button {
background-color: #FFFFCC;
margin-top: 10px;
border: 1px solid #DC5050;
height: 30px;
}
/* ----------- GENERAL ELEMENTS ---------------- */
.main-table {
background-color: #FFFFFF;
background-repeat: no-repeat;
border-top-width: 0px;
border-right-width: 1px;
border-bottom-width: 0px;
border-left-width: 1px;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-top-color: #FFFFFF;
border-right-color: #FFFFFF;
border-bottom-color: #FFFFFF;
border-left-color: #FFFFFF;
padding: 0px;
}
.main-content {
padding-top: 30px;
padding-left: 25px;
padding-right: 15px;
font-family: 'Playfair Display', serif;
font-size: 12pt;
}
.main-container {
background-color: #ffffff;
background-repeat: no-repeat;
background-position: 0px 0px;
width: 900px;
margin-top:-16px;
margin-right: auto;
margin-bottom: 15px;
margin-left: auto;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.26);
position: relative;
}
.main-container .top-thin-bar {
visibility: hidden;
background-repeat: no-repeat;
height: 22px;
width: 1100px;
top: 160px;
position: absolute;
background-position: 0px 0px;
text-align: center;
padding-top: 7px;
left: 0px;
margin-left: -122px;
font-size: 10pt;
}
.main-container .right-panel .intro-panel {
width: auto;
min-height: 333px;
font-size: 14px;
line-height: 20px;
color: #193429;
}
.main-footer {
width: 880px;
margin-right: auto;
margin-bottom: 0px;
background-repeat:no-repeat;
margin-left: auto;
height: 60px;
border-top-width: 0px;
border-right-width: 0px;
border-bottom-width: 0px;
border-left-width: 0px;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-top-color: #CCCCCC;
border-right-color: #FFB9B9;
border-bottom-color: #FFB9B9;
border-left-color: #FFB9B9;
padding-top: 0px;
padding-right: 10px;
padding-bottom: 0px;
padding-left: 10px;
clear: both;
}
.main-footer .left-links {
width:300px;
height:100%;
float:left;
}
.main-footer .right-logo {
visibility: hidden;
width:400px;
float:right;
text-align:right;
}
.left-panel {
width: auto;
margin-top: 15px;
padding-left: 20px;
margin-bottom: 20px;
}
.right-panel {
width: auto;
margin-top: 220px;
margin-right: 30px;
margin-bottom: 35px;
}
.leftmenu {
padding-left: 15px;
width: 200px;
padding-top: 30px;
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 12pt;
}
.clearbreak {
clear:both;
height:10px;
overflow:hidden;
}
.main-table-top-banner {
visibility: hidden;
text-align: center;
background-repeat: no-repeat;
text-transform: uppercase;
font-family: Helvetica;
font-size: 14px;
color: #999999;
}
.main-table-top-banner-sub {
text-align: center;
font-family: Georgia, "Times New Roman", Times, serif;
}
.main-bottom-strip {
padding: 10px;
border-top: 1pt solid #CCCCCC;
background: #EEEEEE;
color: #666666;
font-family: Arial, Helvetica, sans-serif;
font-size: 10pt;
font-weight: normal;
}
.main-bottom-strip a {
color: #666666;
}
.main-bottom-strip a:visited {
color: #666666;
}
.main-bottom-strip a:hover {
color: #AAAAAA;
}
.table-light-padding {
padding: 3px;
padding-bottom: 7px;
}
.redtext {color: #DC5050}
.smaller-text-indent {
font-size: 10pt;
padding-left: 20px;
}
.text-indent {
padding-left: 20px;
}
.editingtextarea {
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 12pt;
background-color: #FFFFFF;
border: 1px dotted #E98E95;
}
/* Menu bar */
.menu-box-top1 {
height: 0px;
width: 180px;
background-repeat: no-repeat;
margin: 0px;
background-position: bottom;
}
.menu-box-middle {
background-color: #FFFFFF;
margin: 0px;
padding-top: 1px;
padding-right: 10px;
padding-bottom: 1px;
padding-left: 10px;
}
.menu-box-middle p {
font-style: italic;
padding-bottom: 0px;
}
.menu-box-middle ul {
margin-top: 5px;
margin-bottom: 20px;
text-transform: uppercase;
font-family: Helvetica;
font-size: 14px;
color: #996666;
letter-spacing: 2px;
}
.menu-box-middle li {
list-style: none;
margin-left: -30px;
margin-bottom: 4px;
font-style: none;
font-weight: bold;
}
.menu-box-middle li li {
/*bookmark this is where i got to display inline :( */
display: inline;
text-transform: none;
margin-bottom: 4px;
font-weight: normal;
margin-left: -40px;
font-family: Georgia;
letter-spacing: 0px;
}
.menu-box-middle li ul {
padding-top: 0px;
background-repeat: no-repeat;
}
.menu-box-middle a {
color: #E96461;
text-decoration: none;
border-bottom: 1px solid #b0c5bc;
line-height: 25px;
}
.menu-box-middle a:visited {
color: #E96461;
}
.menu-box-middle a:hover {
color: #EF8F8D;
}
.menu-box-bottom1 {
background-image: url(http://default.gettingmarried.co.uk/images/css-img/bottom-rounded.gif);
background-repeat: no-repeat;
width: 180px;
height: 10px;
margin: 0px;
}
/* ----------- FRONT PAGE ELEMENTS ------------- */
/* Front three boxes */
.front-page-boxes-wrapper {
float: right;
width: 640px;
margin-right: 0px;
margin-bottom: 40px;
margin-top: 20px;
height: 170px;
}
.front-page-boxes-wrapper em {
text-transform: uppercase;
font-family: Helvetica;
font-size: 14px;
color:#666666;
letter-spacing: 2px;
font-style: normal;
font-weight: bold;
}
.front-page-boxes-wrapper p {
margin-top:0;
}
.front-page-boxes {
border: 1px dotted #FFA8A8;
padding: 10px;
}
.front-page-boxes a {
color: #3399CC;
}
.front-page-boxes a:visited {
color: #3399CC;
}
.front-page-boxes a:hover {
color: #3399CC;
}
.front-page-boxes-text {
font-size: 10pt;
line-height: 18px;
color: #253630;
}
.front-page-boxes-left {
border: 5px solid white;
padding: 10px;
width: 170px;
float: left;
height: 100%;
background-color: #D7EBFF;
color: #0066FF;
}
.front-page-boxes-middle {
border: 5px solid white;
padding: 10px;
width: 170px;
float: left;
margin-left: 20px;
height: 100%;
background-color: #FADBDA;
}
.front-page-boxes-right {
border: 5px solid white;
padding: 10px;
width: 170px;
float: left;
margin-left: 20px;
height: 100%;
background: #D7EBFF;
}
To make it work I have added following css styles and removed your old css styles:
Removed
.menu-box-middle ul {
margin-top: 5px;
margin-bottom: 20px;
text-transform: uppercase;
font-family: Helvetica;
font-size: 14px;
color: #996666;
letter-spacing: 2px;
}
.menu-box-middle li {
list-style: none;
margin-left: -30px;
margin-bottom: 4px;
font-style: none;
font-weight: bold;
}
.menu-box-middle li li {
/*bookmark this is where i got to display inline :( */
display: block;
text-transform: none;
margin-bottom: 4px;
font-weight: normal;
margin-left: -40px;
font-family: Georgia;
letter-spacing: 0px;
}
.menu-box-middle li ul {
padding-top: 0px;
background-repeat: no-repeat;
}
Added Lines:
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 16px;
text-decoration: none;
}
Fiddler: https://jsfiddle.net/mayankN/nrL32cen/1/
Make the changes relevant to your style from old file.
Just add a margin on :
.menu-box-middle li li {
/*bookmark this is where i got to display inline :( */
display: inline;
text-transform: none;
margin-bottom: 4px;
font-weight: normal;
margin-left: -40px;
font-family: Georgia;
letter-spacing: 0px;
margin:12px;
}
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 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
all
I have been created navigation menu bar,
Here is my JSFIDDLE
I need to add right side bar for each list like THIS
I just added vertical line for each list,
<a href="" style="text-decoration:none;"><span style="color: #ffffff;
padding-right:20px; font-size: 17px; font-weight: inherit; line-height:
inherit; text-decoration: inherit;" class=""> Share</span></a> |
<a href="" style="text-decoration:none;"><span style="color: #ffffff;
padding-right:20px; font-size: 17px; font-weight: inherit; line-height:
inherit; text-decoration: inherit;" class=""> Join</span></a> |
<a href="" style="text-decoration:none;"><span style="color: #ffffff;
padding-right:20px; font-size: 17px; font-weight: inherit; line-height:
inherit; text-decoration: inherit;" class=""> See Safety Tips</span></a> |
<a href="" style="text-decoration:none;"><span style="color: #ffffff;
padding-right:20px; font-size: 17px; font-weight: inherit; line-height:
inherit; text-decoration: inherit;" class=""> Settings</span></a>
May i know, any other way to increase the height and set color for that right sidebar.
Any help would be highly appreciated.,
Thanks,
Note: I need to do this, without any changes in my html.
Using pseudo elements is a good idea.
/* my version */
.nav {
background: #007EA8;
padding: 20px;
font: normal 16px/20px arial;
margin: 0 0 15px;
list-style: none;
}
.nav-item {
display: inline-block;
margin-right: 40px;
}
.nav-item:not(:first-child)::before {
content: '';
position: absolute;
width: 1px;
height: 30px;
background: #fff;
margin: -5px 0 0 -21px;
}
.nav-link {
color: #fff;
text-decoration: none;
}
/* your version */
.menu-item {
text-decoration: none;
}
.menu-item:not(:first-child)::before {
content: '';
position: absolute;
width: 1px;
height: 30px;
background: #fff;
margin: -5px 0 0 -11px;
}
.menu-item span {
color: #fff;
padding-right: 20px;
font-size: 17px;
}
<!-- my version -->
<ul class="nav">
<li class="nav-item">Share</li>
<li class="nav-item">Join</li>
<li class="nav-item">See Safety Tips</li>
<li class="nav-item">Settings</li>
</ul>
<!-- your version -->
<table width="100%" border="0" cellpadding="0" cellspacing="0" style="font-size: 13px;">
<tr id="layout-row88" class="layout layout-row widget _widget_text style88" style="margin: 0; padding: 0; background-color: #007EA8;">
<td id="layout-row-padding88" valign="top" style="padding: 42px 0px;">
<table width="100%" border="0" cellpadding="0" cellspacing="0" style="font-size: 13px;">
<tr>
<td id="text_div72" class="td_text td_block" valign="top" align="left" width="285" style="color: inherit; font-size: inherit; font-weight: inherit; line-height: 1; text-decoration: inherit; font-family: Arial;">
<span>Share</span>
<span>Join</span>
<span>See Safety Tips</span>
<span>Settings</span>
<div style="margin: 0; outline: none; padding: 0; text-align: right;">
<br>
</div>
</td>
</tr>
</table>
</td>
</tr>
</table>
I modified your code too
you can wrap your sidebar in a seperate inline element like
<span class="sideBar">|</span>
and style that class accordingly.
You can use pseudo elements to do it
a span:after{
content:"|";
font-size:30px;
color:white;
margin-left:10px;
}
a:nth-child(4) span:after{
content:"";
}
<table width="100%" border="0" cellpadding="0" cellspacing="0" style="font-size: 13px;">
<tr id="layout-row88" class="layout layout-row widget _widget_text style88" style="margin: 0; padding: 0; background-color: #007EA8;">
<td id="layout-row-padding88" valign="top" style="padding: 42px 0px;">
<table width="100%" border="0" cellpadding="0" cellspacing="0" style="font-size: 13px;">
<tr>
<td id="text_div72" class="td_text td_block" valign="top" align="left" width="285" style="color: inherit; font-size: inherit; font-weight: inherit; line-height: 1; text-decoration: inherit; font-family: Arial;">
<span style="color: #ffffff; padding-right:20px; font-size: 17px; font-weight: inherit; line-height: inherit; text-decoration: inherit;" class=""> Share</span>
<span style="color: #ffffff; padding-right:20px; font-size: 17px; font-weight: inherit; line-height: inherit; text-decoration: inherit;" class=""> Join</span>
<span style="color: #ffffff; padding-right:20px; font-size: 17px; font-weight: inherit; line-height: inherit; text-decoration: inherit;" class=""> See Safety Tips</span>
<span style="color: #ffffff; padding-right:20px; font-size: 17px; font-weight: inherit; line-height: inherit; text-decoration: inherit;" class=""> Settings</span>
<div style="margin: 0; outline: none; padding: 0; text-align: right;">
<a href="%WEBCOPY%" class="" target="_blank" style="margin: 0; outline: none; padding: 0; color: #333333;">
</a><br></div>
</td>
</tr>
</table>
</td>
</tr>
</table>
Here is the code how to show menu i have change your html to UL li based.
DEMO Link http://jsfiddle.net/patelmit69/5nu67uwv/1/
HTML
<ul>
<li> <a href=''>Share</a></li>
<li> <a href=''>Join</a></li>
<li> <a href=''>See Safety Tips</a></li>
<li> <a href=''>Settings</a></li>
CSS
ul {
list-style:none;
padding:10px;
background:blue;
}
ul li {
display:inline-block;
}
ul li a {
color:#fff;
text-decoration:none;
display:block;
padding:3px 10px;
border-left:1px solid #fff;
}
ul li:first-child a {
border-left:0px;
}
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>