im really new to code and have basic knowledge but can someone help. I've created code for an email but the layout changes when i add it to a signature. The social media icons, along with the font style change location and width. My code is this:
<table style="border-color: #FFFFFF;">
<tbody>
<meta name="viewport" content="width=device-width, initial-scale=1">
<td style="padding: 0 10px 0 0px;" valign="top">
<div class="row">
<div class="column"><a href="http://groupcis.com/" target="_blank"><img width="100" height="140" src="https://f.hubspotusercontent00.net/hubfs/2255457/CIS.png" style="float: centre;" width="70" height="60" /><div style="padding: 3px 0px 0px 0px;">
<div class="row" style= width"100%">
<div class="column" style="float: left; padding: 1px; display: table;"><img src="https://f.hubspotusercontent00.net/hubfs/2255457/Icons/Social%20Media%20Icons/2020%20Email%20signature/Facebook%2020x20.png" alt="" width="20" height="20" /></div>
<div class="column" style="float: left; padding: 1px; display: inline-block;"><img src="https://f.hubspotusercontent00.net/hubfs/2255457/Icons/Social%20Media%20Icons/2020%20Email%20signature/Twitter%2020x20.png" alt="" width="20" height="20" /></div>
<div class="column" style="float: left; padding: 1px; display: table;"><img src="https://f.hubspotusercontent00.net/hubfs/2255457/Icons/Social%20Media%20Icons/2020%20Email%20signature/LinkedIn%2020x20.png" alt="" width="20" height="20" />
</div>
<div class="column" style="float: left; padding: 1px; display: table;"><img src="https://f.hubspotusercontent00.net/hubfs/2255457/Icons/Social%20Media%20Icons/2020%20Email%20signature/Whatsapp%2020x20.png" alt="" width="20" height="20" />
</div></div>
<td style="border-left: 3px solid #2E6FAB; padding: 0 4px 0 4px;" valign="center">
</td>
<div class="column"> <td style="padding: 0 18px 0 8px;" valign="top">
<div class="column"> <div class="column"><span style="color: #2E6FAB; font-size: 19px; font-family: 'segoe ui';">Your full name</span> </div>
<span style="color: #898989; font-size: 14px; font-family: 'segoe ui'; font-weight: bold;">Your Position</span><br>
<div><span style="font-size: 11px; color: #2E6FAB; font-family: 'segoe ui';">Mob:</span> <span style="color: #898989; font-size: 11px; font-family: 'segoe ui';"> Your mobile number - if you do not have one, remove section</span> <br><span style="font-size: 11px; color: #2E6FAB; font-family: 'segoe ui';">Tel:</span><span style="color: #898989; font-size: 11px; font-family: 'segoe ui';"> Your office number - if you do not have one, remove section</span> <br> <span style="font-size: 11px; color: #2E6FAB; font-family: 'segoe ui';">Skype:</span><span style="color: #898989; font-size: 11px; font-family: 'segoe ui';"> Your Skype Name</span><br /> <span style="font-size: 11px; color: #2E6FAB; font-family: 'segoe ui';">Email:</span> <span style="color: #898989; font-size: 11px; font-family: 'segoe ui';">Your Email</span></div>
</div>
</div>
</td>
</tr>
</div>
</div>
</tbody>
</table>
Would really appreciate the help.
Related
I've been having an issue where the signature we've built works on nearly everything except IOS devices like Iphone and Ipad. on those devices the second cell is much thinner than it's supposed to be, and I can't tell if it's because the first cell is too big or if something else is causing this.
I figured standard table HTML would be fairly universal, and I don't have any fancy code going in here, so I expect it's some sort of odd interaction in how it's being translated by the mail app.
I've tried making the cells one pixel shorter, in case it's somehow not liking how it fits in the full 600 pixel width table. No dice.
Any idea what might be causing this? Thanks a ton for any help.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<table style="width: 600px; border-collapse: collapse; font-family: Arial;">
<tr style="width: 600px;">
<td colspan="2" style="width: 314px; border-bottom: 2px solid #1a206c; padding-top: 0px; padding-bottom: 8px; vertical-align: top; " >
<span style="font-size: 18pt; font-weight: bold; color: #1a206c;">
John Doe
<a href="https://en.wikipedia.org/wiki/ITIL" style="text-decoration: none;">
<img src="http://www.gosafe.com/signatures/personalcerts/itil.png" border="0" alt="Certification"/>
</a>
</span>
<br>
<span style="font-size: 11pt; font-weight: bold; color: #ff6400; line-height: 20px;">
Senior Operating Officer
</span>
</td>
<td colspan="2" style="width: 284px; border-bottom: 2px solid #1a206c; padding-top: 0px; padding-bottom: 8px; vertical-align: top;">
<span style="font-size: 9pt; color: #1a206c; font-family: Arial;">
<img src="https://www.gosafe.com/signatures/5-2021-images/tollfree.png" alt="Phone Number" vertical-align="center"/>
<strong style="line-height: 20px;"> 555.555.5555</strong>
<img src="https://www.gosafe.com/signatures/5-2021-images/mobile.png" border="0" alt="Mobile"/>
<strong style="line-height: 20px;"> 555.555.5555</strong>
</span>
<br style="font-size: 9pt;" />
<span style="font-size: 9pt; color: #1a206c; font-family: Arial; line-height: 20px; vertical-align: middle;">
<img src="https://www.gosafe.com/signatures/5-2021-images/email.png" border="0" alt="Email"/>
<strong style="line-height: 20px;"> John_Doe#exampleguy.com</strong>
</span>
<span style="font-size: 9pt; color: #1a206c; font-family: Arial;"></span>
<br style="font-size: 8pt;" />
<span style="font-size: 9pt; color: #1a206c; font-family: Arial; margin-bottom: 0px;">
<img src="https://www.gosafe.com/signatures/5-2021-images/location.png" border="0" alt="Location"/>
<strong style="line-height: 20px;"> 3343 Main Street, Albany, New York, 33939</strong>
</span>
</td>
</tr>
<tr style="width: 600px;">
<td style="width: 200px; padding-top: 15px; padding-bottom: 10px;">
<a href="http://www.goSafe.com">
<img src="https://www.gosafe.com/signatures/5-2021-images/goSafeLogo.png" border="0" alt="goSafe"/>
</a>
</td>
<td colspan="2" style="width: 200px; padding-top: 5px; text-align: center;">
<a title="Member of the AD Safety Network" style="text-decoration: none;" href="https://www.adhq.com">
<img src="https://www.gosafe.com/signatures/5-2021-images/ADsnPerfect.png" border="0" alt="AD Safety Network"/>
</a>
</td>
<td style="width: 200px; padding-top: 15px; padding-bottom: 10px;">
<p style="font-size: 10pt; font-family: Arial; text-decoration: none;" align="right">
<a title="goSafe on LinkedIn" style="text-decoration: none;" href="https://www.linkedin.com/company/948460">
<img src="https://www.gosafe.com/signatures/5-2021-images/li.png" border="0" alt="Linked In"/>
</a>
<a title="goSafe on FaceBook" style="text-decoration: none;" href="https://www.facebook.com/gosafesupply">
<img src="https://www.gosafe.com/signatures/5-2021-images/FB.png" border="0" alt="Facebook"/>
</a>
<a title="goSafe on Instagram" style="text-decoration: none;" href="https://www.instagram.com/gosafesupply">
<img src="https://www.gosafe.com/signatures/5-2021-images/ig.png" border="0" alt="Instagram"/>
</a>
<a title="goSafe on Twitter" style="text-decoration: none;" href="https://twitter.com/gosafesupply">
<img src="https://www.gosafe.com/signatures/5-2021-images/tw.png" border="0" alt="Twitter"/>
</a>
<br>
<a href="http://www.goSafe.com" style="text-decoration: none;">
<span style="color: #ff6400;">
<strong title="">www.goSafe.com</strong>
</span>
</a>
</p>
</td>
</tr>
<tr style="width: 600px;">
<td colspan="4">
<p style="width: 600px; padding-top: 0px; padding-bottom: 10px; font-size: 7pt; color: #1a206c; font-family: Arial;">This email and any attachments may contain confidential or proprietary information, the review and usage of which is restricted to the sender and the intended recipient(s). If you are not the intended recipient, please contact the sender and delete all copies of this message and any attachments.</p>
</td>
</tr>
</table>
<br /><br />
It's 600px wide, and mobiles only have about 300px! So there is going to be downscaling or chopping or squeezing to compensate.
I'd suggest re-creating according to 'fluid design' principles.
I need to split a row into two so that I can accommodate two headings in a row, something like below:
With the current code that I have written, I am unable to separate the row into two like the above and also unable to maintain the responsiveness like below:
Below is the output that I am getting with the current code:
Below here is the code:
<div class="container-fluid mail-body" style="width: 740px;">
<div id="account" class="row your-account">
<div class="col text-right" style="line-height: 20px; height: 20px; color:#004990; text-decoration:none; font-family:Helvetica, Arial, sans-serif; font-size:10px;">
Your Account
</div>
</div>
<!-- /.your-account -->
<div id="logo" class="row">
<div class="col text-center" style="background-color:#0471AF; height:100px; display: flex; justify-content: center;">
LOGO
</div>
</div>
<!-- /.logo -->
<div id="order-text" class="row">
<div class="col text-center" style="min-height: 98px; vertical-align:middle; font-family:Helvetica, Arial, sans-serif; font-size:36px; color: #0471AF; font-weight:100; display: flex; justify-content: center;">
<span style="align-self: center;">Heading Text</span>
</div>
</div>
<!-- /.order-text -->
<div class="row">
<div id="left-side-text" class="col-md-8 col-sm-12" style=" line-height: 18px;">
<span style="vertical-align:top; font-family:Helvetica, Arial, sans-serif; font-size:14px; color: #333333; text-decoration: none; text-align: left; line-height: 18px; font-weight:100;">
Dear XYZ,
</span>
<br>
<br>
<span style="font-family:Helvetica, Arial, sans-serif; font-size:17px; text-decoration: none; text-align:left; padding-bottom:20px;">Good news! Your order is confirmed.</span>
<br>
<br>
<span style="vertical-align:top; font-family:Helvetica, Arial, sans-serif; font-size:14px; color: #333333; text-decoration: none; text-align: left; font-weight:100;">
Some other text
</span>
</div>
<!-- /.left-side text -->
<div id="order-information" class="col-md-4 col-sm-12 order-2">
<div class="col" style="height: 43px; vertical-align:middle; font-family:Helvetica, Arial, sans-serif; font-size:16px; color: #333333; text-decoration: none; font-weight:700; background: #f2f2f2; padding: 10px; border: 1px solid #999999; border-bottom: none;">
Order Details
</div>
<div class="col" style="font-family:Helvetica, Arial, sans-serif; font-size:12px; color: #333333; padding: 10px; height: 73px; border: 1px solid #999999; border-top: none;">
<table>
<tr>
<td class="col-2 font-weight-bold" style="padding-bottom: 10px; padding-left: 0">Order Date:</td>
<td class="col-2" style="padding-bottom: 10px; padding-left: 0">03/06/2016</td>
</tr>
<tr>
<td class="col-2 font-weight-bold" style="padding: 0px;">Order #:</td>
<td class="col-2" style="padding-bottom: 10px; padding-left: 0">123456789</td>
</tr>
</table>
</div>
</div>
<!-- /.order-information -->
<div class="col-md-11 col-sm-12" style="line-height: 18px; vertical-align:top; font-family:Helvetica, Arial, sans-serif; font-size:14px; color: #333333; text-decoration: none; text-align: left; font-weight:100;">
<br>
<br>Text1
<br>
<br> Text
<br> Text
</div>
</div>
<div id="confirmation-email" class="row order-1">
<div class="col-md-11 col-sm-12" style="line-height: 18px; vertical-align:top; font-family:Helvetica, Arial, sans-serif; font-size:14px; color: #333333; text-decoration: none; text-align: left; font-weight:100;">
<br>
<br>Text1
<br>
<br> Text
<br> Text
</div>
</div>
<div class="row">
<div class="col-md-12" >
<div class="col" style="height: 36px; vertical-align:middle; font-size: 12px; font-family:Helvetica, Arial, sans-serif; color: #333333; text-decoration: none; font-weight:700; background: #f2f2f2; padding: 10px; border: 1px solid #999999; border-bottom: none;">
<span class="">Product(s) Ready for Pickup</span>
<span class="text-right">Quantity</span>
</div>
</div>
</div>
Please help me with the proper setup of the html as well the bootstrap classes so as to achieve the expected result.
Thanks!
Here is super easy/clean code:
<div class="row">
<div class="col" >
Product(s) Ready for Pickup
</div>
<div class="col text-right" >
Quantity
</div>
</div>
See the preview link: https://codepen.io/ziruhel/pen/LOZjWZ
You need to make two columns within your row using the col-sm-6 (or relevant classes as per the device needs). Assuming you need the row to have 2 columns for small, Medium, Large devices and 1 column for extra small devices, Below is my suggestion (Note: I have removed the style rules for better readability).
<div class="row col-md-12">
<div class="col-xs-12 col-sm-6" >
<span class="float-left">Product(s) Ready for Pickup</span>
</div>
<div class="col-xs-12 col-sm-6" >
<span class="float-right">Quantity</span>
</div>
</div>
Use col-xl-{value} to get columns.
Bootstrap Grid http://getbootstrap.com/docs/4.0/layout/grid/
<div class="row"> //row
<div class="col-xs-6" > //column 1 for extra large screen, use sm for small, md for medium screen
<span>Product(s) Ready for Pickup</span>
</div>
<div class="col-xs-6" > //column 2
<span>Quantity</span>
</div>
</div>
You can use col-md-* class for child element inside the parent row class to split the columns for your need.
<div class="row">
<div class="col-md-9" >
Product(s) Ready for Pickup
</div>
<div class="col-md-3 text-center" >
Quantity
</div>
</div>
I am a creating an email signature using HTML. I am using the HTML table to build it.
Here is my HTML code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
p {
padding : 0 0 0 0;
margin: 0 0 2px 0;
}
table {
table-layout: fixed;
}
</style>
</head>
<body>
<table border="0" cellpadding="0" cellspacing="0" width="329" height="314">
<tr>
<td style="line-height: 0;">
<img src="CC-email-sig_01.png" alt="" style="padding: 0; margin : 0; border : 0; display : block; width: 100%; ">
</td>
<td style="font-family: Helvetica; font-size: 12px; text-align: right; padding-right: 20px; font-weight: bold;">
<p style="color: #3F4B54;">Sean Clough</p>
<p style="color: #3F4B54;">Writer/Owner </p>
<p style="color: #25408F;">Clough Copywriting</p>
<br/>
<p><span style="color: #25408F;">m</span> <span style="color: #3F4B54;">0419 031 052</span> </p>
<p><span style="color: #25408F;">a</span> <span style="color: #3F4B54; font-weight: bold;">PO Box 439</span> </p>
<p style="color: #3F4B54;">Bedford WA 6052</p>
<p>cloughcopywriting.com.au</p>
</td>
</tr>
<tr bgcolor="#25408F">
<td style="padding-left: 22px;">
<p style="font-family: Helvetica; font-size: 12px; font-weight: bold; color : #fff; margin: 10px 0 10px 5px;">Follow me on</p>
<img src="CC-email-sig_06.png" alt="">
<img src="CC-email-sig_08.png" alt="">
<img src="CC-email-sig_10.png" alt="">
</td>
<td width="184">
<img src="CC-email-sig_04.png" alt="" style="padding: 0; margin : 0; border : 0; display : block; width: 100%; ">
</td>
</tr>
<tr style="vertical-align: baseline;">
<td colspan="2" style="line-height: 100%;">
<img src="CC-email-sig_12.png" alt="" width="329" style="padding: 0; margin : 0; border : 0; display : block; width: 100%; ">
</td>
</tr>
</table>
</body>
</html>
Now In the browser, it looks like bellow image:
but in outlook, the image looks like bellow:
If you see then you can notice the red arrow. Here I am using an image for showing the curve but It's not full width in outlook but perfect on the browser.
Also, padding between Man image and text is not same.
How can I solve this issue?
Thanks.
So, basically,because of the outlook limitations, I recommend you to use an entire background image for your last row.
https://jsfiddle.net/pablodarde/css60wL2/
<tr background="https://s20.postimg.org/cz6xu0nz1/bg_Footer.png">
<td style="padding-left: 22px;">
<p style="font-family: Helvetica; font-size: 12px; font-weight: bold; color : #fff; margin: 10px 0 10px 5px;">Follow me on</p>
<img src="CC-email-sig_06.png" alt="">
<img src="CC-email-sig_08.png" alt="">
<img src="CC-email-sig_10.png" alt="">
</td>
<td width="184">
<img src="CC-email-sig_04.png" alt="" style="padding: 0; margin : 0; border : 0; display : block; width: 100%; ">
</td>
</tr>
I Have 3 Images as icons for different use.
Now what I want is,
If the first icon is clicked, the first icon should be highlighted, if second is clicked the second icon should be highlighted.
Please see the HTML for your ref:-
<tr>
<td width="18%" height="40" align="left" valign="middle"></td>
<td style="text-align: left; vertical-align: middle;" width="6%">
<input type="checkbox" id="branchChkbx" title="Branch" checked="checked" class="hideChkbx" />
<a href="locateBranches_rbl_view.aspx" style="color: #666; font-family: 'signika_negativeRegular', sans-serif;">
<img alt="Branch" src="images/branch_icon.png" height="40" width="40" title="Branch" style="border: 0;" />
<p class="para01">Branch</p>
</a>
</td>
<td style="text-align: left; vertical-align: middle;" width="5%">
<input type="checkbox" id="atmChkbx" title="ATM" checked="checked" class="hideChkbx" />
<a href="locateATM_rbl.aspx" style="color: #666; font-family: 'signika_negativeRegular', sans-serif;">
<img alt="ATM" src="images/atm_icon.png" height="40" width="40" title="ATM" style="border: 0;" /><p class="para01">ATM</p>
</a>
</td>
<td style="text-align: left; vertical-align: middle;" width="6%">
<input type="checkbox" id="lockerChkbx" title="Locker" checked="checked" class="hideChkbx" />
<a href="locateLockers_rbl.aspx" style="color: #666; font-family: 'signika_negativeRegular', sans-serif;">
<img alt="Locker" src="images/locker_icon.png" height="40" width="40" title="Locker" style="border: 0;" /><p class="para01">Locker</p>
</a>
</td>
<td width="6%" height="40" align="left" valign="middle" style="border-left: 1px solid #cccccc;">
<a id="A1" href="Default.aspx" runat="server" style="float: left; text-decoration: underline; color: #666; margin-left: 12px; font-family: 'signika_negativeRegular', sans-serif;">
<p class="para01">View All</p>
</a>
</td>
</tr>
Also see the CSS:-
.para01 {
font-size: 16px;
margin-top: 6px;
font-weight: bold;
margin-top: 10px;
}
Please help
Your best option should be to make the images into css sprite, and change background-sizes. If that's hard for you, you can just make images background of the A tag. Like so:
a {
background: url('image.png') no-repeat center center;
}
a.highlighted {
background-image: url('image-highlight.png');
}
Did it like this
CSS
para01 {
font-size: 16px;
margin-top: 6px;
font-weight: bold;
/*line-height: 1.5em;*/
margin-top: 10px;
}
.highlight {
background: yellow;
}
.imghighlight{
height:50px;
width:50px;
}
JQuery:-
$(document).ready(function () {
$('input.hideChkbx').on('change', function () {
$('input.hideChkbx').not(this).prop('checked', false);
$('input.hideChkbx').not(this).parent().find("img").removeClass("imghighlight");
$('input.hideChkbx').not(this).parent().find(".para01").removeClass("highlight");
if ($(this).is(':checked')) {
$(this).parent().find("img").addClass("imghighlight");
$(this).parent().find(".para01").addClass("highlight");
}
});
});
And it worked
Please take a look at this video, it explains my problem:
http://www.youtube.com/watch?v=Zeq_BZ5QgCg
It's a simple table. When I resize the page, the table resizes with the page to some point, but then stops.
I have no idea why the table behaves like that. I want it to contract just like the rest of the page.
The black lines you see are from div containers that are set to "clear:both".
The html code of the table:
<table class="tborder" cellpadding="6" cellspacing="0" border="1" align="center" id="videoevent">
<tbody>
<tr>
<td class="thead" align="center" valign="middle" style="vertical-align:center">
Headline
</td>
</tr><tr>
<td class="alt2" align="center" style="padding:10px;">
<div class="right" style="margin:5px 0px 10px 0px"><span id="user_online_count">refreshing...</span> persons are viewing this page</div>
<div class="left" style="margin:5px 0px 10px 0px">OVERVIEW</div>
<div class="c"></div>
<div class="overviewcontainer" style="margin-right:10px;">
<a href="./?room=1">
<img src="/thumbs/test.jpg" class="overview-img" height="200" alt="" border="0" />
<span class="img-headline">Jade</span>
<span class="offline_indicator" id="oi_model_1">offline</span>
</a>
</div><div class="overviewcontainer" style="margin-right:10px;">
<a href="./?room=2">
<img src="/thumbs/test.jpg" class="overview-img" height="200" alt="" border="0" />
<span class="img-headline">User</span>
<span class="offline_indicator" id="oi_model_2">offline</span>
</a>
</div><div class="overviewcontainer" style="margin-right:10px;">
<a href="./?room=3">
<img src="/thumbs/test.jpg" class="overview-img" height="200" alt="" border="0" />
<span class="img-headline">User</span>
<span class="offline_indicator" id="oi_model_3">offline</span>
</a>
</div><div class="overviewcontainer" style="margin-right:10px;">
<a href="./?room=4">
<img src="/thumbs/test.jpg" class="overview-img" height="200" alt="" border="0" />
<span class="img-headline">XXX</span>
<span class="offline_indicator" id="oi_model_4">offline</span>
</a>
</div><div class="overviewcontainer" style="margin-right:10px;">
<a href="./?room=5">
<img src="/thumbs/test.jpg" class="overview-img" height="200" alt="" border="0" />
<span class="img-headline">admin</span>
<span class="offline_indicator" id="oi_model_5">offline</span>
</a>
</div>
<div class="c"></div>
</td>
</tr>
<tr>
<td colspan="2">
Viewers: <span id="users_in_chat">waiting for refresh</span>
</td>
</tr>
</tbody>
</table>
I see nothing in the style of the table that could cause this behavior:
td[align=center] {
text-align: -webkit-center;
}
td[valign=middle] {
vertical-align: middle;
}
element.style {
}
.thead {
background: #CA1B03;
color: white;
font: normal normal bold 11px/normal tahoma, verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif;
}
td, th, p, li {
font: normal normal normal 10pt/normal verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif;
}
/*user agent stylesheet*/
td, th {
display: table-cell;
vertical-align: inherit;
}
Inherited from table#videoevent.tborder
.tborder {
color: black;
}
/*user agent stylesheet*/
table {
border-spacing: 2px 2px;
border-collapse: separate;
}
/*Inherited from div.dynwrap.page*/
Style Attribute {
text-align: left;
}
.page {
color: black;
}
/*Inherited from body*/
body {
color: black;
font: normal normal normal 10pt/normal verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif;
}
Maybe cause that there are some nowrap elements or elements with fixed width inside td elements? Video, images or style="white-space: nowrap;"?