I have my align="center" and everything is all set, except the text will NOT center! Can someone assist and show me what I did incorrectly in this? And by the text I mean my header text the "Page Header" text listed in my code below.
<table style="text-align: left; width: 1000px; height: 251px; background-color: rgb(15, 100, 23);" border="0" cellpadding="3" cellspacing="1">
<tbody>
<tr style="font-family: Tahoma; color: white;" align="center">
<td colspan="2" rowspan="1" style="vertical-align: middle; width: 100px; background-color: rgb(46, 480, 256);"><a name="ph2">Page Header</a>
</td>
</tr>
<tr>
<td style="width: 100px;">
<br>
<td style="vertical-align: top; font-family: Tahoma; background-color: white;"></td>
EDIT ---
when i ran my syntax here for testing it was not showing as centered, increasing to 100% as suggested below is showing correctly.
JSFiddle Example
It was centered for me too, I changed your width to 100% so that it is centered to the screen.
https://jsfiddle.net/f9nngu82/
<table style="text-align: left; width: 100%; height: 251px; background-color: rgb(15, 100, 23);" border="0" cellpadding="3" cellspacing="1">
<tbody>
<tr style="font-family: Tahoma; color: white;" align="center">
<td colspan="2" rowspan="1" style="vertical-align: middle; width: 100px; background-color: rgb(46, 480, 256);"><a name="ph2">Page Header</a>
</td>
</tr>
<tr>
<td style="width: 100px;">
<br>
<td style="vertical-align: top; font-family: Tahoma; background-color: white;"></td>
You can also try and use the center tag and put everything in between.Not the best way, but it works.
< center> < /center>
Related
I have a problem with an html email template in Gmail. In all other rendered browsers/mail clients it's rendered good so far, but I discovered a problem on Gmail Android App (tested on Samsung Galaxy S9+).
As you can see in the image, the big title beside the image is cut due to overflow - and I have no solution on how to prevent this. As said before, this happens on no other (mobile) mail client so far.
Found on Stack and other resources, that Gmail App can increase font-size - tried out following tipps I've seen so far, all without any positive effect:
!important directly on <td> and/or <a> with .listing-title
font-size in pt instead of px (with and without !important)
spacer.gif as top row (creates huge empty space on left side)
white-space: nowrap; can't be used because usually these titles are bigger than one line and this looks weird when cut off with overflow:hidden
special class with u + .gmail
Even if I change height of image and text-container - this then effects ALL mail clients of course...
Note: I'm not allowed to do big design changes, so it needs to be img on left side and these texts on right side.
Does anyone has further suggestions on how this cut off could be prevented?
Thank you in advance!
.ReadMsgBody {
width: 100%;
}
.ExternalClass {
width: 100%;
}
span.yshortcuts {
color: #000;
background-color: none;
border: none;
}
span.yshortcuts:hover,
span.yshortcuts:active,
span.yshortcuts:focus {
color: #000;
background-color: none;
border: none;
}
html,
table {
font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", arial;
}
.main-tbody * {
margin: 0;
padding: 0;
}
.padding {
width: 50px;
}
.copyright {
width: 500px;
}
.location-row {
display: block !important;
}
.button-padding {
display: none !important;
}
#media screen and (max-width:620px) {
.location-row {
display: none !important;
}
.main-table {
width: 320px !important;
}
.inner-table {
width: 320px !important;
}
.image-listing {
width: 80px !important;
height: 60px !important;
max-width: 80px !important;
max-height: 60px !important;
}
.image-container {
width: 80px !important;
height: 60px !important;
}
.listing-title {
font-size: 14px !important;
line-height: 18px !important;
height: 35px !important;
}
.listing-price {
font-size: 12px !important;
height: 14px !important;
}
.button-padding {
display: block !important;
}
.copyright {
width: 320px !important;
}
}
a[x-apple-data-detectors],
.x-gmail-data-detectors,
.x-gmail-data-detectors *,
.aBn,
u+#body a,
#MessageViewBody a {
color: inherit;
text-decoration: none;
font-size: inherit;
font-family: inherit;
font-weight: inherit;
line-height: inherit;
}
<body id="body" style="font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Ubuntu, 'Helvetica Neue', sans-serif; margin:0; min-width:320px;">
<table class="main-table" border="0" cellpadding="0" cellspacing="0" align="center" style="text-align: center; background: #f5f5f5; margin-inline-start: auto; margin-inline-end: auto;" width="600">
<tbody class="main-tbody">
<!-- Header -->
<tr align="center" style="margin: 0 auto; text-align: center;">
<td colspan="3">
<table class="inner-table" border="0" cellpadding="0" cellspacing="0" align="center" width="500" style="margin: 0 auto; text-align: center;">
<tbody align="center">
<tr>
<td colspan="3" height="40" style="height: 40px;">
<p style="margin: 0;"></p>
</td>
</tr>
<tr style="height: 40px; width: 100%;" align="center">
<td colspan="3" class="desktop-logo" width="500">
<img height="48" width="128" style="display: inline-block; vertical-align: middle" alt="Logo" src="https://via.placeholder.com/128x48.png?text=logo">
</td>
</tr>
<tr>
<td colspan="3" height="30" style="height: 30px;">
<p style="margin: 0;"></p>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<!-- Header -->
<tr>
<td class="padding" width="50"></td>
<td>
<!-- Listing -->
<table class="inner-table" border="0" cellpadding="0" cellspacing="0" align="center" style="background-color: #ffffff;" width="500">
<tbody>
<tr class="list-container" style="width: 100%; max-height:140px;">
<td width="10"></td>
<td class="image-container" colspan="1" width="160" height="140" style="max-height:140px;">
<a href="">
<img class="image-listing" src="https://via.placeholder.com/160x120.jpeg?text=image" alt="" style="display: block; width: 100%; height: 100%; max-height: 120px;max-width: 100%; object-fit: cover" width="160" height="120">
</a>
</td>
<td width="10"></td>
<td class="text-container" colspan="2">
<table border="0" cellpadding="0" cellspacing="0" align="left" width="100%" style="width: 100%;">
<tbody>
<tr>
<td class="padding-top-inner-table" height="10" style="height: 10px;">
<p style="margin: 0;"></p>
</td>
</tr>
<tr>
<td>
<a href="" style="width: 500px">
<table border="0" cellpadding="0" cellspacing="0" align="left" width="500" style="width: 100%; text-align: left; color: #212338;">
<tbody>
<tr class="location-row">
<td style="width:100%; font-size: 12px; font-weight: 400;display: block; height:16px;" height="16">
<a href="" style="overflow: hidden; width:100%;height: 16px; margin: 0;text-decoration: none;color: #232f3f; display: block">
A small title
</a>
</td>
</tr>
<tr>
<td class="location-row" height="10" style="height: 10px;">
<p style="margin: 0;"></p>
</td>
</tr>
<tr>
<td class="listing-title" style="font-size: 16px; height:42px; font-weight: 400;display: block" height="42">
<a class="listing-title" href="" style="overflow: hidden; height: 42px; margin: 0;color: #232f3f;display: block; text-decoration: none; font-weight:bold; font-size: 16px;">
The very main big title which makes problems
</a>
</td>
</tr>
<tr class="location-row" height="27" style="height: 27px;">
<p style="margin: 0;"></p>
</tr>
<tr height="8" style="height: 8px;">
<p style="margin: 0;"></p>
</tr>
<tr height="19" style="height: 19px;">
<td class="listing-price" height="18" style="height:18px; margin: 0;font-weight: normal; font-size:14px; text-align: left; text-decoration: none;">
Tag 1 | Tag 2 | € price
</td>
</tr>
</tbody>
</table>
</a>
</td>
<td width="15" style="width: 15px;">
<p style="margin: 0;"></p>
</td>
</tr>
<tr>
<td colspan="3" height="8" style="height: 8px;">
<p style="margin: 0;"></p>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td colspan="5" height="10" style="height: 10px; background: #f5f5f5;">
<p style="margin: 0;"></p>
</td>
</tr>
</tbody>
</table>
<!-- Listing -->
</td>
<td class="padding"></td>
</tr>
</tbody>
</table>
I can't seem to reproduce the problem on your screenshot in Gmail on Android. My guess is there's something else in your code conflicting with Gmail's rendering. One thing I see is that there are missing <td>s here and there in your code. For example here:
<tr class="location-row" height="27" style="height: 27px;">
<p style="margin: 0;"></p>
</tr>
This should be:
<tr class="location-row" height="27" style="height: 27px;">
<td><p style="margin: 0;"></p></td>
</tr>
There are also two <body> elements in your code.
As a general rule for Gmail troubleshooting, I would:
Make sure your <style> tags are inside the <head> of your email. Gmail doesn't support <style> in the <body>.
Make sure your email can render correctly with and without <style> tags. Gmail mobile webmail and Gmail Apps with Non Gmail Accounts don't support <style> tags.
Make sure your HTML overall weight is not bigger than 102 Kb. Gmail clips email at 102 Kb and limits <style> to 16 Kb.
Use a neutral service that doesn't alter your HTML to send your tests (like Putsmail or Parcel).
Here’s an old post I wrote about troubleshooting Gmail’s responsive design support .
If this still doesn't help, feel free to share the entire code that you sent to trigger that bug in the first place.
Hello I am trying to make two tables (one with an image) horizontal on the same line. I want it to be so when the screen changes to mobile, the table on the left goes on top of the right one vertically.
<table style="display: inline-block" cellpadding="0" cellspacing="0"
border="0" width="100%">
<tr>
<td align="center" valign="top"
style="background-color: #ffffff; padding-bottom: 0">
<img src="#"
style=" height: auto; display: block; border: 0;">
</td>
</tr>
</table>
<table style="display: inline-block" cellpadding="0" cellspacing="0"
border="0" width="100%">
<tr>
<td align="left" valign="top"
style="background-color: #ffffff; padding-bottom: 0">
<p style="font-size: 16px; line-height:20px; color:#043667; margin:10px 0; font-family: Arial, Narrow, Helvetica, sans-serif">
<span style="color: #9d0059; font-weight: bold">text1,</span> text 2”
<br><span style="color: #9d0059"><i>-HAEGARDA Advocate</i></span>
</p>
</td>
</tr>
</table>
You're on the right track, but you need to get rid of the width:100%, otherwise two of them won't fit side by side in the same line!
Also, I'd use display:inline-table rather than display:inline-block.
table {
display: inline-table;
border-spacing: 0;
border: 0;
}
th,td {
padding: 0
}
<table>
<tr>
<td align="center" valign="top" style="background-color: #ffffff; padding-bottom: 0">
<img src="#" style=" height: auto; display: block; border: 0;">
</td>
</tr>
</table>
<table>
<tr>
<td align="left" valign="top" style="background-color: #ffffff; padding-bottom: 0">
<p style="font-size: 16px; line-height:20px; color:#043667; margin:10px 0; font-family: Arial, Narrow, Helvetica, sans-serif">
<span style="color: #9d0059; font-weight: bold">text1,</span> text 2”
<br><span style="color: #9d0059"><i>-HAEGARDA Advocate</i></span>
</p>
</td>
</tr>
</table>
You can use the flexbox layout to accomplish that. Firstly, you can put both tables inside a div and set the div display property to flex (style="display: flex;"). This will put both tables in-line with each other.
To make them stack vertically on mobile or smaller devices, you can set the div flex-wrap property to wrap. This will cause the tables to stack vertically. Check the code below, most importantly the div tag.
<div style="display: flex; flex-wrap: wrap;">
<table>
<tr>
<td align="center" valign="top" style="background-color: #ffffff; padding-bottom: 0">
<img src="#" style=" height: auto; display: block; border: 0;">
</td>
</tr>
</table>
<table>
<tr>
<td align="left" valign="top" style="background-color: #ffffff; padding-bottom: 0">
<p style="font-size: 16px; line-height:20px; color:#043667; margin:10px 0; font-family: Arial, Narrow, Helvetica, sans-serif">
<span style="color: #9d0059; font-weight: bold">text1,</span> text 2”
<br><span style="color: #9d0059"><i>-HAEGARDA Advocate</i></span>
</p>
</td>
</tr>
</table>
</div>
For some reason when I set the width for a cell in a table it does not affect the width of the cell. FYI I'm using inline styles for mailers.
<table cellpadding="0" cellspacing="0" width="100%">
<tr>
<td align="center">
<table cellpadding="0" cellspacing="0" width="550" style="width: 100%; max-width: 550px; text-align: center; border: 1px solid #003a4b;">
<tr>
<td style="padding-top: 10px;"><span style="font-family: helvetica, sans-serif; font-size: 37px; font-weight: bold; color: #93d600; border-bottom: 1px solid #003a4b;">Hunters Conference 2017</span></td>
</tr>
<tr>
<td width="80%" style="padding: 20px 0; background-color: blue;"><span style="font-family: helvetica, sans-serif; font-size: 16px; color: #003a4b; background-color: red;">Fyber were honoured to attend and support such a fantastic conference, congratulations to everyone that won a prize on our wheel of fortune!</span></td>
</tr>
<tr>
<td width="80%" style="padding: 0 55px; padding-bottom: 20px;"><span style="font-family: helvetica, sans-serif; font-size: 16px; color: #003a4b;">We hope you all had a great day, we enjoyed catching up with everyone and it was nice to see our clients face to face. </span></td>
</tr>
<!--[if mso]>
<tr>
<td style="padding-bottom: 20px;">
<img src="https://gallery.mailchimp.com/b083c967cd22e35ab4ce75e7a/images/2c3e3b5e-9a9f-4864-a36f-6359b0dd4b75.jpg" alt="Spinning Wheel" width="550" style="width: 100%; max-width: 550px;">
</td>
</tr>
<![endif]-->
<!--[if !mso]><!-- -->
<tr>
<td style="padding-bottom: 20px;">
<img src="https://gallery.mailchimp.com/b083c967cd22e35ab4ce75e7a/images/19e810cd-df47-474b-aa47-3f33bf26922a.gif" alt="Spinning Wheel" width="550" style="width: 100%; max-width: 550px;">
</td>
</tr>
<!--<![endif]-->
</table>
</td>
</tr>
</table>
https://jsfiddle.net/xmbsemje/
td's default behaviour is to fill the width of the table, so if you only have one <td> per row <tr>, it would always go full width of the table no matter what you do.
One approach is to create a table inside that td and put the width on table instead. Also padding left and right doesn't work in emails, so creating tables with defined width and centering them is the best option.
The other approach would be to have spacer cells on left and right to give you padding space. I modified your code (just the text cells with blue/red and white background) following the first approach.
Please note: I didn't fix all of your code, just change a couple to get you started
<table cellpadding="0" cellspacing="0" width="100%">
<tr>
<td align="center">
<table cellpadding="0" cellspacing="0" width="550" style="width: 100%; max-width: 550px; text-align: center; border: 1px solid #003a4b;">
<tr>
<td style="padding-top: 10px;"><span style="font-family: helvetica, sans-serif; font-size: 37px; font-weight: bold; color: #93d600; border-bottom: 1px solid #003a4b;">Hunters Conference 2017</span></td>
</tr>
<tr>
<td align="center" style="padding: 20px 0; background-color: blue;">
<table border="0" cellpadding="0" cellspacing="0" style="width:80%;">
<tr>
<td align="left"><span style="font-family: helvetica, sans-serif; font-size: 16px; color: #003a4b; background-color: red;">Fyber were honoured to attend and support such a fantastic conference, congratulations to everyone that won a prize on our wheel of fortune!</span></td>
</tr>
</table>
</td>
</tr>
<tr>
<td align="center" style="padding: 20px 0;">
<table border="0" cellpadding="0" cellspacing="0" style="width:80%;">
<tr>
<td align="left"><span style="font-family: helvetica, sans-serif; font-size: 16px; color: #003a4b;">We hope you all had a great day, we enjoyed catching up with everyone and it was nice to see our clients face to face. </span></td>
</tr>
</table>
</td>
</tr>
<!--[if mso]>
<tr>
<td style="padding-bottom: 20px;">
<img src="https://gallery.mailchimp.com/b083c967cd22e35ab4ce75e7a/images/2c3e3b5e-9a9f-4864-a36f-6359b0dd4b75.jpg" alt="Spinning Wheel" width="550" style="width: 100%; max-width: 550px;">
</td>
</tr>
<![endif]-->
<!--[if !mso]><!-- -->
<tr>
<td style="padding-bottom: 20px;">
<img src="https://gallery.mailchimp.com/b083c967cd22e35ab4ce75e7a/images/19e810cd-df47-474b-aa47-3f33bf26922a.gif" alt="Spinning Wheel" width="550" style="width: 100%; max-width: 550px;">
</td>
</tr>
<!--<![endif]-->
</table>
</td>
</tr>
</table>
last td width 550px so not effect your width 80%;
so you can add width on span tag
I'm having some display issues with Outlook 365 (web version) and Gmail (desktop version). Neither mail client will recognize the valign code. All the other email clients display as intended. Below is a screenshot of how the alignment should display.
Correct alignment of menu text links
The next screenshot shows how Outlook 365 (web) and Gmail (desktop) are displaying. Notice how the text links are residing in the center of the td cell instead of at the bottom as intended.
enter image description here
The current code for the background image, table set up and header area are provided at the bottom of this post.
(BTW...Litmus also displays the alignment issue, but Dreamweaver shows as intended. All major browsers and other email clients are displaying as intended. )
If anyone can review the code pasted below and see what I'm missing, it would be much appreciated. I've tried all the usual adjustments and nothing seems to accommodate Outlook 365 and Gmail desktop. Thank you to all for your quick response and expertise.
Alex
<div style="background-color: #00adef;"><!--[if gte mso 9]>
<v:background xmlns:v="urn:schemas-microsoft-com:vml" fill="t">
<v:fill type="tile" src="https://BackgroundTileURLHere" color="#e9f8f8"/>
/v:background
<![endif]-->
<table style="width: 100%; height: 100%;" border="0" cellpadding="0" cellspacing="0"><tbody width="640px;">
<tbody>
<tr>
<td align="left" background="BackgroundTileURLHere" valign="top">
<table style="width: 100%;" background="BackgroundTileURLHere">
<tbody>
<tr>
<td>
<!-- HEADER -->
<table font-family:="Arial, helvetica, sans-serif" style="width: 640px;" align="center" border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td colspan="6" style="width: 640px;"><img alt="EmailHeaderTopSpacer" src="EMailHeaderTopSpacingImageFileURLHere" style="display: block; width: 640px; height: 20px; border-style: none;" /></td>
</tr>
<tr>
<td style="width: 193px;"><img alt="CompanyLogo" src="CompanygoFileURLHere" style="display: block; width: 193px; height: 58px; border-style: none;" /></td>
<td style="width: 65px;"><img alt="CompanyLogoBreathingSpaceImageFile" src="CompanyLogoBreathingSpaceImageFileURLHere" style="display: block; width: 65px; height: 58px; border-style: none;" /></td>
<td style="width: 102px;" valign="bottom"><p><span style="font-family: arial,helvetica,sans-serif; color: #14552c; font-size: 14px; font-weight: bold; text-align: center;">Kelly Kettles</span></p></td>
<td style="width: 120px;" valign="bottom"><p style="text-align:center;"><span style="font-family: arial,helvetica,sans-serif; color: #14552c; font-size: 14px; font-weight: bold; text-align: center;">Ultimate Kits</span></p></td>
<td style="width: 115px;" valign="bottom"><p style="text-align:center;"><span style="font-family: arial,helvetica,sans-serif; color: #14552c; font-size: 14px; font-weight: bold; text-align: center;">Accessories</span></p></td>
<td style="width: 45px;" valign="bottom"><p style="text-align:right;"><span style="font-family: arial,helvetica,sans-serif; color: #14552c; font-size: 14px; font-weight: bold; text-align: right !important;">Blog</span></p></td>
</tr>
<tr>
<td colspan="6" style="width: 640px;"><img alt="HeaderBottomSpaceImageFile" src="HeaderBottomSpaceImageFileURLHere" style="display: block; width: 640px; height: 10px;" /></td>
</tr>
</tbody>
</table>
Replacing valign="bottom" with style="vertical-align: bottom" should work according to this source: https://www.campaignmonitor.com/css/
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.