I am currently developing a template email and I'have developed this :
<table style="border:0;" cellpadding="0" cellspacing="0" width="250">
<tr>
<td bgcolor="#f83f83" style="width:50%; background-color:#f83f83; float:left; height:15px;"></td>
<td bgcolor="#cccccc" style="width:50%; background-color:#cccccc; float:left; height:15px;"></td>
</tr>
</table>
But i would like the dynamic percentage Indicated in the center of the progress bar.
do you have a solution to make it compatible with the email client that are quite capricious ?
Thanks
It's tricky to exactly centre text over that progress bar, because you can't really put anything on top of that table - position:absolute; won't work on most email clients.
However, you could try something like:
<table style="border:0;" cellpadding="0" cellspacing="0" width="250">
<tr>
<td bgcolor="#f83f83" style="width:50%; background-color:#f83f83; float:left; height:15px;text-align:right;">5</td>
<td bgcolor="#cccccc" style="width:50%; background-color:#cccccc; float:left; height:15px;text-align:left;">0%</td>
</tr>
</table>
This would mean that the percentage is always over the current location of the progress bar, for example:
<table style="border:0;" cellpadding="0" cellspacing="0" width="250">
<tr>
<td bgcolor="#f83f83" style="width:35%; background-color:#f83f83; float:left; height:15px;text-align:right;">3</td>
<td bgcolor="#cccccc" style="width:65%; background-color:#cccccc; float:left; height:15px;text-align:left;">5%</td>
</tr>
</table>
Related
I have designed an app and applied inline style, such image and text appear side by side. I see there is an extra space between image and text. I also see "Demo Analysis Application" is shown as "Demo Analysis" and in next line "Application". I want image and next to it "Demo Analysis Application".
I have shown what I tried below.I have marked what I don't want in the picture.
<table class="mainTable" style="margin:auto;">
<tr>
<td colspan="1" style="height:65px;width:200px;padding:0px; padding-top:30px; padding-bottom:20px; border:0px; margin:0px;">
<img src="images/test.jpg" alt="Logo" width="200px" height="100px">
</td>
<td colspan="1" style="height:65px;padding:0px; padding-top:30px; padding-bottom:20px; border:0px; margin:0px;">
<p style="height:65px;width:200px;font-weight:bold;font-size:26px;">Demo Analysis Application</p>
</td>
</tr>
</table>
<table class="mainTable" style="margin:auto;">
<tr>
<td colspan="1" style="height:65px;width:auto;padding:0px; padding-top:30px; padding-bottom:20px; border:0px; margin:0px;">
<img src="https://cdn.pixabay.com/photo/2017/04/05/11/56/image-in-the-image-2204798_960_720.jpg" alt="ANSYS Logo" width="200px" height="100px">
</td>
<td colspan="1" style="height:65px;padding:0px; padding-top:30px; padding-bottom:20px; border:0px; margin:0px;">
<p style="height:65px;width:200px;font-weight:bold;font-size:26px;">Demo Analysis Application</p>
</td>
</tr>
</table>
Please check this code.I think this is what you want.
Let me start by saying that I haven't built an HTML email in a long time; I've been spoiled by CSS for far too long, so going back to building things with tables is incredibly frustrating. I am having trouble getting two rows to sit flush against each other; there is a gap that I can't eliminate, no matter what I've tried. Scouring other posts on S.O. only yields solutions I've already tried and that have not worked. About 40% of the intended audience is viewing emails on Outlook, meaning CSS support is incredibly limited. Things I've tried:
border-collapse:collapse (which I already put in place by default from the start)
setting margin: 0 (just about everywhere)
cellspacing and cellpadding to zero (which I already did by default when building the tables).
display:block and display:inline-block (not really supported by Outlook, but didn't solve my problem anyway).
Here are my code snippets (ignore any CSS classes; again there is not yet any embedded CSS, those are just placeholders at this point. Any embedded CSS will primarily be to handle email client-specific issues.)
<!--2 Column Layout : BEGIN-->
<tr>
<td align="center" valign="top" style="text-align: center; padding:0px; border-width:0px; margin:0px;">
<table cellspacing="0" cellpadding="0" border="0" width="100%" style="border-collapse:collapse; border:0px; border-spacing:0px;">
<tr>
<td class="stack-column-center" style="text-align: center; padding:0px; border-width:0px; margin:0px;">
<table cellspacing="0" cellpadding="0" border="0" style="border-collapse:collapse; border:0px; border-spacing:0px;">
<tr>
<td style="text-align: center; padding:0px; border-width:0px; margin:0px;">
<img src="http://i1024.photobucket.com/albums/y303/aadBresco/monkey_wrench_zpstk6rgf3j.png" width="300" alt="Monkey Wrench" border="0" class="fluid">
</td>
</tr>
</table>
</td>
<td class="stack-column-center" style="text-align: center; padding:0px; border-width:0px; margin:0px;">
<table cellspacing="0" cellpadding="0" border="0" style="border-collapse:collapse; border:0px; border-spacing:0px;">
<tr>
<td style="text-align: center; padding:0px; border-width:0px; margin:0px;">
<img src="http://i1024.photobucket.com/albums/y303/aadBresco/auto_parts_zpsf1bs9tgv.png" width="300" alt="Auto Parts" border="0" class="fluid">
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<!--2 Column Layout : END-->
<!--2nd Hero Image : BEGIN-->
<tr>
<td class="full-width-image">
<img src="http://i1024.photobucket.com/albums/y303/aadBresco/sliced-bread_zpsxt8z6pjt.png" width="600" alt="Sliced Bread" border="0" align="center" style="width: 100%; max-width: 600px; height: auto;">
</td>
</tr>
<!--Hero Image : END-->
The small gap at the bottom of the row is visible if you look closely. It is 4px in height.
I t looks good; not bad. Also, you don't need to add all the css details to each row and column; just add: or or ; and then in your css sheet (If you don't have it then just create on) add td.Whatever-you-decide-to-name-it or tr.Whatever-you-decide-to-name-it or table.Whatever-you-decide-to-name-it.
Hope this helps!!!
Since your img is not containing a width (even auto), initialize it as a block element.Since you have mentioned that block is not supported in your case I added display:table for your img. I added the working snippet with this answer.
img {
display: table;
}
<!--2 Column Layout : BEGIN-->
<tr>
<td align="center" valign="top" style="text-align: center; padding:0px; border-width:0px; margin:0px;">
<table cellspacing="0" cellpadding="0" border="0" width="100%" style="border-collapse:collapse; border:0px; border-spacing:0px;">
<tr>
<td class="stack-column-center" style="text-align: center; padding:0px; border-width:0px; margin:0px;">
<table cellspacing="0" cellpadding="0" border="0" style="border-collapse:collapse; border:0px; border-spacing:0px;">
<tr>
<td style="text-align: center; padding:0px; border-width:0px; margin:0px;">
<img src="http://i1024.photobucket.com/albums/y303/aadBresco/monkey_wrench_zpstk6rgf3j.png" width="300" alt="Monkey Wrench" border="0" class="fluid">
</td>
</tr>
</table>
</td>
<td class="stack-column-center" style="text-align: center; padding:0px; border-width:0px; margin:0px;">
<table cellspacing="0" cellpadding="0" border="0" style="border-collapse:collapse; border:0px; border-spacing:0px;">
<tr>
<td style="text-align: center; padding:0px; border-width:0px; margin:0px;">
<img src="http://i1024.photobucket.com/albums/y303/aadBresco/auto_parts_zpsf1bs9tgv.png" width="300" alt="Auto Parts" border="0" class="fluid">
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<!--2 Column Layout : END-->
<!--2nd Hero Image : BEGIN-->
<tr>
<td class="full-width-image">
<img src="http://i1024.photobucket.com/albums/y303/aadBresco/sliced-bread_zpsxt8z6pjt.png" width="600" alt="Sliced Bread" border="0" align="center" style="width: 100%; max-width: 600px; height: auto;">
</td>
</tr>
<!--Hero Image : END-->
Since display:block wasn't a solution, I tried removing the <!doctype html> declaration and that fixed the issue. Normally I don't think this would be acceptable, but to the best of my knowledge - and after testing - it does not have any negative impact for HTML email.
I am able to hide a table by using below code in Gmail, but same isn't working on Inbox by Google. Please review below code and help me to hide this table on Inbox by Google.
<!--[if !mso]><!--><table cellspacing="0" cellpadding="0" class="mobileShow" align="center" style="width:320px; background-color:#ffffff; max-height: 0px !important; display: none !important; overflow:hidden; float:left; line-height:0px; mso-hide: all;">
<tr>
<td style="width:85px;">
<table cellspacing="0" cellpadding="0" style="width:85px; background-color:#f8f8f8;">
<tr>
<td style="width:85px; height:66px; background-color:#ffffff;"></td>
</tr>
<tr>
<td style="width:85px; height:159px; background-color:#f8f8f8;"></td>
</tr>
</table>
</td>
<td style="width:150px; background:url(http://in.bmscdn.com/events/Large/ET00041490.jpg) no-repeat center center; height:225px; background-color:#adadad; border-radius:5px; background-size: 100% 225px;"><img src="http://in.bmscdn.com/mailers/images/160720bmsreview/playbtn.png" style="margin:75px auto;display:block;" height="60" border="0" width="60"></td>
<td style="width:85px;">
<table cellspacing="0" cellpadding="0" style="width:85px; background-color:#f8f8f8;">
<tr>
<td style="width:85px; height:66px; background-color:#ffffff;"></td>
</tr>
<tr>
<td style="width:85px; height:159px; background-color:#f8f8f8;"></td>
</tr>
</table>
</td>
</tr></table><!--<![endif]-->
You really haven't submitted enough of an example for me to understand what's going on, but the fact that you're using !important suggests to me that you're not using inline styles. Try that out, emails are a pain to work with but inline usually works better.
This should cover all your bases (as inline CSS):
{
display:none;
font-size:1px;
line-height:1px;
max-height:0px;
max-width:0px;
opacity:0;
overflow:hidden;
mso-hide:all;
}
Edit (as inlined):
<table style='display:none;font-size:1px;line-height:1px;
max-height:0;max-width:0;opacity:0;overflow:hidden;
mso-hide:all;' cellspacing='0' cellpadding='0' border=0>
Between two tables am getting vertical space like 1px of border in outlook 2013, 2010, and 2007.
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<body>
<table width="700" align="left" border="0" cellspacing="0" cellpadding="0" bgcolor="#fffcf5" style="background-color:red; border:none; mso-table-lspace:0pt; mso-table-rspace:0pt; border-collapse:collapse;">
<tr>
<td width="15"><table width="300" align="left" border="0" cellspacing="0" cellpadding="0" bgcolor="#fffcf5" style="background-color:#000000; border:none; mso-table-lspace:0pt; mso-table-rspace:0pt; border-collapse:collapse;" background="#000000">
<tr>
<td width="15" height="170">logo </td>
</tr>
</table>
<table width="490" height="170px" align="left" border="0" cellspacing="0" cellpadding="0" bgcolor="#fffcf5" style="background-color:#000000; border:none; mso-table-lspace:0pt; mso-table-rspace:0pt; border-collapse:collapse;" background="#000000">
<tr bgcolor="#ffffff">
<td width="15" height="35px">emptyspace</td>
</tr>
<tr bgcolor="red">
<td width="15" height="100">heading</td>
</tr>
<tr bgcolor="#ffffff">
<td width="15" height="35">emptyspace</td>
</tr>
</table></td>
</tr>
</table>
</body>
</html>
Its working fine in chrome and Firefox browsers.
This is the image which am getting error in outlook 2013. Hi sir here am getting some issue in outlook 2013 so am sending screen shot kindly have a look and help me.!
You had some oversized widths in your email give this a try...
<table width="700" border="0" cellspacing="0" cellpadding="0"
style="background-color:green;
border:none;
border-collapse:collapse;">
<tr>
<td>
<table width="300" align="left" border="0" cellspacing="0" cellpadding="0" bgcolor="orange"
style=" border:none;
border-collapse:collapse;">
<tr>
<td width="15" height="170">logo </td>
</tr>
</table>
<table width="400" height="170px" align="left" border="0" cellspacing="0" cellpadding="0" bgcolor="#fffcf5"
style="background-color:#000000;
border:none;
border-collapse:collapse;">
<tr bgcolor="#ffffff">
<td width="15" height="35px">emptyspace</td>
</tr>
<tr bgcolor="red">
<td width="15" height="100">heading</td>
</tr>
<tr bgcolor="#ffffff">
<td width="15" height="35">emptyspace</td>
</tr>
</table>
</td>
</tr>
</table>
</table>
in emails you'll need to add style="display:block;" to images for them to remove the padding
Add style="margin: 0px;" to all the tables, tr, and td because Outlook automatically adds a 1px margin round the tables if no margin is specified.
You might need to add padding: 0px; as well.
This is based on my own trial and error, please comment below if it doesn't work, will try and update my answer.
i hate writing email templates.
with that said, i have a pretty good table'd template created yet Outlook 2007 and Outlook 2010 is creating a lot of spacing between the TR than I notice in other email clients.
OL 2007 (http://screencast.com/t/YJ5LdTkiGR)
OL 2010 (http://screencast.com/t/Ob1ii370C)
The code is found below. Any help in getting things to work in Outlook would be greatly appreciated so I can learn and next time not have to bug you :)
<html>
<body>
<style>
tr {border:none;}
</style>
<table id="container" border="0" background-color="#D3E2E9" width="620px" cellpadding="0" cellspacing="0" style="background:#D3E2E9;">
<tr><td>
<table id="container_border" cellpadding="0" cellspacing="0" style="border:1px solid #85898B; width:570px; margin-left:20px; margin-top:20px; margin-bottom:20px;">
<tr><td>
<!-- content -->
<table id="content" cellpadding="0" cellspacing="0" style="margin-left:15px; margin-top:20px; margin-bottom:20px;padding:10px; width:517px; background:white;">
<tr><td>
<tr>
<td><img src="https://origin.ih.constantcontact.com/fs089/1103957675139/img/7.jpg"></td>
</tr>
<tr>
<td style="font-family:arial,sans-serif;font-size:11px; line-height:150%; color:#000; margin-top:20px; padding:0 52px; font-weight:bold;">Announcing, da, da, da, DAAAAAAAAAAA, the brand new awesomely helpful,
wildly interesting Back Bay Shutter Company website. Full of juicy information
on all of our products, from shutters, shades and blinds to Shoji panels, this
site will help make the job of choosing just the right window treatment a snap.</td>
</tr>
<tr>
<td><img src="https://origin.ih.constantcontact.com/fs089/1103957675139/img/8.jpg"></td>
</tr>
<tr>
<td style="font-family:arial,sans-serif;font-size:11px; line-height:150%; color:#000; margin-top:20px; padding:0 52px; font-weight:bold;">We even have product videos, so you can actually see how a product looks and
works in people's homes (and who doesn't like a peak at someone else's home?).
We also have a blog, brimming with design news and views.
</td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td style="font-family:arial,sans-serif;font-size:11px; line-height:150%; color:#000; margin-top:90px; padding:0 22px; font-weight:bold;">
<table>
<tr>
<td>
<img src="https://origin.ih.constantcontact.com/fs089/1103957675139/img/6.jpg" border="0">
</td>
<td style="font-family:arial,sans-serif;font-size:11px; line-height:150%; color:#000; font-weight:bold;">
So become a Facebook fan and stay updated on what we're doing. And stop by often. We can't wait to show you around.
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td><img src="https://origin.ih.constantcontact.com/fs089/1103957675139/img/3.jpg"></td>
</td></tr>
</table>
</td></tr>
</table>
</td></tr>
</table>
</body>
</html>
Please try to use below inline style to empty tds avoid more spacing of because empty tds
style="font-size:0%; line-height:1px; mso-line-height-rule:exactly;"
simple and happy coding
The extra space is caused by this empty row:
<tr>
<td> </td>
</tr>
Try replacing that row with:
<tr>
<td height="0" style="padding: 0; margin: 0; height: 0;"></td>
</tr>
Alternatively, sometimes when dealing with Outlook it's easiest to use <br> for spacing.
Here's your full HTML with 2 <br> added at the end of the last paragraph:
<html>
<body>
<style>
tr {border:none;}
</style>
<table id="container" border="0" background-color="#D3E2E9" width="620px" cellpadding="0" cellspacing="0" style="background:#D3E2E9;">
<tr><td>
<table id="container_border" cellpadding="0" cellspacing="0" style="border:1px solid #85898B; width:570px; margin-left:20px; margin-top:20px; margin-bottom:20px;">
<tr><td>
<!-- content -->
<table id="content" cellpadding="0" cellspacing="0" style="margin-left:15px; margin-top:20px; margin-bottom:20px;padding:10px; width:517px; background:white;">
<tr><td>
<tr>
<td><img src="https://origin.ih.constantcontact.com/fs089/1103957675139/img/7.jpg" style="display:block"></td>
</tr>
<tr>
<td style="font-family:arial,sans-serif;font-size:11px; line-height:150%; color:#000; margin-top:20px; padding:0 52px; font-weight:bold;">Announcing, da, da, da, DAAAAAAAAAAA, the brand new awesomely helpful,
wildly interesting Back Bay Shutter Company website. Full of juicy information
on all of our products, from shutters, shades and blinds to Shoji panels, this
site will help make the job of choosing just the right window treatment a snap.</td>
</tr>
<tr>
<td><img src="https://origin.ih.constantcontact.com/fs089/1103957675139/img/8.jpg" style="display:block"></td>
</tr>
<tr>
<td style="font-family:arial,sans-serif;font-size:11px; line-height:150%; color:#000; margin-top:20px; padding:0 52px; font-weight:bold;">We even have product videos, so you can actually see how a product looks and
works in people's homes (and who doesn't like a peak at someone else's home?).
We also have a blog, brimming with design news and views.<br><br>
</td>
<tr>
<td style="font-family:arial,sans-serif;font-size:11px; line-height:150%; color:#000; margin-top:90px; padding:0 22px; font-weight:bold;">
<table>
<tr>
<td>
<img src="https://origin.ih.constantcontact.com/fs089/1103957675139/img/6.jpg" border="0" style="display:block">
</td>
<td style="font-family:arial,sans-serif;font-size:11px; line-height:150%; color:#000; font-weight:bold;">
So become a Facebook fan and stay updated on what we're doing. And stop by often. We can't wait to show you around.
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td><img src="https://origin.ih.constantcontact.com/fs089/1103957675139/img/3.jpg"></td>
</td></tr>
</table>
</td></tr>
</table>
</td></tr>
</table>
</body>
</html>