Indenting Text in HTML Email Template - html

I am attempting to place HTML in an email template of an older vendor solution that doesn't support modern HTML5 techniques. In the code sample (JSFiddle url below) if I resize the template and make it smaller the text falls to the next line without an indent.
Is there a way to make the text indent without a hard line break and indenting?
<div>
<table style="background:#8B0000 ;color:#FFF;width:100%;font-size: 11pt;font-family: Arial;">
<tr>
<td width="10"></td>
<td height="30">Test Email</td>
<td align="right"></td>
<td width="30"></td>
</tr>
</table>
<table style="background:#D9D9D9;color:#17375E;width:100%;font-size: 11pt;font-family: Arial;">
<tr>
<td width="10"></td>
<td height="30"></td>
</tr>
</table>
<table style="background:#D9D9D9;width:100%;font-family: Arial;">
<tr style="background:#FFF">
<td style="background:#D9D9D9"></td>
<td height="30">
<p style="font-size: 10.5pt;font-weight: 700;color:#555">  Test.</p>
<div style="font-size: 10pt;color:#555">
<p>  There are pending items that require your review. Please see below are the details. The request must be approved or denied within 72 business hours or it will escalate to your manager. If you have questions regarding this email, call <b>1-555-555-5555</b>.</p>
</div>
</td>
<td style="background:#D9D9D9"></td>
</tr>
</table>
<table style="background:#D9D9D9;color:#17375E;width:100%;font-size: 11pt;font-family: Arial;">
<tr>
<td></td>
<td height="30"> </td>
</tr>
</table>
</div>
Working code sample: https://jsfiddle.net/wa1z4nvr/4/

Remove the ensp entity and give your paragraph a margin you like.
<p style="text-indent: 0; margin: 1em;">There are pending items that require your review. Please see below are the details. The request must be approved or denied within 72 business hours or it will escalate to your manager. If you have questions regarding this email, call <b>1-555-555-5555</b>.</p>

It looks like right now you're using en-spaces as your indent  
This would create a behavior where the first line appears to be indented and the rest does not.
If you want subsequent lines of text to be lined up with your first line, then you're probably not looking for an "indent".
You can remove the   from both your paragraph and your "Test." text, and adding a padding-left:1em to those elements, or to the table row containing them.
The table containing your test text might look like this:
<table style="background:#D9D9D9;width:100%;font-family: Arial;">
<tr style="background:#FFF">
<td style="background:#D9D9D9"></td>
<td height="30" style="padding-left: 1em">
<p style="font-size: 10.5pt;font-weight: 700;color:#555">Test.</p>
<div style="font-size: 10pt;color:#555">
<p>There are pending items that require your review. Please see below are the details. The request must be approved or denied within 72 business hours or it will escalate to your manager. If you have questions regarding this email, call <b>1-555-555-5555</b>.</p>
</div>
</td>
<td style="background:#D9D9D9"></td>
</tr>
</table>

Related

HTML table all one column in chrome

So, I recently took over managing the website for our robotics club. I have the most experience in web development in the room, though I haven't used it in a while so I am a bit rusty on some of the obscure details and stuff.
I've been trying to run through and remove all the unnecessary garbage the creator of the website used/left in, and I came across an issue that he was having, which nobody could figure out.
He was trying to format some information about the competition our school hosts in a data table, which can be seen here (I am posting the section and all the other content in that section, including the table, in case it is of any use):
<section id="news" class="container content-section trans-section text-center" style="position: relative;padding-top: 55px;">
<div class="row"><div class="col-md-offset-4 col-md-4"><h2 class="text-center">Additional Updates & Information</h2><br><div class="line"></div></div></div>
<br><br><br>
<div class="row text-left" style="padding-left: 80px;">
<div class="col-md-11">
<h2 class="text-left">Updates</h2>
<div class="line-alt"></div>
<div class="row">
<ul style="font-size: 1.6em; font-family: 'Lato'; font-weight: 300;">
<li>The number of SweeperBot matches has been changed from 2 to 3.</li>
<li>SweeperBot matches will run in the morning. Each robot will run through the field once and then initial rankings will be posted. Each robot will then run a second time and rankings will be updated. Each robot will then go through a third and final time.</li>
<li>We are planning on a double elimination format for the SumoBots. Some of the early SumoBot matches will run in the morning concurrently with the SweeperBot matches.</li>
<li>We will release the schedule for the day as we get closer to the date and get a firmer handle on the total number of teams.</li>
</ul>
</div>
<br><br>
<table class="table table-striped table-bordered table-condensed" style="border: 1px solid #3c3c3c !important;">
<caption style="align: top;">Schools Attending The Competition</caption>
<tr>
<td style="font-weight: 500;">School Name</td>
<td style="font-weight: 500;">Number of SumoBots</td>
<td style="font-weight: 500;">Number of SweeperBots</td>
</tr>
<tr>
<td>Bishop Shanahan High School</td>
<td class="success">3</td>
<td class="success">3</td>
</tr>
<tr>
<td>George School</td>
<td class="success">5</td>
<td class="success">3</td>
</tr>
<tr>
<td>Methacton High School</td>
<td class="success">4</td>
<td class="success">2</td>
</tr>
<tr>
<td>Pennridge High School</td>
<td class="success">4</td>
<td class="success">0</td>
</tr>
<tr>
<td>Plymouth Whitemarsh High School</td>
<td class="success">1</td>
<td class="success">1</td>
</tr>
</table>
<p style="font-family: 'Lato'; font-weight: 300;">*Actual number of robots subject to change as we approach April 16th.</p>
</div>
</div>
</section>
The issue that he came across is the the table does not format properly in Chrome, but it works fine in Edge and even IE. Haven't tested it with Firefox, because it is not installed, but nobody has said anything about any browser other than chrome.
The table, in chrome, shows up as a straight up and down, one columned table. The data is still in the proper order, but not arrangement. I would imagine that this is an issue someone else has experienced before, but I haven't and I couldn't find a good post that addressed this issue.
Can anyone help me out?
You have display: block; attached to your td on your site. This causes the td to behave as a block element instead of display: table-cell. Remove that, and the td elements will behave as expected.
Specifically, it looks like it is line 104 in your stylesheet named "style.css".

