I've recently tried using a HTML signature in the Outlook app for IOS and everything displays correctly but for some reason an extra line is inserted between each line of text. Can't seem to work out why, or whether there is issues with code / if I can implement anything to stop the extra line the Outlook app seems necessary.
<p style="font-family: Helvetica, Arial, sans-serif; font-size: 12px; line-height: 12px; color: #1f497d; margin-bottom: 10px;"> </p>
<p style="font-family: Helvectica, Arial, sans-serif; font-size: 12px; line-height: 12px; color: #1f497d; ">Kind regards, </p>
<p>
<br /> <span style="color: #00b0f0; font-family: Helvetica, Arial, sans-serif; font-size: 14px;"><strong>Full Name</strong></span>
<br /> <span style="color: #1f497d; font-family: Helvetica, Arial, sans-serif; font-size: 12px"><strong>Company Name</strong></span></p>
<p><span style="color: #1f497d; font-family: Helvetica, Arial, sans-serif; font-size: 12px">Direct: <span style="color: #e36c0a;">0207 201 <strong>1234</strong></span></span>
<br /><span style="color: #1f497d; font-family: Helvetica, Arial, sans-serif; font-size: 12px"> Email: <a style="color: #1f497d;" href="mailto:email#email.co.uk">email#email.co.uk</a></span>
<br /><span style="color: #1f497d; font-family: Helvetica, Arial, sans-serif; font-size: 12px"> Web: <a style="color: #1f497d;" href="http://www.website.co.uk/">www.website.co.uk</a></span></p>
<p style="font-size: 0px; line-height: 0; font-family: Helvetica, Arial, sans-serif;"> </p>
Any suggestions greatly appreciated, sending me mad!
Related
I have created Html content using an editor and wanted to download that content in pdf format using mpdf library, but mpdf generated a blank page and it doesn't show any error, I have checked the tag of HTML is closed properly.here the $value['templateContaint']'s data coming from the editor .
foreach ($templateData as $key => $value) {
ob_start();
$mpdf = new Mpdf(['mode' => '0','format' => 'A4','margin_left' => 15,'margin_right' => 15,'margin_top' => 10,'margin_bottom' => 10,'margin_header' => 10,'margin_footer' => 10]);
$mpdf->debug = true;
ob_clean();
$mpdf->SetDisplayMode('fullpage');
$mpdf->WriteHTML($value['templateContaint']);
$content = ob_get_clean();
$mpdf->Output('./public/media/letter_management/ '.$templateTypeData[0]['templateName'].'_'.$value['empId'].'_'.date('Ymd').'.pdf', 'F');
}
<div><span id="docs-internal-guid-9c95ba87-7fff-7e55-0d79-fbaf3d96753d"><p dir="ltr" style="line-height: 1.2; margin-left: -90pt; text-indent: -90pt; margin-top: 0pt; margin-bottom: 0pt; padding: 0pt 0pt 0pt 90pt; text-align: right;"><span style="font-size: 12pt; font-family: "Times New Roman"; color: rgb(0, 0, 0); background-color: transparent; font-variant-numeric: normal; font-variant-east-asian: normal; vertical-align: baseline; white-space: pre-wrap;"><span style="border:none;display:inline-block;overflow:hidden;width:263px;height:66px;"><img src="https://lh3.googleusercontent.com/9PONnqNL7puPuIJUhPrFTueBGtzZyin2DmLoEeAICZJo_pp-lH-orBpopKHk6OHEzzYQbccrAbS6NR_SBnIcde7MUcVQLQh9hVzD8Mmurlez0BFVUPTT4FPHKMgIytIFQi5kLpRyQtGAyUIj9Q" width="263" height="66" style="margin-left:0px;margin-top:0px;"></span></span>
</p>
</span>
</div>
<div style=""><span style="font-family: Calibri, sans-serif; font-size: medium;"><b>{Reference_No}</b><br></span></div><span style="font-family: Calibri, sans-serif; font-size: medium;"><b>{current_date}</b></span>
<div>
<div><span style="font-family: Calibri, sans-serif; font-size: medium;"><br></span></div>
<div><span style="font-family: Calibri, sans-serif; font-size: medium;">To,</span></div>
<div><b style="font-family: Calibri, sans-serif; font-size: medium;">{candidate_name}</b></div>
<div><span style="font-weight: bold;"><font face="Calibri, sans-serif" size="3">{Address_1}</font><br><font face="Calibri, sans-serif" size="3">{Address_2}</font><br></span></div>
<div><span style="font-family: Calibri, sans-serif; font-size: medium; font-weight: bold;">{Address_3}</span><span style="font-weight: 700; font-family: Calibri, sans-serif; font-size: medium;"><br></span></div>
<div><span style="font-family: Calibri, sans-serif; text-decoration-line: underline; font-size: medium; font-weight: bold;"><center style="text-align: center;">Subject: Offer Letter</center></span></div>
<div><br></div>
<div><span style="font-family: Calibri, sans-serif; font-size: medium;"><b>Dear</b> <b> </b><font style="font-weight: bold;">{candidate_name},</font></span></div>
<div><span style="font-family: Calibri, sans-serif; font-size: medium;">This has reference to your application and subsequent discussion you had with us. We are pleased to offer you the agreed position of <b>{Designation}</b>,<span style="font-weight: 700;"> </span>
<span
style="font-weight: bold;">{Department}</span><span style="font-weight: 700;"> </span>in our organization on the terms and conditions mutually discussed and agreed upon.</span>
</div>
<div>
<div style=""><span style="font-family: Calibri, sans-serif; font-size: medium;"><br></span></div>
<div style=""><span style="font-family: Calibri, sans-serif; font-size: medium;">You are requested to bring with you the following documents (original together with one photocopy each) at the time of joining your duties:</span></div>
<div style=""><span style="font-family: Calibri, sans-serif; font-size: medium;"><style="margin-left:100px;">1. Proof of age- either Birth Certificate, SSC Certificate, or any other acceptable document</style="margin-left:100px;"></span></div>
<div style=""><span style="font-family: Calibri, sans-serif; font-size: medium;"><style="margin-left:100px;">2. Relieving Certificate & Service Certificate from your present employer </style="margin-left:100px;"></span></div>
<div style=""><span style="font-family: Calibri, sans-serif; font-size: medium;"><style="margin-left:100px;">3. Educational Certificates including mark sheets</style="margin-left:100px;"></span></div>
<div style=""><span style="font-family: Calibri, sans-serif; font-size: medium;"><style="margin-left:100px;">4. Four copies of your recent photograph in passport size </style="margin-left:100px;"></span></div>
<div style=""><span style="font-family: Calibri, sans-serif; font-size: medium;"><style="margin-left:100px;">5. Residence proof and Identity Proof (Copy of PAN card / Passport / Driving License / Election photo identity / Aadhar Card or any other proof issued by State / Central Government)</style="margin-left:100px;"></span></div>
<div style=""><span style="font-family: Calibri, sans-serif; font-size: medium;"><style="margin-left:100px;">6. Copy of current salary slip and Appointment Letter / latest Increment Letter</style="margin-left:100px;"></span></div>
<div style=""><span style="font-family: Calibri, sans-serif; font-size: medium;"><br></span></div>
<div style=""><span style="font-family: Calibri, sans-serif; font-size: medium;">As discussed, you shall join us before <span style="font-weight: bold;">{date_of_joining}</span>. A detailed Appointment Letter shall be issued to you after your joining. In case
you fail to join within the stipulated period, the offer will stand withdrawn automatically.</span>
</div>
<div style=""><span style="font-family: Calibri, sans-serif; font-size: medium;">Please acknowledge receipt of this offer letter by sending back a duly signed copy as a token of your acceptance.</span><br></div>
<div style=""><span style="font-family: Calibri, sans-serif; font-size: medium;"><br></span></div>
<div style=""><span style="font-family: Calibri, sans-serif; font-size: medium;">You are also requested to provide us a copy of your resignation letter within 3 days of receipt of this offer letter</span></div>
<div style=""><span style="font-family: Calibri, sans-serif; font-size: medium;"><br></span></div>
<div style=""><span style="font-family: Calibri, sans-serif; font-size: medium;">We are happy to welcome you to be a member of the <span style="font-weight: bold;">Loxim</span> family and look forward to a long and mutually beneficial association. </span>
</div>
<div style=""><span style="font-family: Calibri, sans-serif; font-size: medium;"><br></span></div>
<div style=""><span style="font-family: Calibri, sans-serif; font-size: medium;">With best wishes, </span></div>
<div style=""><span style="font-family: Calibri, sans-serif; font-size: medium;"><br></span></div>
<div style=""><span style="font-family: Calibri, sans-serif; font-size: medium;"><b>For, Loxim Industries Ltd.</b></span></div>
</div>
<div><span id="docs-internal-guid-a140a951-7fff-7fb4-3410-22ad15bba414"><span style="font-size: 12pt; font-family: Calibri, sans-serif; color: rgb(0, 0, 0); background-color: transparent; font-weight: 700; font-variant-numeric: normal; font-variant-east-asian: normal; vertical-align: baseline; white-space: pre-wrap;"><span style="border:none;display:inline-block;overflow:hidden;width:64px;height:43px;"><img src="https://lh5.googleusercontent.com/kMWrDhpPS-YcE1ySwJP47SUoyla0Jhs6wfVeyqBeCHaz8_F-huYboALaeYiKH692E3ZQ-OUPBBFng1R9-IvXWtAye4JEeFTtoU7SK3ApnyP3jYnKRnSQtSJe0OdGsvtZ1hsZ0V0hGySezwGZVQ" width="64" height="43" style="margin-left:0px;margin-top:0px;"></span></span>
</span><span style="font-weight: bold; font-size: small;"><br></span></div>
</div>
<div><span id="docs-internal-guid-0a660945-7fff-5859-f82d-f7dd68374856"><p dir="ltr" style="line-height:1.2;text-align: justify;margin-top:0pt;margin-bottom:0pt;"><span style="font-size: 12pt; font-family: Calibri, sans-serif; color: rgb(0, 0, 0); background-color: transparent; font-weight: 700; font-variant-numeric: normal; font-variant-east-asian: normal; vertical-align: baseline; white-space: pre-wrap;">Treesa Antony</span></p>
<p
dir="ltr" style="line-height:1.2;text-align: justify;margin-top:0pt;margin-bottom:0pt;"><span style="text-align: left; font-size: 16px; white-space: pre-wrap;"><font face="Calibri, sans-serif"><span style="font-weight: 700;"><font color="#000000">{hrvp_Designation}</font></span></font>
</span><span style="font-variant-numeric: normal; font-variant-east-asian: normal; font-size: 12pt; font-family: Calibri, sans-serif; font-weight: 700; vertical-align: baseline; white-space: pre-wrap;"><span style="color: rgb(0, 0, 0);">,</span></span>
<span
style="text-align: left; font-size: 16px; white-space: pre-wrap;">
<font color="#000000" face="Calibri, sans-serif"><span style="font-weight: 700;"> {hrvp_Department}</span></font>
</span><br></p>
<div><br></div>
<div><span style="font-variant-numeric: normal; font-variant-east-asian: normal; vertical-align: baseline;"><span style="" id="docs-internal-guid-576e2aa4-7fff-169c-6e37-d45d8cba5932"><p dir="ltr" style="color: rgb(0, 0, 0); font-family: Calibri, sans-serif; font-weight: normal; white-space: pre-wrap; line-height: 1.2; text-align: right; margin-top: 0pt; margin-bottom: 0pt;"><span style="font-size: 8pt; font-family: Arial; color: rgb(236, 105, 48); font-weight: 700; font-variant-numeric: normal; font-variant-east-asian: normal; vertical-align: baseline; background-color: rgb(255, 255, 255);"> </span>
<span
style="font-size: medium;"><span style="font-family: Arial; color: rgb(236, 105, 48); font-weight: 700; font-variant-numeric: normal; font-variant-east-asian: normal; vertical-align: baseline; background-color: rgb(255, 255, 255);"> </span><span style="font-family: Arial; color: rgb(236, 105, 48); font-weight: 700; font-variant-numeric: normal; font-variant-east-asian: normal; vertical-align: baseline; background-color: rgb(255, 255, 255);">LOXIM INDUSTRIES LIMITED</span></span>
<span
style="font-size: 8pt; font-family: Arial; color: rgb(236, 105, 48); font-weight: 700; font-variant-numeric: normal; font-variant-east-asian: normal; vertical-align: baseline; background-color: rgb(255, 255, 255);"> </span>
</p>
<p dir="ltr" style="color: rgb(0, 0, 0); font-family: Calibri, sans-serif; font-size: 12pt; font-weight: normal; white-space: pre-wrap; line-height: 1.2; text-align: right; margin-top: 0pt; margin-bottom: 0pt;"><span style="background-color: rgb(255, 255, 255);"><span style="font-size: 8pt; font-family: Arial; color: rgb(91, 91, 91); font-weight: 700; font-variant-numeric: normal; font-variant-east-asian: normal; vertical-align: baseline;">Registered Office:</span>
<span
style="font-size: 8pt; font-family: Arial; color: rgb(91, 91, 91); font-variant-numeric: normal; font-variant-east-asian: normal; vertical-align: baseline;"> ONE42, South Tower 9</span><span style="font-size: 8pt; font-family: Arial; color: rgb(91, 91, 91); font-variant-numeric: normal; font-variant-east-asian: normal; vertical-align: baseline;"><span style="font-size:0.6em;vertical-align:super;">th</span></span>
<span
style="font-size: 8pt; font-family: Arial; color: rgb(91, 91, 91); font-variant-numeric: normal; font-variant-east-asian: normal; vertical-align: baseline;"> Floor, Ambli Bopal Road, Bodakdev Ahmedabad 380 054, Gujarat, India.</span>
</span>
</p><span style="color: rgb(91, 91, 91); font-family: Arial; font-size: 8pt; font-weight: normal; white-space: pre-wrap; font-variant-numeric: normal; font-variant-east-asian: normal; vertical-align: baseline;"><div style="text-align: right;"><span style="background-color: transparent; font-size: 8pt;">+91 79 6155 0000 . info#loxim.com . www.loxim.com</span></div>
</span><span style="font-variant-numeric: normal; font-variant-east-asian: normal; vertical-align: baseline;"><div style="background-color: transparent; color: rgb(91, 91, 91); font-family: Arial; font-size: 8pt; font-weight: normal; white-space: pre-wrap; text-align: right;"><span style="background-color: transparent; font-size: 8pt;">CIN : U24114GJ2003PLC042820</span></div>
</span>
</span>
</span>
</div>
<div style="background-color: transparent; text-align: right; white-space: pre-wrap; font-weight: normal; font-size: 8pt; font-family: Arial; color: rgb(91, 91, 91);"><span id="docs-internal-guid-775e482b-7fff-f527-a446-1b5df7ee01f3"><span style="font-size: 12pt; font-family: "Times New Roman"; color: rgb(0, 0, 0); background-color: transparent; font-variant-numeric: normal; font-variant-east-asian: normal; vertical-align: baseline;"><span style="border:none;display:inline-block;overflow:hidden;width:263px;height:66px;"><img src="https://lh4.googleusercontent.com/sEu20rfa1gU6YuIPVUjfOGdjh6bFIUfFNATo3BoHZzwYeNgElh90HRMlZZimR6qpRbt8BqR3bOdsayYqt2O7wA9BUdGnAaxpcih48bQhvTykKZ-xwwg94AfMDs5iCVqVd77RkAbWfOXJSwd-mg" width="263" height="66" style="margin-left:0px;margin-top:0px;"></span></span>
</span>
</div>
<div style="text-align: left; background-color: transparent;">
<div><span style="font-family: Calibri, sans-serif; font-size: medium; font-weight: bold;">{Reference_No}</span></div>
<div><span style="font-family: Calibri, sans-serif; font-size: medium; font-weight: bold;">{current_date}</span></div>
<div><span style="font-family: Calibri, sans-serif; font-size: medium; font-weight: bold;">{current_date}</span></div>
</div>
</span>
</div>
See below:
<p
style="margin: 0px; text-align: left; color: #666666; line-height: 25px;
font-family: Tahoma, Verdana, Geneva, sans-serif; font-size: 14px; font-weight: bold;">
• {|FeatureFour|}</p>
So the above, is a standard paragraph tag but with the extra text (which seems like some sort of variable);
The code is from a random markup file I came across, I am curius to see what it represents.
&bull gives you to use a bullet mark and the {|FeatureFour|} is the content inside the <p> tag, so {|FeatureFour|} is just a paragraph content
<p
style="margin: 0px; text-align: left; color: #666666; line-height: 25px;
font-family: Tahoma, Verdana, Geneva, sans-serif; font-size: 14px; font-weight: bold;">
• {|FeatureFour|}</p>
<p
style="margin: 0px; text-align: left; color: #666666; line-height: 25px;
font-family: Tahoma, Verdana, Geneva, sans-serif; font-size: 14px; font-weight: bold;">
• {|FeatureFour|}</p>
<p
style="margin: 0px; text-align: left; color: #666666; line-height: 25px;
font-family: Tahoma, Verdana, Geneva, sans-serif; font-size: 14px; font-weight: bold;">
• Hello world!</p>
. You can change these content in the text editor.
I am getting a gap at the end/beginning of just 2 cells in my email and I can't for the life of me figure out why.
The cell-padding is set to 0
cell-spacing = 0
Here's what I have:
<style type="text/css">
h1,h2,h3,h4,h5,h6,h7 {
font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
line-height: 1;}
h1 {
font-size: 20px;
color: #B99350;
line-height: 1;
font-size: 25px;
padding-top: 10px;
font-align: center;
font-weight: normal;
text-align: center;
}
h3{
font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
line-height: 1;
color: #B99350;
font-size: 24px;
padding-top: 15px;
padding-bottom: 10px;
padding-left: 15px;
padding-right: 10px;
font-style: normal;
font-weight: normal;
text-align: center;
text-transform: capitalize;
}
h4{
font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
line-height: 1;
color: #b99350;
font-size: 22px;
padding-right: 10px;
padding-left: 15px;
font-style: normal;
text-align: left;
font-weight: normal;
}
h5{
font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
line-height: 1.3;
font-weight: normal;
color: #FAFAFA;
font-size: 14px;
padding-top: 3px;
color: #FCFCFC;
}
h6{
font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
line-height: 1.3;
font-weight: bold;
color: #FFFFFF;
font-size: 14px;
padding-left: 15px;
color: #FFFFFF;
}
h7 {
font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
font-style: normal;
font-weight: normal;
font-size: 16px;
padding-top: 3px;
padding-bottom: 20px;
padding-right: 20px;
padding-left: 15px;
color: #FFFFFF;
line-height: 25px;
}
h8 {
padding-left: 15px;}
h9 {
font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
font-style: normal;
font-weight: normal;
font-size: 10px;
padding-top: 3px;
padding-bottom: 20px;
padding-right: 20px;
padding-left: 15px;
color: #FFFFFF;
line-height: 25px;}
body,td,th {
font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
font-style: normal;
font-weight: normal;
font-size: 16px;
padding-top: 3px;
padding-bottom: 10px;
color: #FFFFFF;
line-height: 20px;
}
li {
font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
font-style: normal;
font-weight: normal;
font-size: 18px;
color: #FFFFFF;
line-height: 1em;
padding-top: 10px;
}
body {
background-color: #FCFCFC;
}
.blue {
color: #B99350;
}
</style>
<table width="600" border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse" valign="center" ;
>
<tbody>
<tr>
<td colspan="2" bgcolor="#201545" cellspacing="0" cellpadding="0" style="border-collapse: collapse">
<h7>• AA rated State Government of South Australia occupies 76% of the NLA</h7>
<br>
<h7>• $13 million* spent in refurbishments between 2008 and 2016</h7>
<br>
<h7>• 5.3 year WALE and 97% occupancy</h7>
<br>
<h7>• Located in the core of Adelaide’s CBD</h7>
<br>
<h7>• Surplus land area with development potential</h7>
<br>
<h7>• Fully leased net income of $9.3 million*</h7>
<br>
<h7>• Net lettable area of 19,855sqm*</h7>
<br>
<h7>• 4.5-Star NABERS Rating</h7>
</p>
<h7><strong>Please click here to view the Information Memorandum
<h7></strong><br>
<h9>* approx </h9>
<hr valign="top" width="100%" size="4px" color="#9D7F4A" align="left" style="border-collapse: collapse;" >
<h4>FOR SALE VIA EXPRESSIONS OF INTEREST CLOSING 5PM (AEDT) THURSDAY, 20 OCTOBER 2016</h4></td>
<tr><td valign="top" width="232" align="left" bgcolor="#201545" cellspacing="0" style="padding-left: 15px; ";><img src="JLL_Logo_Rev_WEB.png" width="97" height="42" alt="JLL"/>
<h5><strong>Rob Sewell<br>
</strong>+61 407 243 229<br>
rob.sewell#ap.jll.com</h5>
<h5><strong>Jamie Guerra</strong><br>
+61 418 849 780<br>
jamie.guerra#ap.jll.com</h5>
<h5><strong>Roger Klem <br>
</strong>+61 423 919 373<br>
roger.klem#ap.jll.com
<br>
<br>
<strong>INTERNATIONAL</strong><br>
<strong>Stuart McCann<br>
</strong>+65 8522 1031<br>
stuart.mccann#ap.jll.com</h5></td>
<td valign="top" bgcolor="#201545" style="color: #2BACE2; padding-left: 15px;"><img src="KnightFrank_LR.png" alt="KnightFrank" width="108" height="54"/>
<h5><strong>Guy Bennett<br>
</strong>+61 418 808 548<br>
< guy.bennett#au.knightfrank.com</h5>
<h5><strong>Lukas Weeks</strong><br>
+61 434 957 537<br>
lukas.weeks#au.knightfrank.com</h5>
<h5><strong>James Parry</strong><br>
+ 61 408 553 000<br>
james.parry#au.knightfrank.com
<br>
<br>
<strong>INTERNATIONAL</strong><br>
<strong>Neil Brookes<br>
</strong>+65 8309 4985<br>
neil.brookes#asia.knightfrank.com</h5></td>
</tbody>
</table></tr>
</body>
</html>
There are 2 columns/cells in this section and both are sitting with a massive gap between the (missing) logos and the text above it and I can't figure out how to close it...
Please help!
Thanks
P.S. the top code is not to the end. But I wasn't allowed to show the rest as it was "too much HTML" not enough question...
I HAVE THE ANSWER -
at the very end the
is after & and should be before them.
Simple as that. Swapped it in front and all fixed!
First of all, this is NOT how you use tables!
W3Schools Tables Link
Secondly, the space after each email field is the margin for the h5 tag. See that all your data is wrapped in an h5 tag? Those provide a top-bottom margin. Try removing it to see the effects. You cant call these "cells" because you are not wrapping the individual items in td tags.
Also, dont forget to close your tables.
I have created Django html email templates that looks something like this:
<p style="font-family: 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; font-size: 14px; line-height: 1.6em; font-weight: normal; margin: 10px 0 10px; padding: 0;">
Hello John
</p>
<p style="font-family: 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; font-size: 14px; line-height: 1.6em; font-weight: normal; margin: 10px 0 10px; padding: 0;">
Welcome to the site
</p>
<p style="font-family: 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; font-size: 14px; line-height: 1.6em; font-weight: normal; margin: 10px 0 10px; padding: 0;">
More text here...
</p>
Since it's an email template, I must use inline styles and as a result it looks ugly and I have to repeat myself. I'm looking for a way to improve this.
My idea is to create a template tag that will return the style info:
#register.filter
def style(tag):
tags = {
'p': "style="font-family: 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; font-size: 14px; line-height: 1.6em; font-weight: normal; margin: 10px 0 10px; padding: 0;""
# Will add more options here
}
return tags[tag]
Then in my template I will use:
<p|style>
Hello John
</p>
<p|style>
Welcome to the site
</p>
<p|style>
More text here...
</p>
I know it is not ideal to put html in python code, but I can't think of a better way?
Any thoughts or better ways to achieve this?
Consider defining a CSS class and assigning this class to all the elements that need to be formatted.
template.css
.MyEmailStyle {
font-family: 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif;
font-size: 14px;
line-height: 1.6em;
font-weight: normal;
margin: 10px 0 10px;
padding: 0;
}
main.html
<p class="MyEmailStyle">
Hello John
</p>
As you can't include external or internal CSS files in an email template, consider using this library.
I am having trouble trying to decrease the line spacing here. Changing the line-height doesn't do anything.
<p><span style="color: rgb(137, 137, 137); font-family: 'Lucida Grande', 'Lucida Sans Unicode', Arial, Verdana, sans-serif; line-height: 18px;"> ★</span> iPhone Investor</p>
<p><span style="color: rgb(137, 137, 137); font-family: 'Lucida Grande', 'Lucida Sans Unicode', Arial, Verdana, sans-serif; line-height: 18px;"> ★</span> iPad Investor</p>
<p><span style="color: rgb(137, 137, 137); font-family: 'Lucida Grande', 'Lucida Sans Unicode', Arial, Verdana, sans-serif; line-height: 18px;"> ★</span> Brokers' client</p></div>
Thanks for any help
You can decrease the line spacing by applying the line-height style to the p element, rather than the span element.
Here's a full working example:
.spacing {
line-height: 18px;
}
.star {
color: rgb(137, 137, 137);
font-family: 'Lucida Grande', 'Lucida Sans Unicode', Arial, Verdana, sans-serif;
}
<p class="spacing">
<span class="star"> ★</span> iPhone Investor
</p>
<p class="spacing">
<span class="star"> ★</span> iPad Investor
</p>
<p class="spacing">
<span class="star"> ★</span> Brokers' client
</p>
I am not positive, but I think you referring to the margin that is added to 'p' tags by default.
All p tags have a margin on the bottom, something like 15px; You can override that with the following...
CSS in a file...
p { margin-bottom: 5px; }
or Inline
<p style="margin-bottom: 5px"></p>