In IE the navbar is correctly positioned, centered at the top. However in FF it is moved all the way to the right. I have looked through the code and still cant figure it out. Any ideas? Thanks in advance!
#wrapper
{
display: block;
border: 0px solid red;
width: 896px; /*background:white;*/
margin: 0em auto;
padding: 0em;
display: block;
text-align: left;
height: auto;
}
#wrapperInner
{
display: block;
border: 0px solid red;
width: 896px; /*background:white;*/
margin: 0em auto;
padding: 0em;
display: block;
height: auto;
}
/*Menu----------------------------------------------------*/
/*------Tabs---------*/
#tabNav
{
width: 895px;
border: 0px solid red;
}
#tabNav table
{
width: 895px;
border: 0px solid red;
}
#tabNav td
{
border: 0px solid blue;
padding: 0px;
vertical-align: middle;
}
#tabNav img
{
padding: 0px;
vertical-align: bottom;
}
<div id="tabNav">
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td id="MainNavigation1_tab0" align="center" valign="bottom" class="tabPos1-OffHome">
</td>
<td id="MainNavigation1_tab1" align="center" valign="top" class="tabOffHome" style="vertical-align: top;">
<a href="ourMenu.aspx" class="navLink">
<img id="MainNavigation1_imgOurMenu" onMouseOver="this.src='images/tabMenuOvr.gif';" onMouseOut="this.src='images/tabMenuOff.gif';" src="images/tabMenuOff.gif" style="border-width:0px;" /></a></td>
<td id="MainNavigation1_tab1Over" valign="bottom" class="tabOverlapOffHome">
</td>
<td id="MainNavigation1_tab2" align="center" class="tabOffHome" style="vertical-align: top;">
<a class="navLink" href="account.aspx">
<img id="MainNavigation1_imgExpress" onMouseOver="this.src='images/tabExpressOvr.gif';" onMouseOut="this.src='images/tabExpressOff.gif';" src="images/tabExpressOff.gif" style="border-width:0px;" /></a></td>
<td id="MainNavigation1_tab2Over" valign="bottom" class="tabOverlapOffHome2">
</td>
<td id="MainNavigation1_tab3" align="center" class="tabOff" style="vertical-align: top;">
<a class="navLink" href="customerCenter.aspx">
<img id="MainNavigation1_imgCustomer" onMouseOver="this.src='images/tabCustCareOvr.gif';" onMouseOut="this.src='images/tabCustCareOff.gif';" src="images/tabCustCareOff.gif" style="border-width:0px;" /></a></td>
<td id="MainNavigation1_tab3Over" valign="bottom" class="tabOverlapOff">
</td>
<td id="MainNavigation1_tab4" align="center" class="tabOff" style="vertical-align: top;">
<a class="navLink" href="ordering.aspx">
<img id="MainNavigation1_img101" onMouseOver="this.src='images/tabOrder101Ovr.gif';" onMouseOut="this.src='images/tabOrder101Off.gif';" src="images/tabOrder101Off.gif" style="border-width:0px;" /></a></td>
<td id="MainNavigation1_tab4Over" valign="bottom" class="tabOverlapOff">
</td>
<td id="MainNavigation1_tab5" align="center" class="tabOff" style="vertical-align: top;">
<a class="navLink" href="skinnyUs.aspx">
<img id="MainNavigation1_imgSkinny" onMouseOver="this.src='images/tabSkinnyOvr.gif';" onMouseOut="this.src='images/tabSkinnyOff.gif';" src="images/tabSkinnyOff.gif" style="border-width:0px;" /></a></td>
<td id="MainNavigation1_tab5Over" valign="bottom" class="tabOverlapOff">
</td>
<td id="MainNavigation1_tab6" align="center" class="tabOff" style="vertical-align: top;">
<a class="navLink" href="joinUs.aspx">
<img id="MainNavigation1_imgJoin" onMouseOver="this.src='images/tabJoinUsOvr.gif';" onMouseOut="this.src='images/tabJoinUsOff.gif';" src="images/tabJoinUsOff.gif" style="border-width:0px;" /></a></td>
<td id="MainNavigation1_tab6Over" valign="bottom" class="tabOverlapOff">
</td>
<td id="MainNavigation1_tab7" align="center" class="tabOff" style="padding-left: 7px; vertical-align: top;">
<a class="navLink" href="faqs.aspx">
<img id="MainNavigation1_imgFAQs" onMouseOver="this.src='images/tabFaqsOvr.gif';" onMouseOut="this.src='images/tabFaqsOff.gif';" src="images/tabFaqsOff.gif" style="border-width:0px;" /></a></td>
<td id="MainNavigation1_tab7Over" align="center" class="tabPos7-Off">
</td>
</tr>
<tr id="MainNavigation1_trLowerNav">
<td id="MainNavigation1_tdLowerNav" class="bgMenuHome-Off" colspan="15">
<!--inner tab nav-->
<div id="MainNavigation1_subNavHome" class="subNav">
<br />
</div>
Add float:left to #tabNav table. Looks perfect to me in Firefox 5.
do you have a doctype declared at the top of your document? If not, you need one...
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Also, why are you using tables?
I plugged your code in and found the answer. All you have to do is add the following to the #tabnav id
margin: 0 auto;
Related
It should support for html email, so I can't use justify-content and align-items.
I try to use position: absolute for <img />, but It's not working on html email ?
Hot do I make the Twitter icon on the left side and on the same line with 1 2 3 for html email ?
<div
class="footer-container"
style="
position: relative;
background: pink;
position: fixed;
bottom: 0;
width: 100%;"
>
<!-- position is not working on html email -->
<div
class="image-container"
style="position: absolute; top: 30px; left: 24px"
>
<img
src="https://www.citypng.com/public/uploads/preview/-516139511470ymv2hndq6.png"
alt="test"
width="94"
/>
</div>
<div
class="centered"
style="padding-top: 40px; padding-bottom: 40px; padding-right: 30px; text-align:right;"
>
<a>1</a>
<a>2</a>
<a>3</a>
</div>
</div>
In email-templates you have limited support and as such sue techniques that are outdated or would not be semantically correct for normal HTML files.
In this case, you should use a table for layout purposes. You can shrink the table cells to their minimum content by using: style="width: 0; white-space: nowrap;"
<table width="100%">
<tr>
<td>
<img src="https://www.citypng.com/public/uploads/preview/-516139511470ymv2hndq6.png" alt="test" width="94">
</td>
<td style="width: 0; white-space: nowrap;">
<a>1</a>
</td>
<td style="width: 0; white-space: nowrap;">
<a>2</a>
</td>
<td style="width: 0; white-space: nowrap;">
<a>3</a>
</td>
</tr>
</table>
People forget that HTML email Table can be treated as a "grid" layout by using colspan (and rowspan as well). Usually a grid of 6 columns fits best for most of the cases. Knowing you have such a grid, the top row can be constructed as such colspans, and by using text-align:
<style>
td {
border: 1px solid #ddd;
padding: 1rem;
}
</style>
<table cellspacing="0" cellpadding="0" border="0" style="width: 100%; table-layout: fixed; border-collapse: collapse; border: 0px;border-spacing: 0;">
<tbody>
<tr>
<td colspan="2">
<img src="https://i.stack.imgur.com/q9TPY.png" alt="logo" style="display: block; vertical-align: middle; border: 0;" width="57" height="48">
</td>
<td colspan="4" style="text-align: right;">
Link 1
Link 2
Link 3
</td>
</tr>
<tr>
<td colspan="6" style="text-align: center; background: gold;"><br><br>6<br><br><br></td>
</tr>
<tr>
<td colspan="3">3</td>
<td colspan="3">3</td>
</tr>
<tr>
<td colspan="2">2</td>
<td colspan="2">2</td>
<td colspan="2">2</td>
</tr>
<tr>
<td colspan="5" style="text-align: center; background: #567; color:#fff;">5</td>
<td colspan="1" style="text-align: center; background: #456; color:#fff;">1</td>
</tr>
</tbody>
</table>
I have an HTML email template that renders very well on all mail clients except the Outlook Desktop application. In the Outlook client, the image, as well as the table elements, are blown up in terms of size leading to a terribly formatted email being displayed. How should I address this issue so that it at least renders well on the Outlook desktop client? I am aware of using conditional logic to add dynamic pixel values depending on what client will be rendering the template but I need to know what styling changes I should make to make Outlook's rendering engine display the template properly. Below is the HTML template:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Click Source</title>
<meta charset="utf-8">
<meta http-equiv="Content-Type" content="text/html charset=UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
<link href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght#0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet">
<style>
*{margin: 0; padding: 0;}
body{font-family: 'Montserrat', sans-serif;margin: 0; padding: 0;}
#media(max-width:767px){
h3{font-size: .75em !important;}
p{font-size: 10px !important;}
}
</style>
</head>
<body>
<table border="0" cellpadding="0" cellspacing="0" height="100%" width="100%" style="max-width:600px; width: 100%; margin: 0 auto;">
<tr>
<td align="center" valign="top" id="bodyCell">
<table bgcolor="#FFFFFF" border="0" cellpadding="0" cellspacing="0">
<tr>
<td align="top" valign="top">
<img src="https://clicksource.uk/static/images/head.jpg" alt="" style="width: 650px;"/>
</td>
</tr>
<tr>
<td valign="top" align="top">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td style="width: 60%;">
<table border="0" cellpadding="0" cellspacing="0" width="100%" style="background: #f5f5ef; padding: 12px; padding-left: 5px; padding-top: 45px;">
<tr>
<td style="width: 30%;">
<img src="https://clicksource.uk/static/images/mobile.jpg" alt="" style="width: 150px"/>
</td>
<td style="width: 50%; text-align: center;">
<h3 style="color: #a25140; font-size: 1.6em; font-weight: 800; margin: 0 0 10px 0;">GET ON THE
TOP 3 OF
GOOGLE
</h3>
<p style="color: #000; font-size: 13px; line-height: 1.5; font-weight: 500;">Hello, {{first_name}} {{last_name}}. It's essential to be at the top
of Google search results. If
your business isn't there,
you're losing potential
customers to your
competitors already in the
top 3.
</p>
</td>
</tr>
</table>
</td>
<td style="width: 40%; background: #f5f5ef;">
<table border="0" cellpadding="0" cellspacing="0" width="100%" style="background: #f5f5ef;">
<tr>
<td>
<img src="https://clicksource.uk/static/images/location.jpg" alt="" style="width: 250px;"/>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td valign="top" align="center">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td style="width: 55%;">
<table border="0" cellpadding="0" cellspacing="0" width="100%" style="background: #fff; padding: 20px 0 10px 0; text-align: center;" >
<tr>
<td style="width: 100%; text-align: center; padding: 15px;">
<h3 style="color: #a25140; font-size: 1.6em; font-weight: 800; margin: 0 0 15px 0;">GET YOUR BUSINESS
SHOWN ON GOOGLE
</h3>
<p style="color: #000; font-size: 13px; line-height: 1.5; font-weight: 500; margin: 0; padding: 0 15px;">Google Business Profile is another
crucial element for getting your
business in front of new customers! The
Google business platform allows
business owners greater control over
their information on Google search
results, specifically for their physical
location and service areas.
</p>
</td>
</tr>
</table>
</td>
<td style="width: 45%; padding-right: 10px;align-items: center;" align="center">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td style="text-align: center;">
<img src="https://clicksource.uk/static/images/local-seo-email-video-ph.PNG" alt="Promo vid" width="250px" height="132px"><br>
CLICKSOURCE.CO.UK
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
<table border="0" cellpadding="0" cellspacing="0" style="background: #0C2840; background-size: cover; background-position: center center">
<tr>
<td align="center" valign="top">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td align="center" valign="top">
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td align="center" valign="top">
<table border="0" cellpadding="30" cellspacing="0" width="100%" style="align-items: center;">
<tr>
<td valign="top" style="padding: 15px; width: 20%;">
<img src="https://clicksource.uk/static/images/footer-icon-logo.png" alt="" style="width: 100px;"/>
</td>
<td valign="top" style="text-align: center; padding: 15px; width: 60%;">
<img src="https://clicksource.uk/static/images/footer-logo.jpg" alt="" style="width: 120px;"/>
<ul style="text-align: center; padding: 0; margin: 0;">
<li style="display: inline-block; list-style: none; font-size: 10px;"><img src="https://clicksource.uk/static/images/call.png" style="width: 15px; vertical-align: middle; padding-right: 4px;" alt=""/> 020 3832 2400 </li>
<li style="display: inline-block; list-style: none; font-size: 10px;"><img src="https://clicksource.uk/static/images/website.png" style="width: 15px; vertical-align: middle; padding-right: 4px;" alt=""/> www.clicksource.co.uk</li>
<li style="display: inline-block; list-style: none; font-size: 10px;"><img src="https://clicksource.uk/static/images/email.png" style="width: 15px; vertical-align: middle; padding-right: 4px;" alt=""/> Hello#clicksource.co.uk</li>
<li style="display: inline-block; list-style: none;color:#fff; font-size: 10px;"><img src="https://clicksource.uk/static/images/location-icon.png" style="width: 15px; vertical-align: middle; padding-right: 4px;" alt=""/> Cuffley Place, Sopers Road, EN6 4SG</li>
</ul>
</td>
<td valign="top" style="width: 20%;">
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
I am creating this email html template the html works responsively in google console and gmail mobile app, but gets distorted in mobile chrome gmail version.
This image is the mobile responsiveness when i open in console in crome desktop
this is email responsivness when i open in browser desktop
this is image responsiveness when i open in mobile browser
note this email template works fine in the gmail mobile app
<!DOCTYPE html>
<html lang="en">
<head>
<title>pixels</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link href="https://fonts.googleapis.com/css?family=Objektiv+Mk1&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.c500&display=swap" rel="stylesheet">
<style>
#font-face {
font-family: objektiv mk1;
src: url(fonts.ttf);
}
* {
font-family: objektiv mk1;
}
</style>
</head>
<body style="margin:0; padding:0;">
<div style="width:600px; margin:auto; overflow:hidden; border: 1px solid #E5E5E5; background-image: url(https://i.postimg.cc/Y00Zyjrj/xxx.png); background-repeat: no-repeat; background-position: 0px 91px; ">
<table width="600px" cellspacing="0" cellpadding="0" style="position: relative; border: none; ">
<tbody>
<td style="padding: 20px;">
<table width="100%">
<tr style="text-align: center; width: 100%;">
<td style="text-align: center;">
<div>
<img src="https://i.postimg.cc/fyVqfFC9/xxx-xxx-logo-green-410x.png"
style="max-width: 150px;">
</div>
</td>
</tr>
<tr>
<td style="text-align: center; padding: 25px 0px 0px 0px; border-top: 2px solid #f4f4f4;">
<div>
<img src="https://i.postimg.cc/X7p6s1qx/xxx-you.png" style="max-width: 350px;">
</div>
</td>
</tr>
</table>
</div>
<tr>
<td style="background: #fff; font-size: 28px; text-align: center; padding: 20px 84px 30px;">for
ordering with us and taking the first step towards better health and wellness 😊</td>
</tr>
<tr style="background-color: #E5E5E5;">
<td>
<table style="width: 100%; padding: 40px; overflow: hidden;">
<tbody>
<tr>
<td style=" background: #fff; overflow: hidden; border-radius: 5px;">
<div><img src="https://i.postimg.cc/3wHMJKBb/process.png" style="margin: auto;"></div>
</td>
</tr>
<tr>
<td style="padding: 10px 0px;">
<p style="text-align:center;font-size: 18px; font-weight: 600;">Your order will
be dispatched within 48 hours. </p>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td style="padding: 26px 26px 0px;">
<table width="100%" cellspacing="0" cellpadding="0" border="0"
style="background-color: #EEFDEB;">
<thead style="background-color: #EEFDEB; margin-bottom: 10px;">
<tr>
<td style="width: 20%; padding: 10px; font-weight: 400; font-size: 18px;">Product
</td>
<td style="width:24%; padding: 10px"> </td>
<td style="width: 20%; padding: 10px; font-weight: 400; font-size: 18px;">Qty</td>
<td style="width: 20%; padding: 10px; font-weight: 400; font-size: 18px;">Price</td>
<td style="width: 20%; padding: 10px; font-weight: 400; font-size: 18px;">Subtotal
</td>
</tr>
</thead>
<tbody style="background-color: #E5E5E5;">
<tr>
<td style="height: 10px; background-color: #fff;"></td>
</tr>
<tr>
<td style="width:20%;">
<div>
<img src="https://i.postimg.cc/B6YwDsT3/xxx-eff.png"
style="max-width:100%;">
</div>
</td>
<td style="width:24%; font-size: 16px;">ACV <span
style="display: block;">Effervescent</span< /td>
<td style="width:20%; font-size: 16px;">{#var#}</td>
<td style="width:20%; font-size: 16px;">{#var#}</td>
<td style="width:16%; font-size: 16px;">{#var#}</td>
</tr>
<tr>
<td style="height: 10px; background-color: #fff;"></td>
</tr>
<tr style="background-color: #EEFDEB;">
<td style="width:20%;"> </td>
<td style="width:24%; padding: 10px 0px; font-size: 16px;">Discount</td>
<td style="width:20%;"> </td>
<td style="width:20%;"> </td>
<td style="width:16%; font-size: 16px;">{#var#}</td>
</tr>
<tr style="background-color: #EEFDEB;">
<td style="width:20%;"> </td>
<td style="width:24%; padding: 10px 0px; font-size: 16px;">Discount</td>
<td style="width:20%;"> </td>
<td style="width:20%;"> </td>
<td style="width:16%; font-size: 16px;">{#var#}</td>
</tr>
<tr style="background-color: #EEFDEB;">
<td style="width:20%;"> </td>
<td style="width:24%; padding: 10px 0px; font-size: 16px;">Discount</td>
<td style="width:20%;"> </td>
<td style="width:20%;"> </td>
<td style="width:16%; font-size: 16px;">{#var#}</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td
style="padding: 26px; background-image: url(https://i.postimg.cc/RZfQd50z/1-Transactional-xxx-Order-xxx-svg-1.png); background-repeat: no-repeat; background-position: 100% 350px; width: 100%;">
<table width="100%;">
<tr>
<td style="">
<div
style="padding:0px 26px; background: radial-gradient(80.68% 88.46% at 50% 50%, #69DE7A 0%, #A9EF82 100%) #EEFDEB; border: 1.5px solid #000000; border-radius: 6px;">
<p style="text-align:center; font-size: 24px; font-weight: 700;">Your cashback
of {#var#} will be credited to your wallet upon delivery!</p>
</div>
</td>
</tr>
<tr>
<td
style="border-bottom: 1.5px solid #969696; position: relative; top: 10px; opacity: 0.25;">
</td>
</tr>
<tr>
<td>
<div>
<p style="font-weight: 600;">Shipping to:</p>
<p style="margin:0;">{name}</p>
<p style="margin:0;">{address line 1}</p>
<p style="margin:0;">{address line 2}</p>
<p style="margin:0;">{address line 3}</p>
<p style="margin:0;">Tel. {phone number}</p>
</div>
</td>
</tr>
<tr>
<td
style="border-bottom: 1.5px solid #969696; position: relative; top: 10px; opacity: 0.25;">
</td>
</tr>
<tr>
<td style="padding: 30px 75px 35px; font-size: 21px; text-align: center;">Check out our
<strong>other best-sellers</strong> based on your purchase!
</td>
</tr>
<tr>
<td style="padding: 0px 40px 50px;">
<table width="100%" cellspacing="0" cellpadding="0"
style="padding: 10px 25px; box-shadow: 0px 2px 20px 14px rgb(64 60 67 / 16%); border-radius: 4px; background-color: #EEFDEB;">
<tr>
<td style="width:38%">
<div>
<img src="https://i.postimg.cc/B6YwDsT3/xxx-eff.png.png"
style="max-width: 120px;">
</div>
</td>
<td style="width:62%">
<p
style="font-weight: 600; font-size: 15px; padding: 0 15px 0 0; margin-bottom: 0;">
Apple Cider Vinegar Effervescent</p>
<div><img src="https://i.postimg.cc/dQWKmcsL/star.png" /><img
src="https://i.postimg.cc/dQWKmcsL/star.png" /><img
src="https://i.postimg.cc/dQWKmcsL/star.png" /><img
src="https://i.postimg.cc/dQWKmcsL/star.png" /><img
src="https://i.postimg.cc/dQWKmcsL/star.png" /></div>
<div><img src="https://i.postimg.cc/HsRDR07m/btn.png" />
</div>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td style=" padding: 0px 40px 50px;">
<table width="100%" cellspacing="0" cellpadding="0"
style="padding: 10px 25px; box-shadow: 0px 2px 20px 14px rgb(64 60 67 / 16%); border-radius: 4px; background-color: #EEFDEB;">
<tr>
<td style="width:38%">
<div>
<img src="https://i.postimg.cc/BZzVnSZc/xxx.png"
style="max-width: 120px;">
</div>
</td>
<td style="width:62%">
<p
style="font-weight: 600; font-size: 15px; padding: 0 15px 0 0; margin-bottom: 0;">
Ashwa Calm</p>
<div><img src="https://i.postimg.cc/dQWKmcsL/star.png" /><img
src="https://i.postimg.cc/dQWKmcsL/star.png" /><img
src="https://i.postimg.cc/dQWKmcsL/star.png" /><img
src="https://i.postimg.cc/dQWKmcsL/star.png" /><img
src="https://i.postimg.cc/dQWKmcsL/star.png" /></div>
<div><img src="https://i.postimg.cc/HsRDR07m/btn.png" />
</div>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td style="padding: 0px 40px 50px;">
<table width="100%" cellspacing="0" cellpadding="0"
style="padding: 10px 25px; box-shadow: 0px 2px 20px 14px rgb(64 60 67 / 16%); border-radius: 4px; background-color: #EEFDEB;">
<tr>
<td style="width:38%; padding: 0px 20px;">
<div>
<img src="https://i.postimg.cc/pr3GGZc1/xxx.png"
style="max-width: 75px;">
</div>
</td>
<td style="width:62%">
<p
style="font-weight: 600; font-size: 15px; padding: 0 15px 0 0; margin-bottom: 0;">
Glutathione Skin Glow
Effervescent</p>
<div><img src="https://i.postimg.cc/dQWKmcsL/star.png" /><img
src="https://i.postimg.cc/dQWKmcsL/star.png" /><img
src="https://i.postimg.cc/dQWKmcsL/star.png" /><img
src="https://i.postimg.cc/dQWKmcsL/star.png" /><img
src="https://i.postimg.cc/dQWKmcsL/star.png" /></div>
<div><img src="https://i.postimg.cc/HsRDR07m/btn.png" />
</div>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td style="padding: 25px;">
<table width="100%" style="border-radius: 5px; border: 1px solid #000; padding: 13px 25px;">
<tr>
<td style="font-size: 20px; font-weight: 600;">Stalk us on our socials 👀</td>
<td style="text-align: right;">
<table width="100%;">
<tr>
<td style="text-align: center;"><a href="https://www.facebook.com/Plixlife/"
style="line-height: 0; display: block;"><img
src="https://i.postimg.cc/HnPDpXZQ/xxx.png"></a></td>
<td
style="border-left: 2px solid #000; text-align: center; border-right: 2px solid #000;">
<a href="https://www.instagram.com/myplixlife/"
style="line-height: 0; display: block;"><img
src="https://i.postimg.cc/wB5C1S4x/xxx.png"></a></td>
<td style="text-align: center;"><a
href="https://www.youtube.com/channel/UCxjpQEVVTxs1P8i9x4KVoKQ/videos"
style="line-height: 0; display: block;""><img src="
https://i.postimg.cc/262gwnfP/xxx.png"></a></td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
You have a number of large images which are not responsive. You could consider putting max-width:100% on them.
Alternatively, you can fine-tune certain types of images by adding a class to the image and then using a media query. For example:
<style>
#media screen and (max-width:600px) {
.small {
max-width:100px!important;
}
}
</style>
<img class="small" href="..." ...>
I also couldn't get it to be responsive in the browser without having the outer div min-width:100% (and no width or max-width set), and, the table width:100%;max-width:600px;margin:0 auto.
That will get it down to about 420px, but then it's just large tables that can't be made smaller. You could consider using a media query for making certain <td>'s have less padding on mobiles, and/or using a small font-size. Otherwise you will have to make your table differently.
I'm formatting a table on 2 rows with 3 images but the 2nd image in each row keeps dipping down and hugging to the wrong direction. I'm not sure what's causing it.
This is for an email and I'm just trying to pick apart some of the template to better fit my needs, thus all that inline CSS.. The responsiveColumn class is just for a media query just an fyi.
<!-- 2nd Image -->
<td style="background-color: #ffffff; color: #000000;" class="responsiveColumn" width="34%" valign="top" bgcolor="#ffffff">
<table cellspacing="0" cellpadding="0" border="0" height="100%" width="100%">
<tbody>
<tr>
<td style="padding-top: 20px; padding-right: 5px; padding-bottom: 20px; padding-left: 5px; background-color: #ffffff; color: #000000;" valign="top" bgcolor="#ffffff">
<div class="" style="">
<table cellspacing="0" cellpadding="0" border="0" width="100%" style="word-wrap: break-word; table-layout: fixed;">
<tbody>
<tr>
<td>
<p style="text-align: center;">
<a href="link.html" target="_blank"><img alt="Metro PCS" src="https://via.placeholder.com/175x150" style="border: 0px solid #000000; display: block;" width="175" height="150"></p>
</td>
</tr>
</tbody>
</table>
</div></td></tr>
</tbody></table></td>
I put it in jsfiddle so you can see it more clearly. You'll see how the 2nd image in each row just dips down and moves to the left opposed to keeping everything evenly on one line
https://jsfiddle.net/9f5c2zh6/1/
Remove the padding-top
<td style="padding-top: 20px;padding-right: 5px;padding-bottom: 20px;padding-left: 5px;background-color: #ffffff;color: #000000;" valign="top" bgcolor="#ffffff">
This is why we avoid inline styles because it's difficult to debug, However after some fiddling around, i found some problems
First: certain p elements have the following styles, And some others don't
p {
margin-bottom: 0;
margin-left: 0;
margin-right: 0;
margin-top: 0;
padding: 0;
}
Second: certain td elements have the following styles, And some others don't
td {
padding-top: 0px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
color: #000000;
}
The fix is to add the missing styles to where they belongs so everything is aligned nicely together
td {
padding-top: 0px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
color: #000000;
}
p {
margin-bottom: 0;
margin-left: 0;
margin-right: 0;
margin-top: 0;
padding: 0;
}
<tr>
<td width="100%" valign="top" style="color: #000000;">
<table cellspacing="0" cellpadding="0" border="0" height="100%" width="100%">
<tbody>
<tr>
<td style="background-color: #ffffff; color: #000000;" class="responsiveColumn" width="33%" valign="top" bgcolor="#ffffff">
<!-- 1st Image -->
<table cellspacing="0" cellpadding="0" border="0" height="100%" width="100%">
<tbody>
<tr>
<td style="padding-top: 20px; padding-right: 0px; padding-bottom: 20px; padding-left: 20px; background-color: #ffffff; color: #000000;" valign="top" bgcolor="#ffffff">
<div class="" style="">
<table cellspacing="0" cellpadding="0" border="0" width="100%" style="word-wrap: break-word; table-layout: fixed;">
<tbody>
<tr>
<td style="padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; color: #000000;">
<p style="margin-bottom: 0; margin-left: 0; margin-right: 0; margin-top: 0; padding: 0;">
<img alt="Metro PCS" src="https://via.placeholder.com/175x150" style="border: 0px solid #000000; display: block;" width="175" height="150">
</p>
</td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
</tbody>
</table>
</td>
<!-- 2nd Image -->
<td style="background-color: #ffffff; color: #000000;" class="responsiveColumn" width="34%" valign="top" bgcolor="#ffffff">
<table cellspacing="0" cellpadding="0" border="0" height="100%" width="100%">
<tbody>
<tr>
<td style="padding-top: 20px; padding-right: 5px; padding-bottom: 20px; padding-left: 5px; background-color: #ffffff; color: #000000;" valign="top" bgcolor="#ffffff">
<div class="" style="">
<table cellspacing="0" cellpadding="0" border="0" width="100%" style="word-wrap: break-word; table-layout: fixed;">
<tbody>
<tr>
<td>
<p style="text-align: center;">
<a href="link.html" target="_blank"><img alt="Metro PCS" src="https://via.placeholder.com/175x150" style="border: 0px solid #000000; display: block;" width="175" height="150"></p>
</td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
</tbody>
</table>
</td>
<!-- 3rd Image -->
<td style="background-color: #ffffff; color: #000000;" class="responsiveColumn" width="33%" valign="top" bgcolor="#ffffff">
<table cellspacing="0" cellpadding="0" border="0" height="100%" width="100%">
<tbody>
<tr>
<td style="padding-top: 20px; padding-right: 20px; padding-bottom: 20px; padding-left: 0px; background-color: #ffffff; color: #000000;" valign="top" bgcolor="#ffffff">
<div style="" class="">
<table cellspacing="0" cellpadding="0" border="0" width="100%" style="word-wrap: break-word; table-layout: fixed;">
<tbody>
<tr>
<td style="color: #000000;">
<p style="margin-bottom: 0; margin-left: 0; margin-right: 0; margin-top: 0; padding: 0;">
<a href="link.html" target="_blank"><img alt="Metro PCS" src="https://via.placeholder.com/175x150" style="float: right; border: 0px solid #000000; display: block;" width="175" height="150"></p>
</td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<!-- end 3 column section -->
<!-- 3 column section -->
<tr>
<td width="100%" valign="top" style="color: #000000;">
<table cellspacing="0" cellpadding="0" border="0" height="100%" width="100%">
<tbody>
<tr>
<td style="background-color: #ffffff; color: #000000;" class="responsiveColumn" width="33%" valign="top" bgcolor="#ffffff">
<!-- 1st Image on 2nd row -->
<table cellspacing="0" cellpadding="0" border="0" height="100%" width="100%">
<tbody>
<tr>
<td style="padding-top: 20px; padding-right: 0px; padding-bottom: 20px; padding-left: 20px; background-color: #ffffff; color: #000000;" valign="top" bgcolor="#ffffff">
<div class="" style="">
<table cellspacing="0" cellpadding="0" border="0" width="100%" style="word-wrap: break-word; table-layout: fixed;">
<tbody>
<tr>
<td style="padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; color: #000000;">
<p style="margin-bottom: 0; margin-left: 0; margin-right: 0; margin-top: 0; padding: 0;">
<a href="link.html" target="_blank"><img alt="Metro PCS" src="https://via.placeholder.com/175x150" style="border: 0px solid #000000; display: block;" width="175" height="150"></p>
</td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
</tbody>
</table>
</td>
<!-- 2nd Image on 2nd row -->
<td style="background-color: #ffffff; color: #000000;" class="responsiveColumn" width="34%" valign="top" bgcolor="#ffffff">
<table cellspacing="0" cellpadding="0" border="0" height="100%" width="100%">
<tbody>
<tr>
<td style="padding-top: 20px; padding-right: 5px; padding-bottom: 20px; padding-left: 5px; background-color: #ffffff; color: #000000;" valign="top" bgcolor="#ffffff">
<div class="" style="">
<table cellspacing="0" cellpadding="0" border="0" width="100%" style="word-wrap: break-word; table-layout: fixed;">
<tbody>
<tr>
<td>
<p style="text-align: center;">
<a href="link.html" target="_blank"><img alt="Metro PCS" src="https://via.placeholder.com/175x150" style="border: 0px solid #000000; display: block;" width="175" height="150"></p>
</td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
</tbody>
</table>
</td>
<!-- 3rd Image on 2nd row -->
<td style="background-color: #ffffff; color: #000000;" class="responsiveColumn" width="33%" valign="top" bgcolor="#ffffff">
<table cellspacing="0" cellpadding="0" border="0" height="100%" width="100%">
<tbody>
<tr>
<td style="padding-top: 20px; padding-right: 20px; padding-bottom: 20px; padding-left: 0px; background-color: #ffffff; color: #000000;" valign="top" bgcolor="#ffffff">
<div style="" class="">
<table cellspacing="0" cellpadding="0" border="0" width="100%" style="word-wrap: break-word; table-layout: fixed;">
<tbody>
<tr>
<td style="color: #000000;">
<p style="margin-bottom: 0; margin-left: 0; margin-right: 0; margin-top: 0; padding: 0;">
<a href="link.html" target="_blank"><img alt="Metro PCS" src="https://via.placeholder.com/175x150" style="float: right; border: 0px solid #000000; display: block;" width="175" height="150"></p>
</td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
I am working on HTML email and trying to center a green TD in a white TR so that there's a 20px white margin on the left and right of the green box.
I tried setting TD width for the green portion and setting margin 0 auto but the green just expands to the width of the TR.
Tried putting in 2 more TDs to push the green TD into the center and that didn't work either.
Including the code snippet, am having trouble with the TR that has #a6d971.
<table cellspacing="0" cellpadding="0" border="0" width="600" height="" bgcolor="" style="margin: 0 auto;">
<tbody>
<tr>
<td style="margin: 0 auto;">
<img width="600" height="23" padding="0" src="assets/graphic_scalloped_top.png" alt="" style="display: block;" />
</td>
</tr>
<tr bgcolor="#fff" height="75">
<td valign="top" style="text-align:center;">
<p style="margin:0; padding-bottom: 3px; padding-top: 3px; color:#545d69; font-size: 24px; text-align:center; font-family: Arial, Helvetica;">
Regular sales happen every day
</p>
<p style="margin:0; padding-bottom: 3px; padding-top: 3px; color:#4bc1d6; font-size: 16px; text-align:center; font-family: Arial, Helvetica;">
9am - 11pm
</p>
</td>
</tr>
<tr bgcolor="#fff" height="75" padding="10">
<td bgcolor="#000" width="20"></td>
<td bgcolor="#a6d971" width="300" style="margin: 10;">
</td>
<td bgcolor="#000" width="20"></td>
</tr>
<tr bgcolor="#fff">
<td valign="top">
<table cellspacing="0" cellpadding="10" border="0" align="center" width="100%" bgcolor="#fff" style="">
<tbody>
<tr>
<td height="80" style="font-family: Helvetica, Arial, sans-serif; font-size: 18px; font-weight: bold; color: #555; background:url('assets/graphic_9am.png') no-repeat; background-position: 10% center; padding:10px; margin:0;">
<h3>Nine # Nine</h3>
<p>Fuel up! Dresses, tunics and other items including:</p>
</td>
</tr>
<tr>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td style="margin: 0 auto;">
<img width="600" height="23" padding="0" src="assets/graphic_scalloped_bottom.png" alt="" style="display: block;" />
</td>
</tr>
</tbody>
</table>
Switch to DIV's and CSS, most emails client supports styles pretty well, you can use a DIV inside your TD element, it'll be easy to center or do other things you might want.
For Example
<tr style="background-color: white;">
<td style="background-color: green;">
<div style="background-color: purple; margin-right: 20px; margin-left: 20px;">Content Here</div>
</td>
</tr>
Also note if you use DIV's you can also avoid tables.
Hack on top of a hack.
<table width="100%" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td style="border-left: 20px solid white; border-right: 20px solid white; background: green; color: white; text-align: center;">
This is stuff.
</td>
</tr>
</tbody>
</table>
http://jsfiddle.net/zy6GU/
Incidentally, the same thing should work with a DIV:
<div style="border-left: 20px solid white; border-right: 20px solid white; background: green; color: white; text-align: center;">This is a DIV.</div>
http://jsfiddle.net/zy6GU/1/
If you HAVE to use tables, might as well abuse them a little:
<table><tr align="center">
<td width="50%">one</td>
<td style="background-color:green">two</td>
<td width="50%">three</td>
</tr></table>
http://jsfiddle.net/mblase75/yntfu/
I'm not a CSS expert but this works for me (with no extra tags) :
<table>
<tr style="background-color: white; border: 1px solid black;">
<td style="background-color: green; display: block; margin: 0 20px;">
<!-- Content -->
</td>
</tr>
</table>
What are you talking about 'for emails'? You mean an email address, like Email Me? If so you'd want some css that centers the link in the TD, or in combination with colspan on the TD.