How to remove blank after td

I want to display an IBAN number in a html mail. To improve readability I want to add a blank after every 4th sign. To also provide a good usability I want to do this with padding, so the user can copy & paste the IBAN into his online banking system without any blanks. To achieve this I have to use a table, because Microsoft Outlook ignores padding on other elements:
<table cellpadding="0" cellspacing="0" border="0">
<tr>
<td style="padding-right:5px;">
IBAN:
</td>
<td style="padding-right:5px;">
XX01
</td>
<td style="padding-right:5px;">
2345
</td>
<td style="padding-right:5px;">
6789
</td>
<td style="padding-right:5px;">
0123
</td>
<td>
4567
</td>
</tr>
</table>
(See this jsfiddle)
My problem: When I copy & paste the IBAN a blank is added after each td element. Is there a way to remove these blanks with html or css?

HTML Text after table

I have been trying to get text after a table in HTML but for some reason I cannot get this to work. I have tried using div, padding and margin on the table but nothing seem to work. No matter what I do the text always end up behind the first row of the table unless I use </br>.
Here is my HTML:
<div>
<h2 align=left>1. Delivery schedule</h2>
<body> The table below list the various delivery cycles per store:</body>
<br>
<br/>
<p>
<table border="1" align="left" width="61%" height="100px" frame="border">
<tr>
<th height="30" bgcolor="#002387">Store name</th>
<th height="30" bgcolor="#002387">Order deadline</th>
<th height="30" bgcolor="#002387">Delivery lead time from approval date</th>
</tr>
<tr>
<td colspan="3" bgcolor="#002387" ><font color="#FFFFFF"> Cycle 1</font></td>
</tr>
<tr>
<td>Borehamwood</td>
<td>Friday 1st August 2014 by midday</td>
<td>2-4 working days</td>
</tr>
<tr>
<td>Hemel</td>
<td>Friday 1st August 2014 by midday</td>
<td>2-4 working days</td>
</tr>
</table>
</div>
<importantLink>Please note that the advertised 2-4 working days delivery lead time is conditional of the orders being approved by the regional operation managers by the end of order deadline day.</importantLink>
Your code is bleeding from many wounds. First of all, you should forget about the align attribute, and use a CSS class instead.
.align-left {
text-align: left;
}
<h2 class="align-left">1. Delivery schedule</h2>
Then, you have an unclosed <p> tag right before your table, which could be causing your problem. Having invalid markup can lead to unexpected results. And finally, importantLink - depending on your <!DOCTYPE> - is likely not valid (you have a doctype, right?). Use a standard element like an <a> tag, which actually means that it's a link, and if you want to be able to tell it apart from the rest, use a class or id tag to give it a reusable/unique name, respectively. In your case, the text you are presenting in that tag is nothing like a link, so I suppose a <p> tag is the most suited for your case.
<p class="importantLink">Please note that the advertised 2-4 working days delivery lead time is conditional of the orders being approved by the regional operation managers by the end of order deadline day.</p>
usually html elements go one after another unless you give an element a property such as float:left or float:right or in your case align:left so elements after the table won't be under that table, they will be positioned on it's right and from the top.
if you want that link to be after the table (under that table) remove the align:left from the table,
and when writing HTML make sure the opening and closing tags are the same and that your content is inside the body tag, here is the correction for that:
<html> <!--<div>-->
<body>
<h2 align=left>1. Delivery schedule</h2>
<p> The table below list the various delivery cycles per store:</p>
<br>
<br/>
<div><!--<p>-->
<table border="1" align="left" width="61%" height="100px" frame="border">
<tr>
<th height="30" bgcolor="#002387">Store name</th>
<th height="30" bgcolor="#002387">Order deadline</th>
<th height="30" bgcolor="#002387">Delivery lead time from approval date</th>
</tr>
<tr>
<td colspan="3" bgcolor="#002387" ><font color="#FFFFFF"> Cycle 1</font></td>
</tr>
<tr>
<td>Borehamwood</td>
<td>Friday 1st August 2014 by midday</td>
<td>2-4 working days</td>
</tr>
<tr>
<td>Hemel</td>
<td>Friday 1st August 2014 by midday</td>
<td>2-4 working days</td>
</tr>
</table>
</div>
<importantLink>Please note that the advertised 2-4 working days delivery lead time is conditional of the orders being approved by the regional operation managers by the end of order deadline day.</importantLink>
</body>
<html>
this line <table border="1" align="left" width="61%" height="100px" frame="border">
is causing your issue, either remove align:left or change <importantLink> to <importantLink style="clear:both">
If you want the text within the <importantLink> to be displayed below the table you insert text in a div tag as below:
<div style="clear:both">
<importantLink>Your text comes here....</importantLink>
</div>
Replace your importantLink with the three lines of code above.

Different width on Chrome and Firefox on same screen

recently I find that new version of firefox is show width, significantly different from chrome
this is my table which show completely different in fire fox and chrome . Is there any idea for this case?
<table id="headtable" class=" tahoma">
<tr>
<td width="84">نام سرور</td>
<td width="62">CPU</td>
<td width="46">RAM</td>
<td width="34" class="tool-tip">نوع هارد دیسک </td>
<td width="79">فضا</td>
<td width="43" class="tool-tip">پهنای باند </td>
<td width="46" class="tool-tip">ترافیک ماهیانه </td>
<td width="59">دیتا سنتر</td>
<td width="69" class="tool-tip">کنترل پنل </td>
<td width="47" class="tool-tip">هزینه‌ی راه اندازی </td>
<td width="54">هزینه‌ی ماهیانه</td>
</tr>
</table>
<div class="hole" id="hole">
<table id="panels-compare" class="tahoma compare panels">
<tr>
<td width="66">ایران۷</td>
<td width="62">Xeon 3430</td>
<td width="46">۸ گیگابایت</td>
<td width="58">SATA</td>
<td width="81">2x500GB</td>
<td width="43">۱۰۰ مگابیت</td>
<td width="46">۱۰۰ گیگابایت</td>
<td width="59">پارس‌آنلاین / افرانت</td>
<td width="69">DirectAdmin</td>
<td width="46">۵۰,۰۰۰</td>
<td width="54">۳۵۰,۰۰۰</td>
<td width="">سفارش</td>
</tr>
</table>
</div>
Weird. That can't be the code for the image as displayed, so I'm going to take a guess... Maybe you missed a column, it looks like some are the same size and others are not. Or, maybe the sum of the td widths is greater than one if its containing elements, and the browsers are responding to the invalid state differently. Similarly, it may be that invalid html elsewhere on the page is behind this - if all else fails, ensure your markup is valid.
It all depends on the "clutter" a browser has.
Google chrome has "clean" UI, it doesn't take up too much space for its address bar, bookmark bar etc..
Whereas Mozilla too has its own way of displaying things.
So there is no standard that defines how much screen a browser should use for address bar, bookmarks bar, home button, back-front buttons, tabs etc..
So just leave it as there is not much you can do other than what you've already done to have a uniform size.

outlook 2013 in-browser inbox is adding style attribute to my table and destroying the alignment

EDIT: I have added a fiddle to better demonstrate what is happening since the person who has taken the time to offer an answer (thanks!) does not seem to get what I was asking, so hopefully this helps to clarify
http://jsfiddle.net/t5sPL/
I am sending an HTML email. It renders fine in gmail, outlook desktop client, and several other email clients. however, when viewing an inbox online in the outlook webmail app, http://portal.microsoftonline.com, Microsoft seems to be doing its best to not let me center the contents of a table. Tipped off by this article
https://litmus.com/blog/hotmail-and-outlook-com-drop-support-for-margin
I see that the margin attribute is no longer supported. I tried using padding instead and no luck. So, to center my table, I thought I could go oldschool and use this pattern to center it:
<table width='100%' style='width:100%'>
<tbody>
<tr>
<td align='center'>
<table width='700' style='width:700px'>
<tbody>
<tr>
<td>Content to be centered</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
however, this still does not work, because in my <td align='center'> tag, outlook is inexplicably attaching a style='text-align:center;' attribute, for a result of
<td align='center' style='text-align:center;'>
which effectively justifies the content to the left. When I use "inspect element" and delete the style attribute, everything looks as expected.
Has anyone dealt with this issue before? Any resolution, or explanation? Thanks!
Are you trying to center the content inside the 700 wide table? If so, add align="center" to the table cell it is in:
<table width='700' style='width:700px'>
<tbody>
<tr>
<td align="center">Content to be centered</td>
</tr>
</tbody>
</table>
If you are trying to left align the 700 table content, but have the 700 table itself centered, just add align="left" to the <td> instead.
UPDATE:
Based on your jsFiddle - This should fix it:
<table width='100%' style='width:100%' border=1>
<tbody>
<tr>
<td align='center' style='text-align:center'>
<table align='center' width='700' style='width:700px' border=1>
<tbody>
<tr>
<td align='left'><b style='color:red'>This content used to be aligned incorrectly...</b></td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>